ARIA-Serie Teil 1: Wie machen Screen Reader Webseiten für Blinde zugänglich?

Hinweis: Dies ist der erste Teil einer Artikelserie zu ARIA. Weitere Teile folgen. Dieser Teil sollte für vollständige Laien verständlich sein; Vorkenntnisse in der Programmierung sind nicht erforderlich. Falls dies nicht der Fall ist, so hinterlasse einen Kommentar mit Verbesserungsvorschlägen.

Was ist ein Screen Reader?

Ein Screen Reader, also “Bildschirmleser”, ist ein Programm, welches Computer, Smartphones, Tablets etc. für Blinde und Sehbehinderte nutzbar macht. Im Wesentlichen hat er dabei drei Aufgaben:

• Den Fokus auf ein einzelnes Element auf dem Bildschirm legen,
• Alle verfügbaren Informationen über dieses Element an den Nutzer weitergeben,
• Den Fokus den Kommandos enssrechend weiter bewegen (also Navigation ermöglichen.)

In der Realität ist es natürlich wesentlich komplexer. Da wäre zunächst die Frage, welche Art von Ausgabe der Nutzer überhaupt verarbeiten kann. Sehbehinderte brauchen beispielsweise evtl. vergrößerte Schrift, Blinde nicht. Taubblinde müssen auf Braillezeilen zurückgreifen, Blinde nutzen hauptsächlich die Sprachausgabe. Und jede dieser Ausgabeformen hat unterschiedliche Besonderheiten. Das Grundprinzip bleibt jedoch identisch: Ein Element auf dem Bildschirm wird fokussiert, sämtliche Informationen über dieses Element werden der Ausgabefunktion entsprechend zn dem Benutzer weitergereicht, und wenn der Benutzer dies wünscht, wird der Fokus weiter bewegt. Damit dies funktionieren kann, müssen jedoch in der Regel sämtliche Elemente aufgelistet werden. Oftmals folgt der Screen Reader also gar nicht der visuellen Anordnung von Elementen (dies wäre für Blinde oftmals unlogisch), sondern einer linearen, listenartigen Darstellung.

Und wie funktioniert das auf Webseiten?

O.g. System lässt sich insbesondere bei Webseiten sehr schön erklären. Eine Webseite – egal in welcher Form – ist zunächst einmal nichts als ein sehr, sehr langer Text. Alles – von dem eigentlichen Text über HTML-Tags bis hin zu CSS-Layoutangaben und JavaScript-Funktionen – wird zunächst als Text gespeichert. Erst im Browser passiert die eigentliche Magie – einzelne Textteile werden auf eine bestimmte Art und Weise angeordnet, bekommen Farbe und Formen; andere werden plötzlich klickbar, oder durch ein Bild ersetzt, etc. Dadurch, dass die Basis jedoch Text ist – genauer: XML – kann der Screen Reader die Webseite in ein für Menschen mit Sehbehinderung passenderes Format umwandeln.

Was ist XML?

XML steht für Extensible Markup Language und wird heutzutage sehr vielseitig eingesetzt. Es ist eine einfache Möglichkeit, komplexe Datenstrukturen aufzuschlüsseln. Deshalb wird XML – oder Versionen von XML – für das Abspeichern von Programmeinstellungen, die Basis von Webseiten oder das Erstellen von grafischen Nutzeroberflächen für Apps verwendet. Für Screen Reader ist dieses Format gut geeignet, da es im Prinzip die darzustellende Webseite bereits in ein Nur-Text-Format aufschlüsselt, gleichzeitig aber die einzelnen Zusammenhänge der Webseite bestehen bleiben. Hier ist ein vereinfachtes XML-Beispiel für eine Webseitenstruktur:


<Seite>
  <Titel>Webseiten-Titel</Titel>
  <Überschrift Ebene 1>Dies ist natürlich <fett>keine</fett> echte Webseitenstruktur</Überschrift Ebene 1>
  <Paragraph farbe="blau">
    Dies hier dient lediglich zur Demonstration, wie eine Webseite hinter den Kulissen ungefähr aussehen würde.
    <Zeilenumbruch/>
    Ich zeige hier lediglich, welche Arten von Elementen es gibt.
  </Paragraph>>
</Seite>

Es gibt also im Wesentlichen Elemente mit einem öffnenden und einem schließenden Tag, sowie Inline-Elemente, die sich nur über eine Zeile erstrecken und keinen schließenden Tag brauchen. Auch können einzelne Elemente andere Elemente umschließen, und sie können Attribute haben, wie Farbe etc.

Das ist ja schön und gut. Aber wie hilft dies einem Screen Reader?

Wir erinnern uns an die Aufgaben eines Screen Readers: Damit dieser ein einzelnes Element fokussieren kann, muss der Screen Reader wissen, von wo bis wo dieses Element geht, welche untergeordneten Elemente es gibt, und welche Elemente übergeordnet sind. Um sämtliche Informationen über das Element weiterreichen zu können, muss der Screen Reader ermitteln können, welche Eigenschaften das Element hat (Paragraph, Link, Bild…), ob es gegebenenfalls besondere Attribute zur Darstellung gibt, o.Ä. Um eine korrekte Navigation zu gewährleisten, muss der Screen Reader wissen, was das nächste (oder gewünschte) Element ist, und wo es sich in der Hierarchie des Dokuments befindet. All dies ist dank der XML-Struktur möglich.

Wie genau machen verschiedene Screen Reader Webseiten für Blinde/Sehbehinderte nutzbar?

Dies hängt tatsächlich stark vom screen Reader ab. JAWS und NVDA erstellen auf Basis des XMLs ein virtuelles Dokument – d.h. man kann die Webseite navigieren, wie man es mit einer Textdatei oder einem Word-Dokument tun würde (beispielsweise kann man mit den Pfeiltasten scrollen). Dabei bewegt man sich mit einem virtuellen Cursor. Dies bedeutet, dass man nicht den tatsächlichen Computercursor bewegt, sondern JAWS bzw. NVDA erstellt einen eigenen Fokus, den man zur Navigation verwenden kann. Möchte man nun mit einem Element interagieren – beispielsweise Text in ein Textfeld eingeben – muss deshalb erst der Formularmodus aktiviert werden. Im Formularmodus hört man auf, mit dem virtuellen Dokument zu interagieren, und greift auf die tatsächlichen Elemente zu.
Apples VoiceOver handhabt die Situation etwas anders. Auf Basis der XML-Grundlage der Webseite wird eine Liste von Objekten erstellt. Hierbei folgt VoiceOver, ebenso wie JAWS und NVDA, der logischen Struktur der Seite (sprich, dem XML-Aufbau), nicht dem visuellen Aufbau. Anders als bei JAWS und NVDA wird aber kein virtuelles Dokument erzeugt – stattdessen wird die Webseite so gut es geht in eine Liste von Objekten umgewandelt, wie man sie auch von der restlichen Benutzeroberfläche von Mac, iPhone, iPad etc. her kennt. Das hat den Vorteil, dass der Nutzer direkt mit Textfeldern u.Ä. interagieren kann, ohne erst den Formularmodus aktivieren zu müssen.

Rückblick

Nach der Lektüre dieses Artikels solltest du in der Lage sein…

• zu verstehen, was ein Screen Reader ist,
• die Grundanforderungen an einen Screen Reader zu erklären,
• die Art und Weise, wie Screen Reader Webseiten barrierefrei machen können, zu erläutern.

Ausblick

Im nächsten Artikel gehen wir noch mal genauer auf die Anforderungen für Barrierefreiheit im World Wide Web ein. Daraus lässt sich nämlich ableiten, welche Fähigkeiten ARIA besitzen muss.