Barrierefreies Webdesign
Das Design für barrierefreie Webseiten erfordert viel Fingerspitzengefühl. Webdesigner:innen können nicht von optimaler Sehkraft und Lichtverhältnissen ausgehen. Um einen Einblick in die Vielzahl an Voraussetzungen aber auch Möglichkeiten für barrierefreie Inhalte zu geben, haben wir in Bezug auf Text und Bilderwiedergabe ein paar Tipps zusammengefasst.
Textgestaltung für barrierefreie Webseiten
Inhaltlich gelten für barrierefreie Webseiten wenig überraschende Kriterien, die sich aber direkt oder indirekt auch massiv auf die Suchmaschinenoptimierung auswirken können.
- Verständliche Sprache
- einfache Sprache und Information, die auch außerhalb der Organistion gut verstanden wird und schnell aufgenommen werden kann
- Vermeiden von Abkürzungen, Fremd- oder Eigenwörtern
- keine Wörter nur in Großbuchstaben
- Zahlen als Ziffern darstellen,...
- Textstruktur - Nutzen Sie Überschriftenhierchien, Zwischenüberschriften, Absätze, Aufzählungen,...
- Kontextbezogen - Überschriften müssen zum Inhalt passen
- Achten Sie zudem auf aussagekräftige Links, die das Ziel eindeutig beschreiben und sich auch optisch vom restlichen Text abheben.
- Zum Thema gendergerechte Schreibweise haben wir uns gesondert Gedanken gemacht: Hier finden Sie den Artikel Ist gendergerechte Sprache barrierefrei?
Schriftgröße für barrierefreie Webseiten
- Serifenschrift im Fließtext vermeiden
- Max. 60 - 80 Zeichen pro Zeile
- Mind. 16 Pixel (12 pt) Schriftgröße (am besten proportional in Prozent oder Em angeben)
- Zeilenabstand: Fließtext min. 1,5-fach, Absätze min. 2-fach (WCAG 1.4.12)
Optische Textgestaltung
Optische Kriterien in der Textgestaltung beziehen sich vor allem auf Kontrastanforderungen. Je kleiner die Schrift, desto größer muss der Kontrast sein.
Zur Berechnung und Überprüfung barrierefreier Farbkombinationen in Bezug auf die WCAG-Stufen, empfehlen wir den Color Contrast Analyzer von Adobe
Farben dürfen allerdings nicht der alleinige Informationsträger sein. Valide oder invalide Formulareingaben sind meist durch Grün oder Rot gekennzeichnet. Eine zusätzliche schriftliche Meldung erlaubt die Wahrnehmung durch Menschen mit einer Farbfehlsichtigkeit.
Das gilt auch für Diagramme. Legenden und Balken sollten direkt beschriftet werden. Auch unterschiedliche Linienarten (gesrichelt, gepunktet) können optisch besser voneinander abgegrenzt werden.
Beispiele dafür findet man im Colorblind Friendly Mode von Trello:
Einbinden von Bildern und Videos in barrierefreie Webseiten
Neben optischen Gestaltungsrichtlinien gilt es alternative Bildbeschreibungen bzw. Transkriptionen von Videos und Audiodateien zu berücksichtigen.
Werden Bilder auf einer Webseite nicht geladen, wird stattdessen der Alternativtext angezeigt. Sehbeeinträchtigte Menschen können sich barrierefreie Webseiten vorlesen lassen. Bei Bildern wird der Alternativtext vorgelesen. „IMG20191013“ macht da wenig Sinn, „Heidelbeer-Pfannkuchen mit Ahornsirup“ aber sehr wohl.
Bilder und Grafiken beschreiben:
- Halten Sie Alternativtexte kurz und prägnant.
- Inhalt und Aussage bzw. Funktion des Bildes müssen dabei transportiert werden.
- Design und Symbolbilder können für Screenreader ausgeblendet werden.
- Steuerelemente mit Name und Zweck
- Verwenden Sie keine rein grafischen CAPTCHAs
Bildquelle: Hilfsgemeinschaft der Blinden und Sehschwachen Österreichs, Werner Rosenberger, MSc
- dürfen nicht von selbst beginnen
- müssen ansteuerbar sein
- Inhalte benötigen eine Alternative:
- bei Audio: Transkript erforderlich
- bei Video: Titel, Untertitel, Kurzbeschreibung des Inhalts
- bei Youtube Untertitel ausschaltbar
Mit barrierefreien Webseiten Ihr Google-Ranking verbessern.
Nutzen Sie die Möglichkeit für eine unverbindliche Beratung.
Technische Anforderungen
Neben Inhalt und Design sind eine Reihe technischer Anforderungen für barrierefreie Webseiten zu berücksichtigen.
Kann man einen Computer beispielsweise nicht mit der Maus, sondern nur mit der Tastatur bedienen, müssen barrierefreie Webseiten das Navigieren über das Keyboard unterstützen.
Ein einfacher Test: drücken Sie die „TAB“-Taste auf Ihrer Tastatur und versuchen Sie zu einem bestimmten Link zu gelangen. Bei nicht optimierten Webseiten muss man so durch Menüs mit 50 Menüpunkten einzeln 50 mal durchtabben. Bei optimierten Webseiten gibt es den Link „Skip to Content“/ „Direkt zum Inhalt“.
Zum Testen der mobilen Website auf Barrierefreiheit kann man den Browser-Zoom auf über 300 % stellen, die Webseite sollte dann in die mobile Ansicht springen und mit der Tastatur bedienbar sein.
Ebenso wichtig:
- Valider Quellcode
- Auszeichnungen (HTML Tags)
- Konsistente Navigation auf allen Unterseiten
- Skalierbar bis 200%
- Bedienbarkeit mit Tastatur
- Bedienbarkeit mit Screenreader
- Eingabehilfen (zum Beispiel: Einrastfunktionen statt Tastenkombinationen)
- Animationen müssen stopbar sein
- Tastaturfokus gut sichtbar machen
- Verfügbarkeit von Suche oder Sitemap
- Skiplink-Navigationen (zum Beispiel: zum Seitenanfang)
- ...
Zertifikat für Barrierefreiheit im Web
In Österreich gibt es seit 2017 das Web Accessibility Certificate Austria (WACA). Webseiten, die bestimmte Standards umsetzen, können sich hier zertifizieren lassen. Weiterführende Informationen zu Voraussetzungen, Kosten und dem Auditprozess finden Sie auf der Webseite der WACA.
webgras bietet Ihnen Unterstützung bei der Konzeptionierung Ihrer barrierefreien Webseiten.
