Die Einarbeitung ist das Thema fällt vielen Website-Betreibern schwer. Was bedeutet Barrierefreiheit für mein Webangebot? Worauf muss ich achten? Welchen Standard sollte ich erfüllen? Kann ich meine bestehende Website barrierefrei machen oder muss ich einen Relaunch planen? Es gibt zum Thema viele Informationen, aber diese sind oft schwer zugänglich oder schwer zu verstehen.
Aus diesem Grund haben wir eine ganz einfache 10-Punkte-Liste erstellt, die Ihnen helfen soll, sich beim Thema Barrierefreiheit zu orientieren und zurechtzufinden.
1. Visuelles Design
Das Design soll "vorhersehbar" gestaltet sein, damit sich auch Screen Reader gut zurechtfinden. Es muss möglich sein, mindestens bis zu 200 % in die Website zu zoomen, ohne dass es zu Darstellungsfehlern kommt. Besonders wichtig sind korrekte Kontrastwerte, für die es online viele praktische Online-Prüftools gibt, wie z. B. ContrastChecker. Achten Sie darauf, dass man auf Ihrer Website nicht horizontal scrollen muss. Popups und Overlays müssen ohne Fokus-/Mauszeigerwechsel schließbar sein. Für bewegte, blinkende und scrollende Inhalte muss es die Möglichkeit geben, diese zu stoppen oder auszublenden.
2. HTML-Markup
Ihre Website wird im Webbrowser mithilfe von HTML dargestellt. Die Entwickler müssen dabei auf verschiedene Aspekte achten, um Ihr Webangebot barrierefrei zu gestalten. Es soll valides und robustes Markup geschrieben werden, dass leicht von Assistenzsystemen interpretiert werden kann. Semantisches Markup, dass die logische Funktion und nicht das Aussehen eines Elements beschreibt, ist sowieso "State of the Art" und auch für Barrierefreiheit wichtig. Spezielle Markup-Elemente sind zu verwenden, um wichtige Navigationsbereiche zu kennzeichnen, wie z. B. header, nav, main, side und footer. Zitate sind mit blockquote auszuzeichnen, Abkürzungen mit abbr zu markieren. Die korrekte Elementreihenfolge und Verschachtelung ist wichtig: genau eine Hauptüberschrift (H1), dann H2, H3, ... Das lang-Attribut zur Auszeichnung der Seitensprache muss gesetzt sein (das mag auch Google) und der Viewport-Zoom darf nicht deaktiviert oder funktionsfähig sein. Das Ändern der Textgröße muss möglich sein (auch auf die Zeilenhöhe achten).
3. ARIA Roles
Noch ein wichtiger Punkt, das HTML-Markup betreffend. Die sogenannten ARIA-Roles sollen an passenden Stellen implementiert werden. ARIA steht für "Accessible Rich Internet Applications". Sie werden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium entwickelt. Es handelt sich dabei um einen Standard, der explizit das Arbeiten mit assistierenden Technologien unterstützen soll.
4. Inhalt und Sprache
Die Texte auf Ihrer Website sollen als kurze, verständliche, gut lesbare Sätze formuliert werden und in einer sinnvollen Reihenfolge angeordnet werden. Text auf Bildern und Texte, die als Bild umgesetzt wurden, sind zu vermeiden, weil diese von Screen Readern nicht erkannt werden können. Sich auf vielen Seiten wiederholende Blöcke sollen einfach übersprungen werden können. Auch darf es beim Lesen der Inhalte keine Zeitbegrenzung geben - wichtig z. B. bei interaktiven Quizzes. Zum Konzept der Barrierefreiheit gehört es auch, wichtige Informationen in Einfacher Sprache anzubieten. Texte in Einfacher Sprache haben kürzere Sätze, einfache Satzstrukturen und wenig Kommata. Noch weiter geht die Leichte Sprache, die ein Maximum von sieben Wörtern im Satz verwendet.
5. Navigation und Menüs
Eine konsistente Menüführung ist besonders wichtig, damit sich Menschen mit Beeinträchtigungen mithilfe ihrer technischen Systeme einfach durch Ihr Webangebot navigieren können. Wichtig sind sinnvolle Linktexte, die erklären, was nach dem Klick zu erwarten ist - also z. B. keine generischen "Weiterlesen"- oder "Mehr"-Links. Das hilft übrigens auch Suchmaschinen, besser zu verstehen, worum es auf ihrer Seite geht. Wird ein Link in einem neuen Browserfenster geöffnet, so muss das vorher erkenntlich sein. Manche Kiosk-Systeme unterstützen keine zusätzlichen Browserfenster. Auf jeden Fall müssen ihre Entwickler darauf achten, dass der Zurück-Button des Browsers immer korrekt funktioniert. Er ist eines der wichtigsten Navigationselemente. Mit manchen modernen Technologien ist das nicht immer gegeben. Gruppieren Sie ähnliche Links (z. B. zu ihren Auftritten im Social Web) in einer Liste. Machen Sie deutlich, wenn ein Link ein PDF-Dokument öffnet. Bieten Sie mindestens zwei Möglichkeiten an, wie Inhalte auf ihrer Website gefunden werden können, z. B. per permanenter Navigation (Menü) und Sitemap oder Volltextsuche. Kleine Websites können auch alle Unterseiten von der Startseite aus verlinken.
6. Bilder, Videos und Audio
Bei Bildern ist es besonders wichtig, den sogenannten Alt-Text zu setzen, der in Textform beschreibt, was auf dem Bild zu sehen ist. Das ist übrigens auch "best practice" bei der Suchmaschinenoptimierung (SEO). Ebenso soll für alle Nicht-Text-Inhalte (z.B. jpg, png, webp, svg, ...) das Title-Attribut gefüllt werden. Dekorative Bilder, die von Screen Readern übersprungen werden können, kennzeichnet man mit leerem alt-Attribut. Videos sollen nicht per Autoplay starten, etwas, dass unserer Erfahrung nach wirklich jeder Websitebesucher goutiert. Ebenso muss es eine Möglichkeit geben, Videos und Audio-Beiträge anzuhalten. Auch für die Mediensteuerung gibt es spezielles Markup, dass angewendet werden sollte. Ebenso hilfreich ist die Möglichkeit zur Anzeige von Untertiteln bei Videos. Bieten Sie Alternativen für reine Audio-Inhalte - z. B. ein Audio-Transkript).
7. Formulare
Formulare sollen Beschriftungen und Titel für die Eingabeelemente erhalten. Diese sind im Markup entsprechend auszuzeichnen und mit den Elementen zu verknüpfen. So können Sie Beschriftungen den Eingabefeldern zuordnen (name, role, value). Machen Sie deutlich, welche Daten Sie im Eingabefeld erwarten, um eine programmatische Autovervollständigung zu unterstützen. Nutzen Sie Fieldsets und Legenden, um ihre Formulare zu gruppieren und zu strukturieren. Bieten Sie Autovervollständigung an, wo das sinnvoll ist. Bei Fehlern markieren sie das fehlerhafte Element und schlagen mögliche Korrekturen vor. Zeigen Sie die fehlerhaften Eingabefehler außerdem in einer Liste über dem Formular an und geben programmatisch lesbare Statusmeldungen aus (Fehler, Erfolg, ...).
8. Tastatursteuerung
Interaktive Elemente müssen über die Tastatur mit Tab und Shift-Tab erreichbar sein. Ordnen Sie diese in einer logischen Reihenfolge an (z. B. bei europäischen Seiten von oben links nach unten rechts) und vergeben Sie im Markup das korrekte tabindex-Attribut. Das visuelle Layout soll den Tastaturfokus darstellen. Vermeiden Sie die Verwendung des Autofokus-Attributs.
9. Testen
Beim Testen Ihres Webangebots legen Sie den Fokus auch auf Aspekte der Barrierefreiheit. Schauen Sie sich die Seiten in verschiedenen Zoom-Modi und Textgrößen an. Überprüfen Sie den Kontrast und die Lesbarkeit, lassen Sie das Markup mithilfe von Online-Tools validieren. Verwenden Sie Ihre Website auch mithilfe von Screenreadern, Screenmagnifiern, Braille-Zeilen und Spracheingabe. Achten Sie durch Prüfung der oben genannten Aspekte darauf, dass die Inhalte ihres Webangebots lesbar, anpassbar, unterscheidbar, navigierbar und tastaturbedienbar sind.
10. Tools
Zum Erstellen und Testen von barrierefreien Websites gibt es viele hilfreiche Tools. Google Chrome LightHouse ist in die Chrome Developer Tools integriert und eignet sich für einen ersten Accessibility-Audit. Der BITV-Test beinhaltet 60 Prüfschritte. Zu jedem gibt es ausführliche Erläuterungen, die genau besagen, was geprüft wird, warum das wichtig ist und wie in der Prüfung vorzugehen ist. Die WAVE-Toolbar wurde von WebAIM.org entwickelt. Mittels dieser Überprüfung lassen sich wichtige Schlüsse über Ihre Website bezüglich der Zugänglichkeit ziehen.
Wenn Sie oben stehende Empfehlungen beachten, sind Sie auf einem guten Weg, Ihre Webinhalte zugänglicher zu machen für:
- Nutzer*innen ohne Sehvermögen (WV)
- Nutzer*innen mit eingeschränktem Sehvermögen (LV) oder fehlender Farbwahrnehmung (WPC)
- Nutzer*innen mit eingeschränkter Handhabung, Kraft oder Reichweite (LMS, LR)
- Nutzer*innen mit eingeschränktem oder fehlendem Hörvermögen (LH, WH)
- Nutzer*innen mit kognitiven Einschränkungen (LC)
