Seite 5 - Barrierefreiheit

scroll-behavior: smooth verwandelt Sprünge zu Anker-Zielen in eine animierte Bewegung, aber genau diese Animation kann bei Menschen mit vestibulären Störungen echte körperliche Beschwerden auslösen. Das robuste Pattern aktiviert smooth scrolling ausschließlich innerhalb von @media (prefers-reduced-motion: no-preference), sodass die explizite Entscheidung des Betriebssystems immer gewinnt.

Datepicker und Comboboxen zählen zu den anspruchsvollsten Interface-Mustern im Web, weil sie ständig zwischen geschlossenem Eingabefeld, geöffneter Vorschlagsliste und aktiv markierter Option wechseln müssen. Wer das WAI-ARIA Combobox-Pattern präzise umsetzt, Tastatur und Screenreader gemeinsam testet und zusätzlich einen unabhängigen Text-Input-Fallback anbietet, macht Terminauswahl und Autocomplete für wirklich alle Nutzergruppen zuverlässig bedienbar, auch ohne Maus.

Wer 'Klicke Warenkorb' sagt, erwartet, dass die Software einen Button findet, der wirklich so heißt. Spracherkennungsprogramme wie Voice Control unter macOS und iOS, Windows Speech Recognition oder die professionelle Dictation-Software Dragon NaturallySpeaking navigieren Webseiten anhand der sichtbaren Beschriftung von interaktiven Elementen, nicht anhand von Icons, Farben oder Positionen. Ein Interface voller Icon-only-Buttons ohne sichtbaren Text ist für diese Nutzergruppe faktisch unbedienbar, selbst wenn technisch ein aria-label vorhanden ist.

Ein durchgestrichener Alt-Preis neben einem hervorgehobenen neuen Preis ist eines der stärksten visuellen Signale im E-Commerce, für Screenreader-Nutzer bleibt reines CSS-Strikethrough per text-decoration jedoch vollständig unsichtbar. Wer stattdessen die semantischen Elemente del und ins korrekt einsetzt, Rabatt-Badges mit einer Textalternative versieht und Preisspannen bei Produktvarianten klar formuliert, macht aus einer rein optischen Preisauszeichnung eine Information, die jeder Nutzer verlässlich abrufen kann.

Wer keine Maus benutzt, verlässt sich vollständig auf eine funktionierende Tastaturnavigation. Skip-Links, eine logische Fokus-Reihenfolge und ein sauberer Focus-Trap in Modals entscheiden darüber, ob eine Tailwind CSS Anwendung für Tastaturnutzer bedienbar oder unbenutzbar ist.

Scroll Snap bringt das Verhalten klassischer Karussell-Bibliotheken direkt in den Browser: Der Nutzer scrollt frei, aber der Container rastet an definierten Positionen ein, sauber und ruckelfrei. Wer scroll-snap-type und scroll-snap-align richtig kombiniert, spart eine komplette JavaScript-Abhaengigkeit und bekommt dabei Touch-Gesten, Tastatursteuerung und Barrierefreiheit quasi geschenkt.

Ein Accessibility-Audit oder ein automatisierter Scan liefert häufig mehrere hundert einzelne Befunde auf einmal, von einem vollständig unbedienbaren Checkout-Formular bis zu einem geringfügig zu schwachen Kontrast in einer Fußzeile, und ohne eine klare Priorisierung landen alle diese Befunde undifferenziert im selben Backlog, wo die dringendsten Probleme in der Masse der weniger relevanten untergehen. Dieser Artikel zeigt, wie Schweregrad-Kategorien angelehnt an WCAG-Konformitätsstufen, eine Impact-Einschätzung nach betroffener Nutzergruppe und eine saubere Integration in Jira oder Linear dafür sorgen, dass Befunde tatsächlich abgearbeitet werden, statt in einem Backlog-Friedhof zu verschwinden.

Der native Browser-Pfeil eines select-Elements passt selten zu einem durchdachten Design-System, und appearance: none entfernt genau dieses eine visuelle Detail, ohne die eingebaute Tastatursteuerung, Suche per Tastendruck oder Screenreader-Ankündigung zu beeinträchtigen. Wer diese Technik richtig einsetzt, spart sich den kompletten Nachbau eines Dropdowns per JavaScript.

Sobald ein Shop eine Store-View mit arabischer oder hebräischer Sprache anbietet, muss sich das Layout automatisch an die Schreibrichtung anpassen, von rechts nach links statt von links nach rechts. Die Pseudoklasse :dir() reagiert direkt auf die tatsächlich berechnete Textrichtung eines Elements, unicode-bidi steuert das Verhalten bei gemischtem Text, und logical properties übernehmen den Rest, ohne dass ein einziges JavaScript-Snippet die Richtung erkennen müsste.

Ein mehrstufiges Formular ist mehr als eine Aneinanderreihung einzelner Formularseiten: Es braucht eine erkennbare Gruppierung pro Schritt, eine Fortschrittsanzeige, die den aktuellen Schritt eindeutig kommuniziert, eine aktive Ankündigung jedes Schrittwechsels für Screenreader-Nutzer und eine Zurück-Navigation, die eingegebene Daten zuverlässig erhält. Dieses allgemeine Wizard-Pattern gilt für Registrierungsassistenten, mehrstufige Konfiguratoren und Umfragen genauso wie für jeden anderen mehrstufigen Formularprozess abseits des Checkouts.