Studio Mitte: Accessibility Leitfaden

Trotz einem verbesserten Bewusstsein gegenüber Web-Accessibility in den letzten Jahren, sind leider immer noch wenige Webseiten mit einem Blickwinkel auf Barrierefreiheit erstellt worden. Wir versuchen stetig unsere Webseiten zu verbessern in dieser Hinsicht und haben daher auch bereits unseren eigenen Leitfaden erstellt. Dieser Leitfaden beeinhaltet die für uns wichtigsten Punkte, um als Entwickler:in für die abschließenden Audits vorbereitet zu sein.

Schritt 1: "Mindestanforderungen"

Hier sollten die "Mindestanforderungen" für Web-Accessibility mit folgenden Punkten erfüllt werden:

Inhalt in <header> <body> und <footer> teilen
Die Navigation mit dem <nav> Tag erstellen
Für Links und Buttons das entsprechende HTML-Element verwenden
Titel einfügen für Buttons, Links und Medien
Alt-Texte einfügen für Medien
Für Hover und Focus eigene Styles einbinden
Auf Farbkontrast achten
Bewegungen für prefers-reduced-motion minimieren
Auf Reihenfolge des Contents achten (HTML sollte ident zur Ansicht sein)
Headings in einer logischen Abfolge einsetzen
Nur eine <h1> pro Seite verwenden
Dekorative Elemente mit aria-hidden ausblenden
aria-expanded bei Accordions oder geschlossenen Menüs anwenden

Schritt 2: "Die Extras"

Neben den Mindestanforderungen kann allerdings die User Experience weiterhin verbessert werden. Dafür können beispielsweise folgende Extras eingefügt werden:

Einstellung für die Schriftgröße
Einstellung für das Farbschema (Light Mode, Dark Mode,...).
Skip Links (Sollten sichtbar werden wenn sie fokusiert werden.)
Access Keys

Schritt 3: "Testing"

Damit die Webseite auch für alle Fälle getestet wird, sollte der Ablauf dafür folgendermaßen sein (natürlich sollte dieser Vorgang mit verschiedenen Endgeräten durchgeführt werden):

Tests mit einem Keyboard
Audits mit verschiedenen Tools (Wave, Lighthouse, axe DevTools, Browser DevTools, ...)
Screen Reader Testing (Talk Back, VoiceOver, NVDA, Jaws, ...)

Schritt 4: "Code - Audit - Repeat"

Nun sollten die Fehler der Tests natürlich ausgebessert werden und im nächsten Schritt wieder die Webseite getestet werden.

Natürlich ist dies nur ein Leitfaden und keine Garantie, dass jede:r User:in Webseiten einwandfrei bedienen kann. Um das zu erzielen, muss eine Vielzahl an Tests und Audits durchgeführt werden (auch mit Betroffenen). Für uns ist dies allerdings ein guter Start, um die User Experience für Menschen mit Beeinträchtigungen zu verbessern.