Material Design für ein barrierefreies Webdesign

Usability, Barrierefreiheit oder Barrierearmut - drei Begriffe, die grundsätzlich denselben Aspekt im Webdesign betreffen: das Ausmaß, in dem eine Webseite oder Webanwendung von einem Nutzer verwendet werden kann, um ein bestimmtes Ziel zu erreichen.

Wir möchten an dieser Stelle verschiedene Elemente und Werkzeuge vorstellen, die helfen, eine möglichst barrierefreie Webseite zu gestalten und zu programmieren. Gerade die Richtlinien von Googles Material Design bieten zahlreiche Best practises für eine gute Bedienbarkeit und effektive Aufnahme von Informationen und dienen als Grundlage für die im Folgenden vorgestellten Themenbereiche.

Hören und Sehen - Aspekte der Barrierefreiheit

Eine Webseite ist barrierefrei (bzw. barrierearm), wenn sie von möglichst vielen Besuchern - unabhängig von körperlichen Fähigkeiten oder Behinderungen - genutzt werden kann.

Der Konsum einer Webseite kann insbesondere von folgenden körperlichen Behinderungen oder eingeschränkt werden:

• Farbenblindheit: Elemente und Bereiche in verschiedenen Farben können schlecht oder überhaupt nicht unterschieden werden.
• Schlechtes Sehvermögen: Sämtliche visuellen Elemente wie Texte oder Bilder können nur schlecht oder überhaupt nicht konsumiert werden.
• Kein oder nur eingeschränktes Hörvermögen: Auditive Elemente einer Webseite können nicht korrekt wahrgenommen werden.
• Mangelnde Feinmotorik: Typische Steuerelemente wie eine Maus können nicht genutzt werden.

Natürlich wollen wir als Webdesigner mit unserer Arbeit eine möglichst breite Masse an Menschen erreichen können. Deshalb stellt die Sicherstellung einer hohen Barrierefreiheit einen wichtigen Teil unserer Arbeit dar.

Best Practices im Material Design

Um eine möglichst optimale Bedienbarkeit von Webseiten und mobilen Anwendungen sicherzustellen, widmet Google ein ganzes Kapitel der “Material Design-Richtlinien” dem Thema Usability und Barrierefreiheit.

Neben der Aufnahme von Informationen im Allgemeinen lassen sich insbesondere die Richtlinien zur Navigation, sowie zur Interaktivität einer Anwendung ins Webdesign übertragen.

Lesbarkeit und Informationsaufnahme

Die meisten Informationen einer Webseite werden in der Regel in Form von Texten präsentiert. Damit diese Texte stets gut konsumiert werden können, muss ein Webdesign grundsätzlich bereits auf einer angenehmen Schriftgröße basieren. Aber auch wenn ein Nutzer die Schriftgröße erhöht (beispielsweise über eine "Zoom"-Funktion im Browser), sollten alle wichtigen Elemente weiterhin sichtbar und nutzbar bleiben.

Neben der Größe einer Schrift ist auch ihr Kontrast zum Hintergrund ein wichtiger Faktor für eine gute Lesbarkeit. Allgemein gilt ein Kontrastverhältnis von 4.5:1 als gut konsumierbar, bei Texten gilt jedoch grundsätzlich: Je kleiner die Schrift, umso mehr Kontrast zum Hintergrund ist nötig.

Farben und Medien

Für farbenblinde Menschen - aber auch für Nutzer mit monochromen Browsern (beispielsweise einem Kindle E-Reader) - ist es wichtig, dass Informationen nicht ausschließlich durch Farben vermittelt werden. Das Einfärben einer Schaltfläche in roter Farbe kann von manchen Nutzern nicht erkannt werden und reicht somit nicht als alleiniges Merkmal für eine gefährliche Aktion aus. In diesen Fällen bietet sich eine Kombination aus Farbe und weiteren visuellen Hinweisen wie Icons, Formen oder Text an, um die Bedeutung eines Elements zu verdeutlichen.

Auch die Inhalte multimedialer Elemente sollten nicht ausschließlich über Audio oder Video verfügbar sein. Für taube oder blinde Menschen, aber auch für Nutzer mit stummgeschalteten Geräten oder mangelhafter Hard- oder Software sollten beispielsweise Abschriften oder zumindest Untertitel für Videos und Sounddateien bereitgestellt werden.

Navigation einfach halten - egal auf welchem Gerät

In den meisten Fällen rufen wir eine Webseite auf, um eine bestimmte Information zu erhalten. Um dieses Ziel so einfach wie möglich zu gestalten, sollten die wichtigsten Informationen im Webdesign sehr prominent präsentiert werden.
Diese Regel gilt neben tatsächlichen Seiteninhalten auch für wichtige Navigationselemente. Ein Nutzer muss stets schnell erkennen können, auf welcher Seite oder in welchem Abschnitt er sich gerade befindet - und wie er von dort zu relevanten Bereichen weiternavigieren kann.

Obwohl wir als Webdesigner eine Webseite normalerweise an einem Computer mit Maus und Tastatur entwickeln, werden Webseiten auf verschiedenste Weisen konsumiert. Daher müssen alle Bereiche einer Webseite über verschiedene Inputmethoden erreichbar sein. Insbesondere Inhalte, die über bestimmte Maus-Aktionen wie Hover oder Rechtsklick aufrufbar sind, müssen ebenfalls über die Tastatur (beispielsweise über Fokus) und über Gestensteuerung (beispielsweise Double-Tap) erreichbar sein.

Für eine gute Bedienbarkeit auf Geräten mit Touch-Steuerung (typischerweise Smartphones und Tablets) dürfen Navigationselemente zudem nicht zu klein gestaltet werden, da sie dann nur schwer mit den Fingern getroffen werden können. Links und Buttons sollten beispielsweise mindestens 42 Pixel hoch sein und einen Abstand von rund 8 Pixeln zu anderen Navigationselementen besitzen.

Interaktivität und Bezeichnungen

Damit ein Nutzer seine Handlungsmöglichkeiten leicht entdecken kann, müssen interaktive Elemente im Webdesign klar als solche erkennbar sein. Dazu dient in erster Linie ein konsistentes Design dieser Elemente durch Farbe und Form, aber auch Beschriftungen, Tooltipps oder Platzhalter-Texte können die Interakivität eines Elements unterstreichen.

Bei den Bezeichnungen der Elemente sollten generische Formulierungen wie "Hier klicken" oder "Los" verhindert werden, da sie keine ausreichende Information zur durchführbaren Aktion bieten. Bezeichnungen wie "Auf der Webseite anmelden" oder "Den Artikel 'Usability im Webdesign' lesen" hingegen kommunizieren selbst außerhalb ihres aktuellen Kontexts unmissverständlich, welche Aktion sie auslösen.

Im modernen Webdesign werden oft bestimmte Elemente dynamisch ein- und ausgeblendet. In diesem Fall ist es wichtig, dass automatisch ausgeblendete Elemente notfalls durch den Nutzer wieder eingeblendet werden können - besonders dann, wenn sie wichtige Informationen wie Fehlermeldungen beinhalten.

Abschließend kann die Navigation zwischen verschiedenen interaktiven Elementen für viele Nutzer vereinfacht werden, indem wichtige Aktionen als solche ausgezeichnet werden. Im Webdesign können Links oder Schaltflächen beispielsweise über das Tabindex-Attribut ausgezeichnet werden, wodurch sie bei der Navigation über die TAB-Taste bevorzugt angesprungen werden.

Zusammenfassung: Solide Basis für barrierearme Webseiten

Die vorgestellten Aspekte bilden eine gute Grundlage, um bei der Gestaltung und Programmierung von Webseiten eine barrierearme Präsentation von Informationen sicherzustellen. Um ein Produkt tatsächlich vollständig barrierefrei zu gestalten, ist jedoch eine noch tiefergehende Auseinandersetzung mit dem Thema nötig.

Weitere Informationsquellen stellen unter Anderem die deutsche Webseite zum Thema Barrierefreiheit im Webdesign sowie die Themenseite der Aktion Mensch dar. Auch das World Wide Web Consortium W3C bietet ausführliche Informationen rund um die Barrierefreiheit (= Accessibility) im Webdesign an.

So geht es weiter: Ressourcen & Tools für Material Webdesign

Im letzten Artikel unserer Serie zum Thema Material Webdesign präsentieren wir verschiedene Tools und Ressourcen, um die vorgestellten Vorteile des Material Design in die eigene Webdesign-Praxis zu integrieren.