Barrierefreiheit

Tastatur#

Alles, was sich mit der Maus bedienen lässt, geht auch mit der Tastatur. Die Reihenfolge folgt dem Lesefluss, der Fokus trägt einen klaren Ring im Akzent.

• Zum nächsten Bedienelement, der Fokus ist immer sichtbarTab
• Knopf oder Link auslösen, Akkordeon öffnenEnter
• Schalter, Auswahl und Akkordeon bedienenSpace
• Zwischen Reitern und in Menüs wechseln←→
• Dialog, Sheet oder Menü schließen, der Fokus kehrt zurückEsc

Dialoge und Sheets bauen auf dem nativen <dialog>. Der Browser hält den Fokus darin, Escape schließt, danach steht der Fokus wieder auf dem auslösenden Knopf.

Screenreader#

• Echte Überschriftenebenen, Listen als Listen, Tabellen als Tabellen.
• Jedes Formularfeld hat ein Label, Fehler werden dem Feld zugeordnet und vorgelesen.
• Knöpfe nur mit Icon tragen einen Namen, Zustände wie offen oder ausgewählt stehen in aria-Attributen.
• Unsichtbare Hilfetexte gibt es auf Deutsch und Englisch, passend zur Sprache aus KitProvider.

Bilder kommen von dir, also auch ihr Alternativtext. Beschreib, was zu sehen ist, und lass ihn bei reiner Dekoration leer.

<Hero
  variant="split"
  title="…"
  media={<img src="/team.avif" alt="Drei Steuerberaterinnen am Besprechungstisch" width={1200} height={800} />}
/>

Kontrast#

Text und Flächen kommen aus Tokens, die in Hell und Dunkel auf lesbaren Kontrast abgestimmt sind. Für Warn- und Erfolgstext gibt es eigene Tokens, text-warning-foreground und text-success-foreground, die auf beiden Hintergründen lesbar bleiben. aiw theme misst den Kontrast jeder Stufe deiner Markenfarbe, siehe Theming.

Touch und kleine Bildschirme#

Jedes Tap-Ziel misst mindestens 44 Pixel. Telefon, Tablet und Desktop sind je eigens entworfen, was am Desktop eine Seitenspalte ist, wird auf dem Telefon ein Akkordeon, eine Leiste oder ein Sheet. Nichts läuft seitlich über den Rand.

Ohne JavaScript#

Components rendern auf dem Server vollständig. Ohne JavaScript ist jeder Inhalt lesbar, Bewegungen stehen im Endzustand. Das Akkordeon baut auf dem nativen details-Element, es öffnet sich auch ohne Skript und die Suche im Browser findet Text darin.

Wer reduzierte Bewegung eingestellt hat, sieht alles sofort und ruhig, mehr dazu unter Motion.

Dein Teil#

• Eine h1 je Seite, darunter Abschnitte in der richtigen Reihenfolge. Components nehmen dafür title und eyebrow als Inhalt.
• Alternativtext für jedes Bild mit Inhalt.
• Linktexte, die ohne Umgebung verständlich sind.
• Eigene Wörter für Knöpfe und Hinweise über labels, wenn der Standard nicht passt.
• Die Sprache der Seite im lang-Attribut am html-Element.

<Hero variant="with-video" title="…" video={video} labels={{ play: 'Rundgang durch die Praxis abspielen' }} />

Seiten prüfen#

aiw check öffnet jede Seite im Browser bei 390, 768 und 1440 Pixeln, prüft mit axe gegen WCAG 2.2 AA, sucht seitlichen Überlauf, Konsolenfehler und tote Links und misst mit Lighthouse.

npm run build
aiw check dist