NVDA ist ein kostenloser Open-Source-Screenreader. NVDA verbindet sich mit speziellen Software-Schnittstellen von Betriebssystemen und Anwendungen, um deren Inhalte auf geeignete Weise barrierefrei zu präsentieren (beispielsweise akustisch oder über eine Braillezeile) und mit ihnen zu interagieren (um zum Beispiel zwecks Navigation und Bedienung per Tastatur oder Joystick).
Daher eignet sich NVDA auch für die barrierefreie Erfassung und Bedienung von Webseiten über einen Webbrowser.
Zur Überprüfung der Barrierefreiheit einer Webseite sollten alle Prüfschritte auch manuell mit einem Screenreader durchgeführt werden – ein großer Anteil an Menschen benutzt Screenreader, um Webseiten zu betrachten und zu bedienen. Daher bietet sich NVDA als ein Werkzeug für Barrieretests an.
Da die Bedienung von NVDA wie bei allen Screenreadern gewöhnungsbedürftig ist, erklärt diese Seite die wichtigsten grundlegenden NVDA-Konzepte und -Bedienungsweisen. Mit dieser Grundlage kann dann NVDA genutzt werden, um Webseiten auf ihre Barrierefreiheit zu testen.
NVDA-Installer von https://www.nvaccess.org/download/ herunterladen und installieren.
NVDAs Hauptmerkmal ist der Lesemodus. Einerseits bietet der Lesemodus die (u. a. akustische) Ausgabe von Seiteninhalten, angereichert mit Metainformationen. Andererseits ändert der Lesemodus das übliche Verhalten von Tastaturtasten: Sie dienen nun der Navigation innerhalb der aktuellen Webseite. Beispielsweise wird durch Drücken der Unten-Pfeiltasten die nächste "Seitenzeile" angesprungen und vorgelesen, anstatt wie üblich das Browserfenster vertikal zu scrollen.
Im Lesemodus kann der Seiteninhalt über Objektnavigation erschlossen werden, und spezielle Tastatureingaben erlauben das Anspringen von Objekten speziellen Typs. Beispiele für Objekttypen sind Überschriften, Navigationselemente und Eingabeformulare. Bei der Überprüfung von Barrierefreiheit hilft die visuelle Hervorhebung des aktuell ausgewählten Objektes. Diese Funktion wird auf folgende Weise aktiviert:
NVDA zeichnet dann folgende Umrandungen:
Der NVDA-Sprachbetrachter protokolliert alle Screenreader-(Sprach-)Ausgaben. Dadurch kann zusätzlich oder alternativ zur akustischen Ausgabe die Screenreader-Ausgabe kontrolliert werden.
Standardmäßig gibt NVDA auch Informationen zu Elementen aus, die bei Mauszeigerbewegungen unterhalb des Mauszeigers liegen. Für die Überprüfung von Webseiten auf Barrierefreiheit führt das schnell zur Informationsüberflutung, zumal das primäre Ziel der Überprüfung auf reiner Tastaturbedienung aufbaut. Daher empfiehlt sich die Deaktivierung von NVDA-Ausgaben bei Mauszeigerbewegungen (Mausklicks lösen weiterhin relevante Ausgaben aus):
Einige NVDA-Befehle werden als Tastenkombinationen bei gleichzeitigem Drücken des NVDA-Modifier-Keys mit weiteren Tastaturtasten ausgelöst. Standardmäßig dient die Einfügen-Taste (Einfg, Insert, Ins) als NVDA-Modifier-Key. Bei den folgenden Tastaturbefehlen bedeutet NVDA das Gedrückthalten des NVDA-Modifier-Keys. Beispiel NVDA+s (Sprachmodus wechseln): Einfügen-Taste gedrückt halten und s-Taste drücken. Wiederholtes Drücken dieser Tastaturkombination wechselt zwischen den drei akustischen Ausgabemodi Stumm, Nur Signaltöne und Sprechen.
Screenreader nutzen die Computertastatur zur erweiterten Bedienung und Navigation. Speziell NVDA kennt zwei Modi, Fokusmodus (Focus Mode) und Lesemodus (Browse Mode):
NVDA schaltet während der Seitenbedienung automatisch zwischen Fokusmodus und Lesemodus um: Beispielsweise aktiviert sich beim Reintabben in ein Formulareingabefeld der Fokusmodus. Beim Verlassen von Eingabefeldern, z.B. durch Weitertabben auf einen Seitenlink wird der Lesemodus aktiviert. Durch Eingabe der Tastenkombination NVDA+Leertaste (NVDA+Space) kann auch jederzeit manuell zwischen Fokusmodus und Lesemodus gewechselt werden.
| Tastatureingabe | Funktion |
|---|---|
| Strg | aktuelle Sprachausgabe stoppen |
| NVDA+Leertaste | zwischen Fokusmodus und Lesemodus wechseln |
| NVDA+1 | Modus "Tastenkombination erklären" einschalten und ausschalten. Wenn dieser Modus eingeschaltet ist, wird die entsprechende Eingabe nicht von NVDA ausgeführt, sondern NVDA erklärt die Eingabe. Das Einschalten von "Tastenkombination erklären" ist (eigentlich nur) sinnvoll, während NVDA im Lesemodus ist. Dann erklärt NVDA beispielsweise beim Drücken der Taste h: "h - springt zur nächsten Überschrift". Während der Modus "Tastenkombination erklären" eingeschaltet ist, werden Eingaben nur erklärt, nicht ausgeführt. Im Fokusmodus werden dann sogar keine Zeicheneingaben an das Programm weitergegeben. Daher nicht vergessen, den Modus "Tastenkombination erklären" durch wiederholte Eingabe von NVDA+1 wieder zu deaktivieren. |
| Tab | zum nächsten fokussierbaren Objekt navigieren und dieses vorlesen |
| Umschalt+Tab | zum vorherigen fokussierbaren Objekt navigieren und dieses vorlesen |
| NVDA+F7 | Elementliste der aktuellen Seite öffnen.
Nützlich bei der Überprüfung des BITV-Prüfschrittes zu Überschriften (9.1.3.1a) |
| Tastatureingabe | Funktion |
|---|---|
| ↓ | zur nächsten "Zeile" navigieren und diese vorlesen. Eine Zeile entspricht (standardmäßig) bis zu 100 Zeichen innerhalb eines "Objektes". Falls die aktuelle Zeile die letzte (bzw. ggf. einzige) Zeile des aktuellen Objektes ist, wird das nächste Objekt und darin die erste (bzw. ggf. einzige) Zeile ausgewählt. Ein Objekt entspricht einem in sich geschlossenen Element, beispielsweise auf Webseiten Textinhalte von mit Paragraf ( <p>, individuell getrennt durch <br />, aber nicht Links / <a> innerhalb des Textinhaltes), eine Überschrift (<h1>, <h2>, ... <h6>), eine Tabellenzelle, Listeineinträge (<li>) von ungeordneten und geordneten Listen, Eingabefelder, Labels, etc..Objekte, die explizit als unfokussierbar ausgezeichnet sind (bspw. durch tabindex="-1"), werden nicht annavigiert bzw. werden übersprungen. |
| ↑ | zur vorherigen "Zeile" navigieren und diese vorlesen. |
| → | zum nächsten "Zeichen" navigieren und dieses vorlesen (buchstabieren). Insbesondere bei akustisch falsch vorgelesenen Wörtern hilft die Buchstabierung beim Verständnis |
| ← | zum vorherigen "Zeichen" navigieren und dieses vorlesen (buchstabieren). |
| Strg+↓ | zum nächsten "Objekt" navigieren und dieses vollständig vorlesen (also keine Beachtung von 100-Zeichen-Untersprüngen). Auch nützlich zur Überprüfung des BITV-Prüfschritts zur inhaltlichen Gliederung (9.1.3.1d) |
| Strg+→ | zum nächsten "Wort" navigieren und dieses vorlesen. |
| Umschalt+Strg+↓ | Auswählen/Markieren/Erweitern der aktuellen Textauswahl von/mit allem Text von aktueller Screenreader-Cursor-Position bis zum nächsten Objekt (kann dann in die Zwischenablage mit herkömmlichen Strg+c kopiert werden). |
| Strg+Alt+→ | innerhalb einer Tabellenzelle: wenn eine rechts angrenzende Zelle existiert, dann zu dieser Zelle navigieren und diese vorlesen. Solche Tabellennavigation-Tastenkombinationen dienen also der räumlichen Navigation innerhalb einer Tabelle. Außerdem navigieren sie nicht aus der Tabelle raus. |
| Strg+Alt+↓ | innerhalb einer Tabellenzelle: wenn eine unten angrenzende Zelle existiert, dann zu dieser Zelle navigieren und diese vorlesen. |
| NVDA+↓ | Automatikmodus: Ab aktuellem Objekt allen Seiteninhalt vorlesen, und auch beim Vorlesen automatisch Objektnavigator auf das aktuelle Objekt weiterbewegen |
| NVDA+↑ | Aktuelles Objekt (erneut) vorlesen und Objektnavigator darauf belassen (also keine Navigation auslösen) |
| NVDA+↑↑ | Aktuelles Objekt buchstabiert vorlesen (bei gedrückter NVDA-Taste die Nach-Oben-Pfeiltaste schnell zweimal drücken) |
| NVDA+↑↑↑ | Aktuelles Objekt per Buchstabiertafel (Beispiel: hallo = "Heinrich Anton Ludwig Ludwig Otto") buchstabiert vorlesen (bei gedrückter NVDA-Taste die Nach-Oben-Pfeiltaste schnell dreimal drücken) |
| h | zur nächsten Überschrift (heading) navigieren und diese vorlesen. Nützlich bei der Überprüfung des BITV-Prüfschrittes zu Überschriften (9.1.3.1a) |
| Umschalt+h | zur vorherigen Überschrift navigieren und diese vorlesen |
| 1, 2, 3, 4, 5, 6 | zur nächsten Überschrift der Ebene 1, 2, 3, 4, 5, 6 navigieren und diese vorlesen Nützlich bei der Überprüfung des BITV-Prüfschrittes zu Überschriften (9.1.3.1a) |
| d | zur nächsten Sprungmarke/Landmark navigieren und diese vorlesen |
| t | zur nächsten Tabelle ( Nützlich bei der Überprüfung der BITV-Prüfschritte zu Tabellen (9.1.3.1e, 9.1.3.1f, 9.1.3.1g) |
| l | zum ersten Listeneintrag (<li>) der nächsten Liste (<ul>, <ol>) navigieren und diesen vorlesen |
| i | zum nächsten Listeneintrag (<li>) navigieren und diesen vorlesen |
| g | zur nächsten Bild (<img>) mit nichtleerer Beschreibung navigieren und dessen Beschreibung vorlesen.Bilder mit leerer Beschreibung werden übersprungen. Ein Bild hat eine leere Beschreibung, wenn sein alt-Attribut explizit leer ist (alt="" oder alt). Leere Beschreibungen werden für Bilder verwendet, die rein dekorative Funktion erfüllen, also keine Bedeutung für den Seiteninhalt haben. |
| k | zum nächsten Link (<a>) navigieren und diesen vorlesen. Anders als Tab werden also nur Link angesprungen und andere fokussierbare Elemente (Eingabefelder, Buttons, etc.) übersprungen. |
| f | zum nächsten Eingabefeld navigieren und dieses vorlesen. Nützlich für das strukturierte Ausfüllen von Formularen |
| q | zum nächsten Zitatblock navigieren und diesen vorlesen. Nützlich bei der Überprüfung des BITV-Prüfschrittes zu Zitaten (9.1.3.1c) |
| Umschalt+<Taste> | Zum vorherigen <Tastenobjekttyp> navigieren und diesen vorlesen |
Die Initiative BIK (barrierefrei informieren und kommunizieren) setzt sich für Barrierefreiheit im Internet ein. Der von ihr entwickelte und gepflegte BIK-BITV-Test ist das in Deutschland etablierte Testverfahren, um Webseiten auf Barrierefreiheit entsprechend der deutschen Verordnung BITV 2.0 zu überprüfen.
Öffentliche Einrichtungen sind dazu verpflichtet, ihre Webseiten barrierefrei zu gestalten; ebenso verlangen öffentliche Mittelgeber von ihren geförderten Mittelempfängern eine barrierefreie Umsetzung ihrer Webauftritte und -angebote. Die Umsetzung der Anforderungen auf Barierefreiheit wird durch den BIK-BITV-Test geprüft. Ein offizielles Ergebnis kann nur durch zugelassene Sachverständige ermittelt werden.
Ein Verzeichnis informiert über die aktuellen 92 Prüfschritte. Mit Hilfe der BITV-Selbstbewertung können die Prüfschritte des offiziellen Tests auch eigenhändig und informell abgearbeitet werden, um den Stand der Barrierefreiheit eines Webauftritts zu evaluieren und Schwachstellen zu identifizieren; diese Selbstbewertung ersetzt jedoch nicht die Prüfung durch eine unabhängige Sachverständige.
BIK listet eine Auswahl an Webseiten, die auf BITV-Konformität überprüft wurden, und stellt deren Prüfberichte zur Verfügung: Einerseits gibt es eine Positivliste barrierefreier Webseiten, die BITV-konform sind. Andererseits liefert die Liste aller Tests auch solche Webseiten und Prüfergebnisse, die nicht konform sind. Damit eine Webseite als BITV-konform gilt, müssen alle anwendbaren Prüfschritte mit "eher erfüllt" oder besser bewertet sein.
Anbieter geprüfter Webseiten können sich freiwillig für die Aufnahme ihrer Testergebnisses in diese Listen entscheiden; die Prüfberichte nicht konformer Webseiten belegen, dass Sachverständige präzise und kritisch prüfen und dass auch unbedarfte "Kleinigkeiten" und "Fehlerchen" zur Bewertung eines einzelnen Prüfschrittes mit "teilweise erfüllt" oder schlechter führen – was sofort zum Gesamtergebnis nicht konform leitet.
Mit Hilfe der BITV-Selbstbewertung können alle Prüfschritte des BIK-BITV-Tests selbstständig abgearbeitet werden. Jeder Prüfschritt wird mit Positiv-Negativ-Beispielen, Motivationen und Begründungen erklärt.
Der ursprüngliche Seitenquelltext (Ausgangsform) kann über den W3C Markup Validation Service validiert werden. Dieser Dienst identifiziert neben grundsätzlichen HTML-Syntaxfehlern auch solche mit Bezug auf Barrierefreiheit.
Der Seitenquelltext kann dem Markup Validation Service über URL-Angabe ("Validate by URI") oder Quelltext-Copy-Paste ("Validate by Direct Input") übergeben werden. Die URL-Angabe ist für die Überprüfung von extern (anonym/publik) erreichbaren Webseiten geeignet; mithilfe des Quelltext-Copy-Paste-Verfahrens können zusätzlich Webseiten getestet werden, die nicht extern erreichbar sind – beispielsweise Intranet-Webseiten und Webseiten, die von Staging-Servern und Entwickler-Computern ausgeliefert werden.
Bei vielen Webseiten verändert sich der Seitenaufbau während des Seitenbesuchs. Solche dynamischen Änderungen des DOM können durch unterschiedliche Weise entsehen: Interaktive Elemente (beispielsweise einem Karussell), das dynamische Nachladen von Inhalten (beispielsweise für Infinte Scroll) und Single-Page-Webanwendungen (React, Angular, Vue.js) sind Beispiele für Auslöser dynamischer Seitenänderungen.
Diese Änderungen haben ebenfalls darauf Einfluss, wie assistive Technologien den aktuellen Webseitenzustand interpretieren und somit an Benutzer weitergeben. Daher sollten zusätzlich zur Seitenquelltext-Validierung der Ausgangsform auch Validierungen des aktuellen Zustandes des DOM vorgenommen werden, um mögliche Probleme der Barrierefreiheit auf dynamischen Webseiten identifizieren zu können.
Die About-Seite des W3C Markup Validation Services bietet das Bookmarklet Check serialized DOM of current page an. Beim Ausführen dieses Bookmarklets auf einer Webseite wird der HTML-Quelltext des aktuellen Seitenaufbaus überprüft. Geeignete Momente für die Validierung des aktuellen Seitenzustandes sind: der Abschluss des initialen Seitenaufbaus (nachdem alle Komponenten/Widgets initialisiert sind), der Abschluss von Seitennavigationen in Single-Page-Webanwendungen sowie Zustandsänderungen von Widgets.
In NVDAs Lesemodus können durch Drücken von Sprungtasten (Strg+↓, d, f, g, h, i, 1, 2, 3, 4, 5, 6, k, q, etc.) die entsprechenden Objekttypen angesprungen werden. Das Screenreader-Navigations-Verhalten entspricht dem beabsichtigten Seitenaufbau.
Beispielsweise soll beim Drücken der Taste t die erste Zelle der nächsten Tabelle angesprungen werden: "Richtige" Tabellen – Inhaltselemente, die Daten in tabellarischer Form darstellen – sollen nicht übersprungen werden; hingegen sollen Inhaltselemente ohne tabellarische Funktion nicht angesprungen werden: das HTML-Element <table> darf nicht für Layoutzwecke zweckentfremdet werden.
Die Navigation im Lesemodus soll der logischen Seitenreihenfolge entsprechen.
Die Tabreihenfolge ist konsistent: Beim Drücken der Tabulatortaste werden fokussierbare in logischer Seitenreihenfolge angesprungen.
Das aktuell fokussierte Element wird visuell hervorgehoben (z.B. durch einen Fokusring). Die Darstellung des fokussierten Zustandes ist über alle Elemente und Elementtypen einheitlich und wiedererkennbar (zum Beispiel durch einheitliche Farbgebung ("immer orange") oder einheitliche Formgebung ("immer gestrichelte Umrandung")).
Es dürfen keine Tab-Fallen existieren: Es ist immer möglich, durch mehrfaches Drücken der Tabulatortaste die gesamte Webseite von oben bis unten durchzutabben, und man gelangt (nach zwischenzeitlichem Verlassen des Seitenkontexts durch Fokussierung auf Browser-Steuerelemente) wieder zum ersten fokussierbaren Element am Seitenanfang.
Tab-Durststrecken sollten vermieden werden: Seitenbereiche außerhalb des primären Seiteninhaltes und Widgets sollten nicht zu viele antabbare Elemente auf einmal anbieten. Über dynamische Änderungen kann die Antabbarkeit eines HTML-Elementes beeinflusst werden: Änderungen mancher HTML-Attribute eines Elementes (oder seiner übergeordneten Elemente) beinflussen die Antabbarkeit, zum Beispiel die Attribute hiddendisabled<dialog open><details open>tabindex="-1"
Ganz zu Beginn des Seitendokuments existieren Skip-Links, über welche die relevantesten Seitenbereiche angesprungen werden können (z.B. Suchschlitz, Navigationsmenü, Hauptinhalt, Fußzeile, Sprachwechsel). Skip-Links sind normalerweise visuell versteckt und erscheinen nur für Screenreader oder bei explizitem Fokussieren.
Screenreader bieten zwar bereits weit mächtigere Navigationsmöglichkeiten an; Skip-Links dienen aber als Fallback-Lösung, wenn Benutzer*innen keine assistive Bedienungstechnologien zur Verfügung stehen, beispielsweise bei der Benutzung eines öffentlichen oder fremden Computes (Bekannte, Freunde, Arbeitskollegen).
Formulierungen wie z.B. "in der linken Spalte...", "über Drücken des grünen Knopfes..." müssen vermieden werden: Angaben zu Farben und räumlicher Anordnung ergeben bei der Bedienung und Erschließung einer Webseite mit Screenreadren keinen Sinn (siehe BITV-Prüfschritte 9.1.3.3 und 9.1.4.1).
hier|here|link|left|recht|right|obe|above|up|unte|low|down|breit|broad|rund|round|schmal|narrow|weiß|white|schwarz|black|rot|red|gelb|yellow|grün|green|blau|blueBilder auf Webseiten lassen sich in zwei Kategorien aufteilen: Inhaltsrelevante Bilder und dekorative Bilder.
Inhaltsrelevante Bilder sind solche Bilder, die für das Verständnis des Seiteninhaltes relevant sind; ohne sie und ohne das, was sie ausdrücken, würde dem beabsichtigten Seiteninhalt etwas fehlen.
Ein Beispiel für ein inhaltsrelevantes Bild: Ein Kühlschrank-Hersteller bietet eine Online-Bedienungsanleitung für seinen Kühlschrank zur Verfügung. Im Wartungskapitel wird auf die Eisfach-Enteisung eingegangen. Eine Grafik erklärt die dafür notwendigen Arbeitsschritte. Sie ist daher inhaltsrelevant. Also muss eine zusätzliche, vollständige, textuelle Beschreibung der notwendigen Arbeitsschritte angeboten werden, um barrierefreien Ansprüchen zu genügen. Andernfalls könnten sich Sehbehinderte nicht über diese Wartungsarbeit informieren.
Dekorative Bilder (auch Schmuckbilder genannt; Layoutgrafiken zählen auch dazu) sind solche Bilder, die für das Verständnis des Seiteninhaltes irrelevant sind. Die Entfernung von dekorativen Bildern hat keinen Einfluss auf das Verstädnis einer Webseite – ohne sie ist eine Webseite genauso gut verständlich und bedienbar wie mit ihnen.
Ein Beispiel für ein dekoratives Bild: Das Foto des Kölner Dom-Vorplatzes im Banner-Hintergrund der GESIS-Web-Homepage ist ein dekoratives Bild. Es erfüllt lediglich einen ästhetischen Zweck ohne Funktion auf den Seiteninhalt.
Um Bilder barrierefrei umzusetzen, müssen sie im HTML-Quelltext korrekt ausgezeichnet werden. Dabei ist auch der Kontext für die Verwendung des Bildes relevant. Die W3C bietet dazu einen Entscheidungsbaum; Penn States Beispiele und WebAIMs Beispiele bieten weitere Orientierungshilfe anhand verschiedener Szenarien.
Grob zusammengefasst:
<img src="cat.jpg" alt="Schlafende graue Katze auf einer Wiese" />alt-Attribut und vollständige Beschreibung über begleitende HTML-Elemente: <img src="cat.jpg" alt="" /><span>Katzen sind Raubtiere. [...] Sie schlafen auf Wiesen häufig in eingerollter Form. [...]</span><img>-Element: leeres alt-Attribut: <img src="shaking-hands.jpg" alt="" /><span>Wir sind Ihr Partner für Erfolg</span><div style="background-image: url(shaking-hands.jpg);"><span>Wir sind Ihr Partner für Erfolg</span></div>