Weboberflächen
Barrierefreie Oberflächen: von der Seitenstruktur bis zum Slider
Wie Sie eine Oberfläche aufbauen, die sich gut lesen, auf dem Smartphone öffnen und mit der Tastatur bedienen lässt.
Barrierefreiheit beginnt mit der Seitenstruktur. Leser müssen den gesuchten Abschnitt finden, den Zweck eines Links verstehen und eine Aktion ausführen können. Farbe, Animation und Bildschirmgröße dürfen nicht die einzigen Hinweise sein.
Das W3C Design System zeigt, wie sich solche Oberflächen aus wiederverwendbaren Komponenten aufbauen lassen. Es enthält Gestaltungsmuster für W3C-Websites. Die Verwendung dieser Komponenten allein belegt noch keine WCAG-Konformität. Prüfen Sie das Ergebnis auf den konkreten Seiten.
Zuerst die Struktur festlegen
Eine Seite braucht eine Hauptüberschrift, die ihr Thema nennt. Überschriften der zweiten Ebene teilen den Text in Abschnitte. Die dritte Ebene unterteilt einen Abschnitt. Wählen Sie die Überschriftenebene nach der Struktur. Die Schriftgröße legen Sie mit CSS fest.
Trennen Sie Navigation, Hauptinhalt und Fußbereich mit den semantischen Elementen nav, main und footer. Platzieren Sie am Seitenanfang einen Link „Zum Inhalt“. Wer die Tastatur nutzt, kann damit das wiederkehrende Menü überspringen.
Verwenden Sie für den Wechsel auf eine andere Seite einen Link. Für eine Aktion auf der aktuellen Seite verwenden Sie eine Schaltfläche. Die Beschriftung soll das Ergebnis nennen: „Fallstudie öffnen“ ist bei mehreren Karten klarer als „Mehr erfahren“.
Die Karte verständlich gestalten
Eine Karte braucht ein Bild, eine Überschrift und eine kurze Beschreibung. Illustriert das Bild nur das bereits genannte Thema, lassen Sie alt leer. Vermittelt das Bild wichtige zusätzliche Informationen, beschreiben Sie diese mit Worten. Wiederholen Sie nicht die gesamte Überschrift im Alternativtext.
Setzen Sie den Link in die Überschrift. Mit CSS können Sie seine klickbare Fläche auf die Karte ausdehnen. So erhält der Link für Screenreader einen kurzen Namen. Andere Nutzer können auch auf das Bild oder eine freie Fläche der Karte klicken. Platzieren Sie keine Schaltflächen innerhalb des Links.
Geben Sie die Bildmaße an. Der Browser reserviert dann vor dem Laden den nötigen Platz, und der Text verschiebt sich nicht. Bieten Sie für kleine Bildschirme über srcset eine kleinere Bilddatei an.
Die Steuerung des Sliders den Nutzern überlassen
Ein Slider soll den Inhalt während des Lesens nicht selbst wechseln. Deaktivieren Sie den automatischen Wechsel standardmäßig. Zeigen Sie die Schaltflächen „Vorheriger Slide“ und „Nächster Slide“ sowie die Nummer des aktuellen Slides und die Gesamtzahl.
Prüfen Sie die Schaltflächen mit der Tastatur. Nach dem Wechsel bleibt der Fokus auf der betätigten Schaltfläche. Links ausgeblendeter Slides dürfen mit Tab nicht erreichbar sein. Halten Sie die Meldung zum aktuellen Slide kurz.
Wenn Nutzer Animationen in den Geräteeinstellungen reduzieren, wechseln Sie die Slides ohne Bewegung. Ohne JavaScript müssen die Inhalte als gewöhnliche Liste verfügbar bleiben. Der Slider erleichtert das Durchsehen, darf aber nicht der einzige Zugang zu einem Beitrag sein.
Kleine Bildschirme und Vergrößerung prüfen
Öffnen Sie die Seite bei einer Breite von 320 CSS-Pixeln. Der Text muss ohne horizontales Scrollen lesbar sein. Eine Tabelle darf einen eigenen horizontalen Scrollbereich haben, wenn dieser nötig ist, um den Zusammenhang ihrer Zeilen und Spalten zu erhalten.
Erhöhen Sie den Browserzoom auf 200 %. Überschriften und Schaltflächen dürfen sich nicht überlagern. Legen Sie für Karten keine feste Höhe fest, wenn der Text nach einer Übersetzung oder Vergrößerung mehr Zeilen benötigt.
Für normalen Text nennt WCAG ein Kontrastverhältnis von mindestens 4,5:1, für großen Text 3:1. Prüfen Sie auch die Grenzen von Bedienelementen und den sichtbaren Fokus. Die Standardfarben von Bootstrap ersetzen diese Prüfung nicht.
Kurze Prüfung vor dem Release
- Durchlaufen Sie die Seite mit Tab. Der Fokus ist sichtbar, und die Reihenfolge entspricht dem Lesefluss.
- Öffnen Sie das Menü, wechseln Sie einen Slide und folgen Sie einem Link mit der Tastatur.
- Prüfen Sie 320 Pixel Breite und 200 % Zoom.
- Deaktivieren Sie JavaScript. Texte, Links und Beiträge bleiben verfügbar.
- Prüfen Sie die Seite mit einem Screenreader. Eine automatische Prüfung ersetzt diesen Schritt nicht.