Zweiter Blick: JAWS Screen Reader

BarrierefreiheitDarstellungsoptionen



JAWS - Der meistverbreitete Screen Reader

JAWS Entwicklerseite

Bedeutung von JAWS für das barrierefreie Webdesign

JAWS (Job Access With Speech) ist international einer der meist verwendeten Screen Reader und im deutschsprachigen Raum als solcher der Platzhirsch für Windows Desktop Anwendungen. Entsprechend relevant ist JAWS etwa für folgende Bereiche:

  • Kenntnis von Grundfunktionalitäten für die Wahrnehmung und Navigation von Webseiten mittels JAWS.
  • Prüfung der Usability von technischen Lösungen komplexerer Webtechnologien bei der Verwendung von JAWS.
  • Prüfung der Umsetzung von Spezifikationen in JAWS und Rückmeldung von Problembereichen.
JAWS Entwicklerseite

Basisinformationen zum Konzept von JAWS

JAWS-Taste

Screen Reader müssen überwiegend Tastaturbefehle anbieten, um Navigation und Bedienung zu gewährleisten. Da jedoch schon Windows und Anwendungsprogramme Tastaturbefehle mit den üblichen Funktionstasten SHIFT, STRG und Alt zur Verfügung stellen, hat sich die Entwicklungsfirma von JAWS eine eigene ungewohnte Funktionstaste ausgedacht, die JAWS-Taste.

Als JAWS-Taste fungieren:

  • 0 (NULL auf der numerischen Tastatur) oder
  • EINFÜGEN am Laptop.

Erkunden einer Webseite mit JAWS

Wer eine Webseite visuell wahrnehmen kann, erhält rasch einen Überblick über verfügbare Inhalte, kann Seitenregionen identifizieren oder von Überschrift zu Überschrift springen.

Damit bei der Nutzung von Screen Readern Strukturen wahrgenommen und ein diagonales Lesen ermöglicht werden, ist zunächst ein adäquates semantisches Markup vorausgesetzt. Screen Reader bieten dann Funktionalitäten, gezielt zu erkunden und zwischen semantischen Elementen zu navigieren.

JAWS bietet umfangreiche Möglichkeiten, gezielt Elemente eines bestimmten Typs von einer Webseite in einem eigenen Dialogfeld aufzulisten. Wer diese Funktionalität im Webdesign zum Test oder zur Prüfung einsetzen möchte, findet alle verfügbaren Elementtypen bei der Suche nach Virtuellen HTML Funktionen. Es genügt also, sich den entsprechenden Shortcut zu merken.

JAWS Tastenbefehle zur Erkundung einer Webseite
Befehl Shortcut
Virtuelle HTML Funktionen (Grafiken, …) auflisten JAWS-Taste + F3
Formularfelder auflisten JAWS-Taste + F5
Überschriften auflisten JAWS-Taste + F6
Links auflisten JAWS-Taste + F7
Rahmen auflisten JAWS-Taste + F9
Auswahlschalterauflisten JAWS-Taste + STRG + A
Buttons (Schalter) auflisten JAWS-Taste + STRG + B
Ausklapplisten auflisten JAWS-Taste + STRG + C
Eingabefelder auflisten JAWS-Taste + STRG + E
Listen auflisten JAWS-Taste + STRG + L
(HTML5) Regionen auflisten JAWS-Taste + STRG + R
Tabellen auflisten JAWS-Taste + STRG + T
Kontrollfelder auflisten JAWS-Taste + STRG + X
Abschnitte (DIV-Bereiche) auflisten JAWS-Taste + STRG + Z
JAWS Entwicklerseite

Funktionalitäten für das Webdesign

Bedeutung eines Grundverständnisses

Ein Screen Reader liest nicht nur Texte vor, er liefert auch die nötigen semantischen Informationen über die Art und gegebenenfalls Zustand eines Elements.

Darüber hinaus bietet JAWS Möglichkeiten, Elementtypen herauszufiltern oder gar Seitenbereiche auszublenden. Ein Grundverständnis dieser Funktionalitäten ist im Webdesign bei der Entwicklung und beim Test komplexer Komponenten zweckmäßig.

JAWS Shortcuts für das Webdesign

Screen Reader werden von Menschen genutzt, die auf die Tastatur angewiesen sind. Folgerichtig wird bei der Entwicklung von Screen Readern viel Wert auf die Verfügbarkeit von Tastaturbefehlen gelegt. Im folgenden Bereich sammle ich die Shortcuts, die mir bei der Entwicklung barrierefreier Webseiten hilfreich scheinen, also für Menschen, die meist nicht auf Screen Reader angewiesen sind.

Zu beachten ist, dass Screen Reader nur Objekte aus dem DOM anzeigen, also Elemente von Slidern, Akkordeons oder Tabs auf einer Webseite möglicherweise nicht aufgelistet werden.

JAWS Tastenbefehle für das Webdesign
Befehl Shortcut Anmerkungen
Sprachhistorie anzeigen
(Was hat die Sprachausgabe zuletzt gesagt?)
JAWS-Taste + Leertaste, H Falls die Sprachausgabe einmal unverständlich war ...
Element-Informationen anzeigen JAWS-Taste + Shift + F1 Semantik und Attribute des Elements unter dem virtuellen Cursor und seiner Elternelemente
Virtuelle HTML Funktionen auflisten JAWS-Taste + F3 Alle suchbaren Typen im Überblick
Formularfelder auflisten JAWS-Taste + F5 Hilfreich zum Prüfen von Beschriftungen
Überschriften auflisten JAWS-Taste + F6 Hilfreich zum Prüfen von Texting und Struktur
Links auflisten JAWS-Taste + F7 Hilfreich beim Prüfen des Texting (mehr, …)

Beispiel: Prüfung der Alternativtexte

Was macht JAWS mit Bildern auf der Webseite? Die Antwort lässt sich unter den Virtuellen HTML Funktionen finden:

  1. Drücken Sie JAWS-Taste + F3, um alle verfügbaren virtuellen HTML-Funktionen anzuzeigen.
  2. Drücken Sie G, um die Grafiken aufzulisten. (Ich finde das Wording Grafiken für Bilder nicht adäquat, aber damit müssen wir uns abfinden.)

Achtung: Bei diesen Verfahren werden nur die Alternativtexte dargestellt, die für den Screen Reader gerade wahrnehmbar sind. Elemente, die technisch gerade ausgeblendet sind (in Akkordeons, Slidern, ...) werden durch dieses Verfahren nicht erfasst.

Nun können Sie prüfen, ob die aktuell von JAWS erfassten Bilder auf der Webseite über angemessene Alternativtexte verfügen:

  • Bei Bildern ohne ALT-Attribut wird in der Standardkonfiguration der Name der Bilddatei eingeblendet. Hier gehört also noch ein Alternativtext angegeben.
  • Bei Bildern mit ALT-Attribut wird der Alternativtext eingeblendet. Hier können Sie schon mangelhafte Alternativtexte entdecken.

Was auf diese Weise nicht geprüft werden kann, ist ob Bilder widersinnig mit leerem ALT-Attribut versehen wurden.

Braillebetrachter

Um am Bildschirm zu sehen, was gerade auf der Braillezeile angezeigt werden könnte, kann der JAWS Braillebetrachter verwendet werden. Er gibt wieder, was gerade auf der Braillezeile angezeigt wird oder simuliert, was gerade auf einer Braillezeile mit 40 Braillemodulen angezeigt würde.

Der Braillebetrachter kann leider nicht über eine Kurztaste eingeblendet werden. Das Programm muss über das Windows Startmenü folgendermaßen gestartet werden:

  1. Startmenü öffnen (WINDOWSTASTE oder Mausklick links unten)
  2. Alle Programme wählen
  3. Aktuelle JAWS Version wählen.
  4. Braillebetrachter wählen.

Tipp:: Suchen Sie im Windows Startmenü nach BViewer.exe, um eine Desktopverknüpfung zum Braillebetrachter herzustellen.

Am oberen Bildschirmrand erscheint nun die Braillezeile – Simulation. Darunter befinden sich noch Informationen zu Darstellungsmöglichkeiten auf einer Braillezeile.

JAWS Entwicklerseite

Funktionalitäten für die optimierte Nutzung

Bedeutung von Features und Funktionalitäten

Bei der Nutzung eines Screen Readers wird gewöhnlich nur die Tastatur eingesetzt. Die Navigation auf einem Webauftritt und die Bedienung von Elementen muss daher vom Screen Reader für die Tastaturbedienung optimiert werden.

Menschen, die auf Screen Reader angewiesen sind, erhalten eine lineare Wahrnehmung und keine flächige, wie sie beim Blick auf einen Bildschirm möglich ist. Überschriften oder Listen müssen als solche semantisch gekennzeichnet sein. Darüber hinaus müssen Relationen zwischen Seitenbereichen, wie Kopf- und Fußbereich, Hauptinhalt und ergänzende Informationen technisch für Screen Reader wahrnehmbar sein und von diesem verfügbar gemacht werden.

Kurztasten zur schnelleren Navigation

JAWS bietet, wie andere Screen Reader auch, zahlreiche Möglichkeiten, Seitenelemente durch einen einfachen Tastenklick anzuspringen. Dies erhöht die Effizienz des Lesens und Bedienens einer Webseite. So lässt sich der Virtuelle Cursor mit einem Klick auf H zur nächsten Überschrift bewegen und Ähnliches.

Für das Webdesign genügt es, über diese Möglichkeiten bei der Bedienung Bescheid zu wissen und auf eine sorgfältige semantische Verwendung von HTML Elementen zu achten.

Um jeweils zum vorherigen Element eines bestimmten Typs zu springen, wird gleichzeitig die SHIFT – Taste gedrückt. Mit SHIFT + H kommt man beispielsweise zur vorherigen Überschrift, also in der Regel zur Überschrift des aktuellen Abschnitts.

JAWS Kurztasten zur Seitennavigation
Seitenelement Taste
Abschnitt Z
Anklickbares Element - (Bindestrich)
Ausklappliste C
Auswahlschalter A
Besuchter Link V
Eingabefeld E
Element gleichen Typs S
Element unterschiedlichen Typs D
Formularfeld F
Liste L
Listeneintrag I
Kontrollfeld X
Rahmen M
Region (HTML5) R
Schalter B
Tabelle T
Text ohne Link N
Überschrift H
Überschrift der Ebene # 1 bis 6

Tabellen mit JAWS erarbeiten

Screen Reader stellen eine lineare Wahrnehmung von Inhalten zur Verfügung. Entsprechend mühsam und komplex ist es, wenn mit einem Screen Reader ein flächiges Element, wie eine Tabelle zu erarbeiten ist. Einige der wichtigsten Tastaturbefehle für Tabellen sind hier zusammengefasst:

JAWS Tastaturbefehle für Tabellen (Auswahl)
Befehl Shortcut
Springe zur nächsten Tabelle: T
Navigiere zur Nachbarzelle: AltGr + Pfeiltaste (, , , )
Lies aktuelle Zelle vor: AltGr + Num5
Springe zur ersten Zelle der Tabelle: AltGr + Pos1
Springe zur ersten Zelle der Spalte: AltGr + Shift +
Springe zur ersten Zelle der Zeile: AltGr + Shift +
Aktuelle Zeile lesen: Alt + Windows + Num5
Lies aktuelle Spaltenüberschrift: ?
Derzeit wird der Fokus beim Befehl für das Lesen der ersten Zelle der Spalte auch gleich dorthin verschoben.
Einen gesonderten Befehl zum alleinigen Vorlesen der Spaltenüberschrift habe ich in der Hilfe nicht gefunden. Bin gespannt auf Reaktionen der Entwickler.

Flexible Web – Seitenbereiche verstecken

JAWS bietet die Möglichkeit, Bereiche einer Seite für die Ausgabe an Sprachausgabe oder Braillezeile zu verbergen. So können häufig besuchte Seiten auf wesentliche Startpunkte fokussiert und unrelevante Bereiche individuell ausgeblendet werden. Allerdings sind für diese Funktionalitäten Basiskenntnisse über HTML-Elemente und deren Attribute und andere Webtechnologien, wie WAI-ARIA erforderlich.

Diese Funktionalitäten können mit folgendem Tastaturbefehl festgelegt werden:

JAWS Tastenbefehle für Flexible Web
Befehl Shortcuts
Flexible Web Dialog aufrufen JAWS-Taste + Leertaste, X
JAWS Entwicklerseite

JAWS und CSS

Bedeutung des Umgangs von JAWS mit CSS-Anweisungen

Screen Reader interessieren sich eigentlich nicht für das grafische Erscheinungsbild von HTML-Elementen. Entscheidend ist die semantische Funktion des Elements als Überschrift, Absatz, Listenelement oder Ähnlichem. Trotzdem ignoriert JAWS CSS Anweisungen nicht gänzlich, wie ich durch Zufall entdeckte:

Mit den CSS Anweisungen ::before und ::after lassen sich Zeichenketten oder auch Bilder vor oder hinter ein Element einblenden. JAWS erkennt diese Zeichen – vermittelt durch den Browser – unter Umständen und gibt sie an die Sprachausgabe weiter.

Beispiel before

Mit folgender CSS Anweisung soll vor den Link ein nach unten zeigendes Dreieck eingeblendet werden:

a.darr::before { content: "▼ " }

Der HTML-Code kann etwa so aussehen:

<a class="darr" href="infos.html" >Irgendwas</a>

JAWS liest in meinem Mozilla Firefox 44 vor: Schwarzes nach unten zeigendes Dreieck. Im Internet Explorer 11 wird das Zeichen hingegen ignoriert. Offensichtlich werden diese CSS Anweisungen in den beiden Browsern unterschiedlich gerendert.

Hier können Sie das Verhalten eines Screen Readers im Browser Testen:

Testlink für CSS Klasse ::before

Beobachtungen

  • Beim Auflisten der Links mit JAWSTASTE + F7 im Firefox wird das Zeichen zwar nicht visuell angezeigt, jedoch können die unterschiedlichen Anfangsbuchstaben nicht zum Annavigieren verwendet werden. Im IE jedoch schon.

Fazit

Es könnten die CSS-Anweisungen ::before und ::after durchaus Probleme bei der Barrierefreiheit verursachen.