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.

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 und der Cookie-Banner als erste Hürde jeder Seite. Dazu kommen die Medien – von Alt-Texten über Icons & SVGs und komplexe Tabellen 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.