Accessibility – Teil 3: Screenreader

von Patrick Durrer

    Das Wichtigste in Kürze

  • Hierarchie der Überschriften und Inhalte
    Für die optimale Navigation und Indexierung der Inhalte, sollten diese entsprechend hierarchisiert werden.
  • Aussagekräftige Überschriften
    Aussagekräftige Überschriften helfen allen Usern, den Inhalt einer Website einfacher zu «scannen».
  • Keine «hier klicken»-Links
    Links sollten Auskunft darüber geben, was bei einem Klick passiert.
  • Alternative Inhalte für nicht-text Inhalte
    Visuelle Inhalte sind nicht für jeden Benutzer zugänglich und sollten darum mit einem Text beschrieben werden.
  • Aussagekräftige Seitentitel
    Seitentitel helfen, sich bei mehreren Tabs zu orientieren und den Seiteninhalt abzuschätzen.
  • Nutze ARIAs
    ARIAs sind nützliche Ergänzungen zu HTML um den Inhalt besser zugänglich zu machen.

Was ist ein Screenreader?

Ein Screenreader ist eine unterstützende Technologie für blinde oder sehbeeinträchtigte Personen. Der Reader «liest» den Inhalt einer Website und gibt diesen als Audiosignal wieder (text-to-speech). Damit die Inhalte unserer Website richtig «gelesen» werden können, müssen diese Screenreadern möglichst gut zugänglich gemacht werden. Ein Beispiel wie ein Screenreader eine Website interpretiert, wird in diesem Video vom Smashing Magazine eindrücklich gezeigt.

Durch die Augen eines Screenreaders

Wie Deine eigene Website durch die Augen eines Screenreaders aussieht, kann mit einem Screenreader-Programm (NVDA u. v. m.), einer Browser-Extension (zum Beispiel ChromeVox Classic Extension für Google Chrome) oder den eingebauten Browserfunktionen (zum Beispiel vom Mozilla Firefox) getestet werden.

Einfache Techniken für die Verbesserung der Screenreader-Kompatibilität

1. Hierarchie der Überschriften und Inhalte

Einer der zentralen Punkte für eine möglichst optimale Lesbarkeit der Inhalte durch Screenreader ist der korrekte Einsatz von Überschriften (h1 bis h6). Der Inhalt kann so durch den Screenreader hierarchisiert und entsprechend wiedergegeben werden. Zudem ist es gängige Praxis, dass sich Nutzer von Screenreader zu Beginn des Seitenaufrufs alle Titel einer Seite vorlesen lassen, um sich eine Übersicht zu verschaffen.

2. Aussagekräftige Überschriften

Sowie normale Besucher unserer Website, nutzen auch Screenreader Überschriften um die Inhalte einer Website zu «scannen» (siehe Punkt 1). Umso aussagekräftiger die Überschriften sind, desto einfacher können sich also alle Besucher (normal sehende und sehbeeinträchtigte) auf unserer Website orientieren.

Dieser Punkt wird sowohl von SEO- als auch von Accessibility-Experten oft aufgeführt. So sind Links ohne Aussage über das Ziel («hier klicken», «hier», «herunterladen», «los geht's» etc.) weder optimal für Suchmaschinen noch für Screenreader. Anstelle dieser generischen Linktexte sollten aussagekräftig und beschreibende Texte für Links gewählt werden. Das Ziel ist es, dem User mitzuteilen was als Nächstes passiert, wenn dieser auf den entsprechenden Link klickt.

4. Alternative Inhalte für nicht-text Inhalte

Bilder und andere visuelle Inhalte (Videos, Grafiken etc.) können von Screenreader leider nicht interpretiert werden. An der Stelle können Screenreader jedoch alt-Attribute vorlesen, die beispielsweise für jedes Bild hinterlegt werden können:

<img src="bildvonkleinenkätzchen.jpg" alt="Kleine Kätzchen am Spielen.">

Als gratis Bonus werden die Bilder so auch einfacher interpretierbar und indexierbar für Suchmaschinen-Crawler. Bilder, die zum eigentlichen Inhalt nichts beitragen, sollten mit einem leeren Alt-Attribut versehen werden, damit der Screenreader diese bewusst auslässt.

5. Aussagekräftige Seitentitel

Hast Du gerade mehrere Tabs in Deinem Browser offen? Ich auch.

Gut sehende Menschen können die unterschiedlichen Websites einfach über das Favicon (Logo im Tab) identifizieren ‒ Menschen mit einer Sehbeeinträchtigung nur beschränkt. Entsprechend ist für diese Personen ein aussagekräftiger Seitentitel umso wichtiger. Dieser kann einfach über das <title>-Tag im HTML definiert werden. Dieser sollte den Inhalt der jeweiligen Seite beschreibend und prägnant umreisen.

6. Nutze ARIAs

ARIA steht für Accessible Rich Internet Applications. Dabei handelt es sich um ein Set von Attributen, die eine Möglichkeiten definieren, Inhalte im Internet und auch Applikationen (speziell JavaScript-Applikationen) für Personen mit Einschränkungen besser zugänglich machen. ARIAs werden als Ergänzung von normalen HTML-Tags genutzt und sollten nur eingesetzt werden, wenn es keine nativen HTML-Alternativen (<h1>, <p>, <main> etc.) gibt.

Hier ein Beispiel von zwei Attributen aus dem ARIA-Set:

role

<a href="javascript:cancel()" role="button" aria-label="Löschvorgang abbrechen">Abbrechen</a>

Mit role="button" wird definiert, dass es sich nicht um einen normalen Weblink handelt, sondern der Link eine Aktion ausführt und daher eher die Rolle eines Buttons übernimmt.

aria-hidden

<a href="javascript:close()">
    <span aria-hidden="true">×</span>
    Popup schliessen
</a>

Mit aria-hidden kann ein beliebiges Element von der Interpretation von Screenreaders ausgeschlossen werden. In obigem Beispiel wird ein ×-Symbol als visuelles Hilfsmittel verwendet. Screenreader sollen dieses komplett ignorieren ‒ der nachfolgene Text Popup schliessen reicht aus.

Eine ausführlichere Auflistung sämtlicher Attribute des ARIA-Sets findet sich in der W3C-Definition.

...und ein SEO-Boost gratis dazu

Die oben beschriebenen Verbesserungen helfen nicht nur die Website zugänglicher für Screenreader zu machen, sondern sind gleich noch ein SEO-Boost obendrein. So können sich die verbesserte Struktur, die klare Unterteilung und die zusätzlichen Deklarationen positiv auf die Suchmaschinen-Rangierung auswirken. Es lohnt sich also in mehreren Hinsichten, die Website für Screenreader zu optimieren.

Ein Beitrag aus dieser Serie
Accessibility

Diverse Disziplinen und Themen für eine bessere Zugänglichkeit von Inhalten im Web.

Weitere Beiträge anzeigen »
Mehr aus dieser Kategorie
UX/Design
Erfahre mehr über die Themen UX und Design.
Weitere Beiträge anzeigen »

Los geht's!

Kontaktiere uns noch heute

Für Offerten, technische Anfragen oder einfach nur um Hallo zu sagen.