Wenn man den Begriff “Webdesign” hört, denkt man zunächst an die Gestaltung einer Website in einer möglichst modernen und ästehtischen Weise. Doch zu richtig guten Webdesign gehört nochmal viel mehr: Die Nutzerfreundlichkeit. Der Nutzer soll die Website ohne Probleme navigieren und verwenden, seine Inhalte schnell verstehen können.

Während dies vielen Websiten für einen Großteil der Nutzer gelingt, gibt es mit anderen Benutzergruppen noch erhebliche Probleme: In Deutschland wurden 7,8 Millionen Schwerbehinderte zum Jahresende 2017 ermittelt. Statistisch gesehen tritt eine Behinderung also bei nahezu einem von zehn Menschen auf. Dazu addieren sich die Menschen mit Einschränkungen, wie beispielsweise eine verschlechterte Sicht.

In einer Zeit, wo das Internet den Alltag der Menschen nahezu stetig umgibt und eine sehr wichtige Stellung in der Gesellschaft einnimmt, kann man diese Menschen nicht einfach aus der Nutzung der digitalen Welt rausrechnen. Doch wie erstellt man Websites, die auf solche Einschränkungen angepasst sind?

Texte, Schriftarten und Kontrast

Auch wenn sich dank Grafiken, Video- und Audiodateien mittlerweile eine Vielzahl von Möglichkeiten bietet, so transportieren wir den größten Teil der Informationen immer noch über Text. Daher ist es umso wichtiger, dass dieser problemlos lesbar ist.

Textstruktur

Dafür sollte der Text keine riesige Wand sein, sondern klar unterteilt, kurz gehalten und nicht übermäßig kompliziert ausgedrückt sein.

Eine Zeile sollte nicht zu lang werden und linksbündig (im Falle eines Fließtextes) ausgerichtet sein.

Schriftarten

Auch heute noch wird oft genug mit Schriften gearbeitet, die nicht für das Web entworfen wurden und daher nicht an die Anwendungsfälle angepasst sind. Für lange Texte sollte eine Schrift mit Serifen verwendet werden, da diese die Unterscheidung zwischen einzelnen Buchstaben (wie zum Beispiel zwischen l und I) erleichtert. Ebenso sollten Zahlen klar von Buchstaben unterscheidbar sein.

Kontrast

Laut den “Web Content Accessibility Guidelines” – oder auch kurz WCAG – des World Wide Web Consortiums (W3C) soll der Kontrast ein Minimum von 4,5:1 bei kleinem Text (nicht bold und unter 18pt / bold und unter 14pt) und 3:1 bei großem Text betragen.

Screenreader

Ist es für den Nutzer nicht möglich, die Inhalte auf dem Bildschirm zu sehen, kann ein Screenreader die Texte vorlesen und ermöglicht es somit trotz fehlender Sicht, durch das Web zu navigieren. Dabei gibt es als Entwickler aber einige Dinge, die beachtet werden sollten, um eine möglichst gute Erfahrung zu bieten.

Nutzung der HTML-Semantik

Zunächst wäre da die Anwendung der Semantik nach dem HTML5-Standard: Elemente wie <nav>, <main> oder <section> helfen dem Screenreader bei der korrekten Navigation durch die Seite. Dadurch lassen sich die Inhalte für den Nutzer schneller erfassen, da er zur gewünschten Sektion springen kann und für ihn überflüssige Inhalte (bspw. die Navigation) überspringen kann.

ARIA und WIA-ARIA

Aria-Labels lassen sich an den Stellen einfügen, wo durch den Text des Elements seine Aufgabe nicht erkennbar wird. Haben wir beispielsweise einen Button zum Schließen, der mit einem “X” gekennzeichnet ist, sollte ein ARIA-Label-Attribut auf den HTML-Knoten gesetzt werden. Der Text des Aria-Labels wird dann anstelle des wirklichen Textes vom Screenreader vorgelesen. So lässt sich eine sinnvolle Beschreibung des Buttons anlegen, ohne dass das visuelle Erscheinungsbild beinträchtigt wird.

WAI-ARIA geht hier noch einen großen Schritt weiter und erweitert den Standard für heutige Anwendungsfälle. So lässt sich nicht nur eine Beschreibung an den Screenreader übergeben, sondern auch Informationen über die Rolle, Eigenschaften und den Status eines Elements. Aufgrund der Komplexität wollen wir hier nicht weiter darauf eingehen, aber detailierte Informationen befinden sich im Mozilla Developer Network.

Alt-Attribut

Was das ARIA-Label für die meisten HTML-Elemente ist, ist das Alt-Attribut für den <image>-Tag. Mit diesem lässt sich eine weitere Beschreibung zu einem Bild hinzufügen, die im Normalfall nicht angezeigt, aber für den Screenreader sichtbar ist.

Weiterer Vorteil des Alt-Attributs: Kann das Bild nicht geladen oder dargestellt werden, erhält auch ein Nutzer ohne Screenreader den Beschreibungstext als Fallback angezeigt.

Tastatur-Navigation

Ein weiterer, wichtiger Punkt für die Barrierefreiheit ist zudem die Steuerung über die Tastatur.

Mit dem HTML-Attribut “tabindex” lässt sich definieren, ob ein Element per Tab-Taste angesteuert – und wenn ja, mit welcher Wichtigkeit – werden soll. Dies ist jedoch nur der erste Schritt: Nach der Fokussierung durch die Tab-Taste werden beispielsweise die Pfeiltasten genutzt, um innerhalb des Elements zu navigieren. Hierfür steht jedoch keine native HTML-Lösung mehr bereit, sondern hier muss eine eigene Lösung mittels Javascript entworfen werden.

Den Fokus richtig setzen

Standardmäßig legen die Browser eine Umrandung (“Outline”) um Elemente, die im Fokus sind – doch häufig wird diese aufgrund der visuellen Gestaltung entfernt und nicht ädequat ersetzt. Dabei ist es besonders für die Tastatur-Steuerung wichtig, die Outline nicht zu entfernen, sondern stattdessen eine an das Design angepasste Variante zu entwickeln – somit bleiben sowohl die Funktionalität als auch die visuelle Gestaltung erhalten.

Weitere, ausführliche Informationen und Beispiele zum Thema gibt es im Abschnitt “Barrierefreiheit” im Mozilla Developer Network (MDN).