-
Hierarchie der Überschriften und InhalteFür die optimale Navigation und Indexierung der Inhalte, sollten diese entsprechend hierarchisiert werden. -
Aussagekräftige ÜberschriftenAussagekräftige Überschriften helfen allen Usern, den Inhalt einer Website einfacher zu «scannen».
-
Keine «hier klicken»-LinksLinks sollten Auskunft darüber geben, was bei einem Klick passiert.
-
Alternative Inhalte für nicht-text InhalteVisuelle Inhalte sind nicht für jeden Benutzer zugänglich und sollten darum mit einem Text beschrieben werden.
-
Aussagekräftige SeitentitelSeitentitel helfen, sich bei mehreren Tabs zu orientieren und den Seiteninhalt abzuschätzen.
-
Nutze ARIAsARIAs sind nützliche Ergänzungen zu HTML um den Inhalt besser zugänglich zu machen.
Das Wichtigste in Kürze
Inhalt
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.
3. Keine «hier klicken»-Links
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.
Diverse Disziplinen und Themen für eine bessere Zugänglichkeit von Inhalten im Web.
