Tastaturbedienbarkeit
Die gesamte Website – insbesondere die Navigationen – muss vollständig mit der Tastatur bedienbar sein.
Wichtige Punkte:
Der Fokuszustand muss jederzeit klar sichtbar sein
Interaktive Elemente müssen mit Tab / Shift+Tab erreichbar sein
Bei Modals oder Dialogen muss ein Focus Trap implementiert werden, damit der Fokus im geöffneten Dialog bleibt und nicht im Hintergrund landet. Siehe auch: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog
Headline-Struktur
Überschriften müssen eine logische, hierarchische Struktur haben.
Grundregeln:
h1 = Seitentitel (immer nur in einem Header Modul)
danach h2, h3, h4 … ohne Levels zu überspringen
die Struktur muss semantisch korrekt aufgebaut sein
Screenreader-Nutzer können so direkt von Headline zu Headline navigieren.
Da viele Inhalte aus einem CMS stammen, ist es wichtig, auch Content-Editoren dafür zu sensibilisieren.
Unsere Module verwenden standardmässig h2 als Abschnittstitel.
Skip-Links
Skip-Links ermöglichen es Nutzer:innen, direkt zu wichtigen Bereichen einer Seite zu springen, zum Beispiel:
Navigation
Hauptinhalt
Footer
Diese Links befinden sich am Anfang der Seite und werden sichtbar, sobald sie Fokus erhalten.
Beispiel einer Umsetzung von Gridonic: https://www.vpbank.com/
Formulare
Formulare sollten möglichst native HTML-Elemente verwenden:
<select>
<checkbox>
<radio>
Diese Elemente bringen Accessibility bereits von Haus aus mit.
Custom UI-Komponenten (z. B. selbst gebaute Select-Dropdowns) sollten nur verwendet werden, wenn es wirklich nötig ist. In diesem Fall muss sichergestellt werden, dass:
die Elemente Tastatur-bedienbar bleiben
der Fokus sichtbar ist
Screenreader korrekt unterstützt werden
Links
Die Verlinkung sollte immer das Ziel vom Link beschreiben, z.B. “Zum Warenkorb” anstatt “Klicke hier”. Externe Links ebenfalls als solche kennzeichnen, mit einem Icon oder Ergänzung im title Attribut für Screenreaders.
Dekorative Elemente für Screenreader ausblenden
Dekorative Inhalte, die keine Bedeutung für Screenreader haben, sollten entsprechend verborgen werden.
Typische Beispiele: dekorative Icons, Hintergrundgrafiken, Illustrationen ohne Informationswert
Dies kann z. B. mit aria-hidden="true" umgesetzt werden.
Siehe: https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html
Accessibility im Design (Figma)
Accessibility beginnt bereits im Designprozess.
In unseren Projekt-Styleguides definieren wir unter anderem:
Fokus-States
semantische Headline-Strukturen
barrierefreie Komponenten
Farbkontraste
Kontraste werden mit APCA (Advanced Perceptual Contrast Algorithm) geprüft.
Weitergehende Anforderungnen
Weitergehende Accessibility-Anforderungen (z. B. vollständige WCAG-Konformität auf höheren Levels) müssen projektspezifisch geplant und budgetiert werden.
Eine sehr grosse und präzise Checkliste für die verschiedenen Levels der WCAG kann hier gefunden werden: https://a11y.digitaldialog.swiss/checklist