10 Grundregeln für mehr Barrierefreiheit › PAGE online

Wenn ihr diese zehn Punkte beachtet, seid ihr auf dem richtigen Weg zu einer barrierefreien Website – mehr geht natürlich immer!

1. Semantisches HTML und lineares Layout: Achtet auf eine logische Reihenfolge der Überschriftenstruktur und anderer ordnender Elemente. Beispiel: Eine H3- Überschrift kann es nur nach einer vorangegangenen H2 geben und eine H2 nur nach einer H1. Eine H3 darf also nicht auf eine H1 folgen. Das hilft Screenreadern, den Inhalt korrekt zuzuordnen.
2. Bilder mit Alt-Texten versehen: Nutzer:innen, die Screenreader verwenden, müssen Inhalt und Funktion des Bildes vermittelt bekommen.
3. Text separat bereitstellen: Vermeidet Text auf Bildern und bietet Beschreibungstexte für Nicht-Text-Inhalte (zum Beispiel für Grafiken oder Videos) an.
4. Barrierefreie Links: Verlasst euch nicht auf Farben. Links sollten entweder unterstrichen oder fett markiert sein. Vermeidet Beschreibungen wie »Hier klicken«, sondern benennt das Klickziel in Worten. Gebt in Downloadlinks die Dateigröße an. Handelt es sich um einen externen Link, dann vermerkt es für User:innen mit Screenreader.
5. Fokusstatus: Damit eine Website sich überhaupt per Tastatur bedienen lässt, brauchen Links und andere interaktive Elemente (Buttons, Navigationen, Formulare et cetera) unbedingt einen Fokusstatus, der anzeigt, welches Element gerade angesteuert wird.
6. Farbkontraste beachten: Bei Schriftgrößen unter 24 Pixel beziehungsweise unter 18,7 Pixel bei fetter Schrift wird ein Kontrastverhältnis von 4,5 : 1 oder größer gefordert.
7. Tabellen immer mit einer Kopfzeile versehen: Denkt auch hier an User:innen mit Screenreader: Tabellen enthalten Daten und sind kein Designelement.
8. Pinch und Zoom bereitstellen: Mit .
9. Dem Wunsch zu schrumpfen widerstehen: Verkleinert Texte und Bilder nicht, nur damit der Inhalt passt.
10. Untertitel für Video und Audio anbieten:  Von Nutzer:innen selbst auswählbare Closed Captions bevorzugen! Die Untertitel sollten als separate editierbare Datei vorliegen.

Webdesign: Barrierefrei in nur drei Monaten

Viviane Harder und Lena Simonis zeigen euch Step by Step den Weg zu einer barrierefreien UX, damit ihr perfekt auf das Barrierefreiheitsstärkungsgesetz vorbereitet seid.

Dieser Beitrag ist Teil unseres Artikels »Accessible UX Design« und ist erstmals in PAGE 12.2023 erschienen. Die ganze Ausgabe jetzt als P+-Abonnent:in kostenfrei downloaden: