Barrierefreie Komponenten

Die meisten Barrieren entstehen nicht im Fließtext, sondern in den interaktiven Bausteinen einer Seite: im Formular, im Menü, im Dialog. Hier sammle ich die gängigen UI-Komponenten und zeige, wie man sie zugänglich umsetzt – fast immer nach demselben Grundsatz: erst das native Element, dann ARIA, und das auch nur, wenn es sein muss (die erste Regel von ARIA).

Bei den Formularen beginnt alles mit verknüpften Labels, sauberen Fehlermeldungen und zugänglicher Validierung. Zusammengehörige Felder gruppierst du mit fieldset & legend, und auch eigene Schalter und Checkboxen bauen auf dem nativen Input auf. Für die langen Strecken gibt es die Muster mehrstufige Formulare & Wizards und die Datums- & Zeitauswahl.

Bei Navigation & Bedienelementen geht es um den feinen, aber wichtigen Unterschied zwischen Buttons und Links, um Menüs & Dropdowns und ihre große Form, das Mega-Menü, um Skip-Links, Breadcrumbs, Pagination und das unauffällige, oft falsch gebaute Muster der klickbaren Cards.

Die interaktiven Widgets sind die Königsdisziplin: Dialoge & Modals, Akkordeons, Tabs, Slider, Tooltips & die Popover-API, Comboboxen, Karten & Drag-and-drop und der Cookie-Banner als erste Hürde jeder Seite. Dazu kommen Medien & Daten – von Alt-Texten über Icons & SVGs, komplexe und sortierbare Tabellen sowie barrierefreie Diagramme bis zum Media-Player.

Wo natives HTML nicht ausreicht, kommen die ARIA-Techniken ins Spiel: Rollen, States & Properties, Live-Regionen und die darauf aufbauenden Status- und Fortschrittsanzeigen.

Mein Rat: Lass dich von der Menge nicht abschrecken. Fast alle diese Komponenten folgen wenigen wiederkehrenden Mustern – Disclosure, korrekte Beschriftung, Tastaturbedienung, sichtbarer Fokus. Wer die einmal verstanden hat, baut auch das nächste Widget richtig. Jede Komponentenseite verweist dafür auf die maßgeblichen WCAG-Kriterien und – wo es eines gibt – auf das offizielle Muster im ARIA Authoring Practices Guide; wem die Nutzerperspektive dahinter fehlt, der findet sie unter Barrierefreiheit verstehen.