In diesem Artikel erfahren Sie:
- Wie Sie Websites mit NVDA so navigieren wie Screenreader-Nutzer:innen
- Welche NVDA-Kurzbefehle wichtig sind, um effizienter und sicherer zu testen
- Wie die Navigation mit einem Screenreader versteckte Barrierefreiheitsprobleme aufdeckt
In einem kürzlich veröffentlichten Artikel erklärte Cody Care, Accessibility Engineer bei EBSCO Information Services, was ein Screenreader ist und weshalb dieses Tool unverzichtbar ist. In diesem Artikel geht er einen Schritt weiter: Wir lernen von ihm, mit NVDA (NonVisual Desktop Access – ein kostenfreier Open-Source-Screenreader für Windows) effektiv zu navigieren.
Egal, ob Sie aktiv Barrierefreiheitstests durchführen oder besser verstehen möchten, wie blinde Nutzer:innen digitale Inhalte erleben – dieser Leitfaden bietet praktische Einblicke in die Tastenkombinationen, die eine effiziente Navigation ermöglichen.
Weshalb Navigation wichtig ist
Screenreader lesen nicht nur Texte vor, sondern bieten auch eine strukturierte Möglichkeit, durch Inhalte zu navigieren. Während sehende Nutzer:innen eine Seite in wenigen Sekunden visuell erfassen, navigieren Screenreader-Nutzer:innen gezielt und linear, Element für Element, Schritt für Schritt mit Hilfe von Tastaturbefehlen.
Für Barrierefreiheitstests ist das Verständnis dieses Prozesses unerlässlich. Wenn die Navigation ineffizient, verwirrend oder unstrukturiert ist, entstehen häufig Zugänglichkeitsprobleme.
Die Screenreader-Perspektive
Das Web ist riesig, fast unendlich, und für blinde Nutzer:innen geht es nicht darum, alles auf einmal zu sehen, sondern die Struktur, die die Entwickler:innen geschaffen haben, Schritt für Schritt zu erkunden.
Ich vergleiche jede umfassende Website mit einem Stadtviertel und jede einzelne Webseite mit einem Haus. Jedes Haus ist anders gebaut und eingerichtet, aber die Grundlage ist dieselbe: Räume, Abschnitte und die Elemente darin.
Landmarks: Die Zimmer in einem Haus
Eine Webseite kann einen Header, einen Navigationsbereich, einen Hauptinhaltsbereich und eine Fußzeile enthalten. Diese „Landmarks“ (Seitenbereiche) strukturieren die Seite und helfen mir zu verstehen, wo ich bin.
Das Navigieren zwischen „Landmarks“ mit der D-Taste fühlt sich an, wie vom Flur ins Wohnzimmer und dann in die Küche zu gehen. Selbst wenn ich noch nie „in“ diesem Haus war, kann ich mich schnell orientieren, indem ich die wichtigsten Bereiche durchlaufe.
Überschriften: Die Möbel in jedem Zimmer
Wenn ich einmal in einem „Zimmer“ bin, möchte ich wissen, was dort zu finden ist. Überschriften („Headings“) dienen als wichtigste Orientierungspunkte, vergleichbar mit Möbeln wie Sofa, Schreibtisch oder Fernseher. Sie zeigen an, worum es in einem Abschnitt geht.
Mit der H-Taste kann ich zwischen Abschnitten springen und entscheiden, worauf ich meine Aufmerksamkeit richte. Mit den Zifferntasten 1–6 navigiere ich auf Überschriftenebene und prüfe, ob die Inhalte logisch aufgebaut sind.
Interaktive Elemente: Dinge, die man nutzen kann
Links, Buttons, Checkboxen und Eingabefelder sind Elemente, mit denen Sie interagieren können, vergleichbar mit Griffen, Schaltern und Schubladen in einem Haus. Sie ermöglichen es mir, zu öffnen, abzusenden, zu erkunden oder zu tippen.
NVDA bietet Kurzbefehle, um direkt zu diesen Elementen zu navigieren. Wenn diese korrekt programmiert sind, fühlt sich die Navigation effizient und vorhersehbar an. Ist das nicht der Fall, wird die Erfahrung schnell frustrierend – wie das Navigieren im Dunkeln durch einen unbekannten Raum, dessen Boden mit LEGO-Steinen bedeckt ist.
Das Verständnis dafür, wie Nutzer:innen sich durch das „Haus“ bewegen, hilft dabei, digitale Umgebungen nutzbarer und zugänglicher zu gestalten.
Die grundlegende Navigation
Diese Tasten verwendet man, um durch Text und interaktive Elemente zu navigieren:
- Tab: Vorwärts durch interaktive Elemente navigieren (Buttons, Links, Menüs, Formularelemente)
- Shift + Tab: Rückwärts durch interaktive Elemente navigieren
- Pfeil nach oben/unten: Zeile für Zeile navigieren
- Pfeil nach links/rechts: Zeichen für Zeichen navigieren, einschließlich Satzzeichen und Leerzeichen
- Strg + Pfeil links/rechts: Wort für Wort navigieren
- Strg + Pfeil oben/unten: Absatz für Absatz navigieren
Die Navigation mit Buchstabentasten
Jedes Element auf einer Webseite hat eine Rolle, die NVDA erkennt und ansagt. Sie können auch direkt zu diesen Rollen navigieren. Diese Kurzbefehle machen Barrierefreiheitstests deutlich effizienter.
- Shift + [Taste]: Rückwärts navigieren zum jeweiligen Element
- E: Eingabefelder
- R: Optionsfelder
- T: Tabellen
- D: „Landmarks“ / Bereiche
- F: Formularelemente
- G: Grafiken/Bilder
- H: Überschriften (Headings)
- 1–6: Überschriften nach Ebene
- K: Links
- U: Nicht besuchte Links
- V: Besuchte Links
- L: Listen
- I: Listenelemente
- X: Checkboxen
- C: Auswahllisten
- B: Buttons
Hilfreiche Befehle
- NVDA-Taste + 1: Aktiviert den Eingabehilfemodus, um Kurzbefehle zu üben (erneut drücken, um zu beenden)
- NVDA-Taste + N: Öffnet das NVDA-Menü
- NVDA-Taste + Tab: Ansage des aktuell fokussierten Elements
- NVDA-Taste + F7: Öffnet die Elementliste, um Links, Überschriften, Formularelemente, Buttons und Landmarks an einem Ort zu durchsuchen
„Speech Viewer“
Möchten Sie lieber sehen, was NVDA ansagt, statt es zu hören, können Sie den „Speech Viewer“ einschalten. Dieses Tool zeigt die Screenreader-Ausgabe als einfachen Text an, den Sie für Dokumentation oder Berichte kopieren können.
Aktivierung:
- NVDA-Menü → Tools → Speech Viewer
Kurzbefehle einstellen:
- NVDA-Menü → Einstellungen → Eingabegesten
- Filter auf „Speech Viewer“
- „Hinzufügen“ auswählen
- Empfohlene Kurzbefehle: NVDA-Taste + V (für alle Tastaturbelegungen)
Abschließende Bemerkungen
Navigations-Kurzbefehle sind nicht nur ein praktisches Hilfsmittel, sie sind essenziell für Unabhängigkeit und Effizienz. Bei Barrierefreiheitstests dienen sie zudem als Diagnose-Tools; die Reaktion einer Seite auf diese Befehle zeigt, wie gut sie strukturiert ist.
Wenn Sie diese Tastenkombinationen beherrschen, verbessern Sie nicht nur Ihr Testverfahren, sondern entwickeln auch ein tieferes Verständnis für inklusives Design und dessen Beitrag zu zugänglichen digitalen Erfahrungen für alle.
