Videos über QF-Test

Mit Klick auf den Play-Button laden Sie ein Video von unserem externen Anbieter YouTube. Datenschutzerklärung

Spezialwebinare

Barrierefreiheit von Webanwendungen testen mit QF-Test

Bis zum 28. Juni 2025 müssen Webseiten von vielen Unternehmen innerhalb der EU barrierefrei sein. Doch was bedeutet Barrierefreiheit im Web-Kontext? Wen betrifft es und worauf müssen Seitenbetreiber achten? Und vor allem: Wie kann QF-Test Sie dabei unterstützen, die gesetzlichen Anforderungen zu erfüllen?

In diesem Webinar geben wir eine kleine Einführung zu Web-Accessibility und präsentieren die neuen Accessibility-Testing-Features von QF-Test.

Material: Präsentation „Barrierefreiheit von Webanwendungen“

Transkript (gekürzt)

Herzlich willkommen zum Webinar! Mein Name ist Daniel Rieth, Junior Softwareentwickler bei Quality First Software. Gemeinsam mit meiner Co-Moderatorin Sofya Leventhal, ebenfalls Softwareentwicklerin, präsentieren wir Ihnen heute die Features für Barrierefreiheitstests mit QF-Test. Wir sind beide im Projekt für Barrierefreiheitstests bei QF-Test involviert und freuen uns, Ihnen unsere Umsetzung vorzustellen.

Agenda

  • Grundlagen zu Accessibility und Barrierefreiheit (mit rechtlichem Kontext)
  • Überblick über QF-Test – insbesondere zu unseren Barrierefreiheitstests
  • Live-Demo: Praktische Demonstration der Tests
  • Ausblick auf zukünftige Entwicklungen und häufig gestellte Fragen

Grundlagen zur Barrierefreiheit

Einstieg in das Thema

  • Barrierefreiheit zählt nicht nur im physischen Bereich (z. B. Rollstuhlfahrer, blinde Personen) – sie wird zunehmend auch digital relevant.
  • Unser Alltag verlagert sich in den digitalen Bereich, weshalb Webseiten und Anwendungen barrierefrei gestaltet sein müssen.

Web Accessibility

Das Worldwide Web Consortium (W3C) definiert digitale Barrierefreiheit so, dass Menschen mit Behinderungen trotz Einschränkung das Web wahrnehmen, verstehen, navigieren und interagieren können.

Beispiel: Screenreader wandeln den angezeigten Text in Sprache um, sodass auch Menschen mit visuellen Einschränkungen Webinhalte erfassen können. Bekannte Screenreader sind etwa die von Apple, Microsoft, Android, NVDA (kostenfrei) oder kostenpflichtig JAWS.

Weitere Barrieren

  • Hören: Probleme bei multimedialen Inhalten, für die oft Untertitel oder Gebärdensprachdolmetscher erforderlich sind.
  • Kognitiv: Komplexe oder unstrukturierte Inhalte können Menschen mit kognitiven Beeinträchtigungen vor Herausforderungen stellen.
  • Temporär/Altersbedingt: Auch vorübergehende Einschränkungen (z. B. nach einer Augen-OP) können jeden betreffen.

Warum Barrierefreiheit?

  • Humanistischer Aspekt: Jeder soll am digitalen Leben teilhaben können.
  • Wirtschaftlicher Vorteil: Barrierefreie Seiten erreichen mehr potenzielle Kunden.
  • User Experience: Verbesserte Bedienbarkeit kommt nicht nur Menschen mit Behinderungen zugute, sondern optimiert auch die Navigation und Interaktion für alle.
  • Gesetzliche Vorgaben: In Deutschland und der gesamten EU tritt bald das Barrierefreiheitstärkungsgesetz (BFSG) in Kraft, das anhand des European Accessibility Act (EAA) Mindestanforderungen definiert.

Gesetzliche Rahmenbedingungen

European Accessibility Act (EAA):

Setzt UN-Behindertenrechtskonventionen um und fordert die Verbesserung der Barrierefreiheit von Produkten und Dienstleistungen – auch im digitalen Bereich.

  • Umsetzung in Deutschland:
    • Das BFSG, basierend auf dem EAA, tritt am 28. Juni in Kraft.
    • Es richtet sich an private Wirtschaftsakteure (Hersteller, Händler, Importeure) und betrifft insbesondere Business-to-Consumer-Webseiten.
    • Ausnahmen gelten für Kleinstunternehmen (z. B. bis zu 10 Mitarbeiter, maximal 2 Mio. Jahresumsatz).
  • Anwendung: Jede B2C-Webseite, die digitale Kommunikationstools (z. B. Kontaktformulare) einsetzt, muss barrierefrei sein. Reine B2B-Angebote sind zwar nicht zwingend betroffen, dennoch ist die Umsetzung oft sinnvoll.

WCAG (Web Content Accessibility Guidelines):

  • Aufgeteilt in vier Kategorien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
  • Die Regeln haben drei Konformitätslevel:
    • Level A: Essenzielle Anforderungen (müssen erfüllt sein!).
    • Level AA: Sehr wichtig, da auch oft gesetzlich gefordert.
    • Level AAA: Erweiterte Anforderungen, die über das Gesetz hinausgehen.

Überblick über QF-Test

Unsere Lösung

QF-Test ist ein Tool für automatische Benutzeroberflächentests (GUI-Tests). Es ermöglicht das Aufzeichnen, Simulieren und Wiedergeben von Benutzerinteraktionen und unterstützt umfangreiche Test-Suiten.

  • Besonderheiten:
  • Tiefe Integration: Zugriff auf Systemkomponenten und robuste Komponentenerkennung, die auch bei Änderungen zuverlässig arbeitet.
  • Anpassbarkeit: Unterstützt diverse Technologien, wobei der Schwerpunkt im Webinar auf Webanwendungen liegt.

Zwei Ansätze für Barrierefreiheitstests

1. Integration einer bestehenden Bibliothek (axe-core):

  • axe-core, eine Open-Source-Lösung, wird in QF-Test eingebunden und erweitert – insbesondere im Logging und Reporting.
  • Standardmäßig werden alle WCAG-Regeln der Level A und AA überprüft. Dabei wird die HTML-Struktur analysiert, um beispielsweise Farbkontraste von Textelementen zu überprüfen.

2. Eigene Tests in QF-Test:

  • Zusätzlich haben wir berührungsempfindliche Barrierefreiheitstests entwickelt, etwa für den Farbkontrast von Grafiken und Bildern.
  • Mit QF-Test können auch Bereiche (Scope) und spezifische HTML-Elemente (z. B. IMG-Tags) gezielt überprüft werden.

Live-Demo

Einstieg über den Schnellstartassistenten

  • Im Schnellstartassistenten von QF-Test wählen Sie den Punkt „Barrierefreiheit“.
  • Geben Sie die URL der zu testenden Webseite an (wir nutzen eine Demoseite der axe-core-Entwickler, welche absichtlich Barrieren aufweist).
  • Wählen Sie das Modul:
    • Zunächst den axe-core-Check (großer Teil des Tests).
    • Später auch den Farbkontrastcheck für Grafikelemente.

Ablauf eines Testfalls

1. Testvorbereitung:

Die Webseite wird im Browser gestartet, und der definierte Verbindungsmodus wird aktiviert. Der Testfall ruft die entsprechende Prozedur (z. B. für den axe-core-Check) auf – alle entsprechenden Regeln werden geprüft.

2. Durchführung und Logging:

Im Terminal sehen Sie Logging-Informationen, die den Ablauf und die Screenhots bei Fehlern dokumentieren.

Fehler werden beispielsweise durch rote Rahmen hervorgehoben. Die Fehlermeldung enthält:

  • Anzahl der fehlerhaften Elemente.
  • Impact-Bewertung (z. B. „critical“ oder „minor“).
  • Identifikatoren (XPath, CSS-Selector) zur schnellen Lokalisierung des Elements.
  • Detailinformationen zum Fehler (z. B. unzureichender Farbkontrast).

3. Fehlerbehebung in der Demo:

Ein Beispiel: Ein Farbkontrastfehler, bei dem hellgrüner Text auf weißem Hintergrund nicht ausreicht (gemessener Wert z. B. 2,17:1 statt mindestens 4,5:1). Durch Änderung der Textfarbe (z. B. zu Schwarz) und erneutes Testen wird der Fehler behoben.

4. Erweiterte Tests:

Neben dem Farbkontrast für Textelemente wird auch der „Image alt“-Check durchgeführt, der sicherstellt, dass Bilder eine beschreibende Alternative (Alt-Tag) besitzen. Die Demo zeigt, wie mehrere Fehler gruppiert („gesquasht“) oder einzeln angezeigt werden können.

Reporting

QF-Test generiert ausführliche Reports, die:

  • Übersichtliche Screenshots der fehlerhaften Elemente beinhalten.
  • Alle Fehlermeldungen und deren Detailinformationen darstellen.

Diese Reports sind ideal, wenn Tester:innen oder externe Stakeholder (die QF-Test nicht direkt nutzen) die Ergebnisse einsehen möchten.

Parameter und Erweiterungsmöglichkeiten

Regelauswahl:

  • Einzelne Regeln können gezielt überprüft werden (z. B. nur der „Color Contrast“-Check).
  • Es ist möglich, Regeln zu „skippen“ oder den Prüfbereich („Scope“) einzuschränken (z. B. nur ein bestimmter Bereich der Webseite wird getestet).

Weitere Funktionen:

  • Einstellung, ob erfolgreiche Checks im Log angezeigt werden sollen.
  • Anpassung von Logging-Optionen bzgl. Screenshot-Größe und Detailtiefe.

Ausblick und Weiterentwicklung

Zukünftige Features: Neben den bereits implementierten Checks (Farbkontrast, Image alt) arbeiten wir an weiteren Funktionen, z. B. der Prüfung der Sichtbarkeit des Fokus bei Tastaturnavigation.

Erweiterte Testmöglichkeiten: Wir planen, noch mehr WCAG-Richtlinien in QF-Test abzubilden – teilweise auch solche, die sich nicht automatisch prüfen lassen, um so den manuellen Prüfaufwand zu reduzieren.

Objektvariablen: In einem kommenden Spezialwebinar werden wir das Konzept der Objektvariablen vorstellen, das ab Version 9.0 das Handling von Variablen als echte Datentypen ermöglicht.

Abschluss und Fragerunde

Zum Abschluss des Vortrags:

  • Haben wir eindrucksvoll gezeigt, wie QF-Test hilft, Barrierefreiheit auf Webseiten automatisch zu prüfen und wie Fehler durch detailliertes Logging und Reporting identifiziert werden können.
  • Wichtiger Hinweis: Auch wenn automatische Tests einen Großteil der WCAG-Richtlinien abdecken (laut axe-core ca. 57 % der üblichen Probleme), bleibt eine manuelle Prüfung durch Experten unverzichtbar.

Vielen Dank für Ihre Aufmerksamkeit und viel Erfolg bei der Umsetzung barrierefreier Webangebote!