Seite 11 - Barrierefreiheit

Ein Mega Menu Dropdown mit mehrspaltigen Unterkategorien ist eines der komplexesten Navigationsmuster im E-Commerce, und eines der am häufigsten falsch umgesetzten in Bezug auf Barrierefreiheit. Mit Alpine.js, dem Disclosure-Pattern statt falscher Menu-Rollen und sauberer Tastatursteuerung lässt sich ein Mega Menu bauen, das für Maus, Tastatur und Screenreader gleichermaßen funktioniert.

Ein Suchfeld mit Live-Vorschlägen sieht für sehende Nutzer selbsterklärend aus, ist aber ohne das ARIA-Combobox-Pattern für Tastatur- und Screenreader-Nutzer oft schlicht unbedienbar.

Ein Mauszeiger trifft einen einzelnen Pixel exakt, ein Finger auf einem Touchscreen deckt im Schnitt eine Fläche von acht bis zehn Millimetern ab. Wer Buttons, Icons und Links für die Maus entwirft und sie unverändert auf Mobilgeräte überträgt, produziert Bedienflächen, die für viele Nutzer schlicht zu klein sind, nicht nur für Menschen mit motorischen Einschränkungen, sondern auch für alle, die im Bus stehen, ein Kind auf dem Arm tragen oder einfach größere Finger haben. WCAG 2.5.8 und 2.5.5 machen aus dieser Beobachtung eine prüfbare Regel.

SVG-Icons ersetzen zunehmend Icon-Fonts, bringen aber ohne bewusste Auszeichnung keinerlei Text für Screenreader mit. Wer bedeutungstragende Icons wie einen Wishlist-Herz-Button nicht mit einem klaren Namen versieht und dekorative Icons nicht mit aria-hidden versteckt, baut unsichtbare oder verwirrende Bedienelemente. Dieser Artikel zeigt die richtige Technik für beide Fälle, mit einem vollständigen Praxisbeispiel.

Screenreader-Nutzer orientieren sich nicht durch Scrollen, sondern durch gezielte Sprünge zwischen Landmarks wie header, nav, main, aside und footer. Wer diese HTML5-Elemente korrekt und sparsam einsetzt, verschafft blinden und sehbehinderten Besuchern eine schnelle Übersicht über jede Seite und ermöglicht direkten Zugriff auf Inhalte, während überflüssige oder unbeschriftete Landmarks genau das Gegenteil bewirken und die Navigation spürbar erschweren.

Ein Cookie-Banner, der den Fokus verschluckt, Ablehnen nur über einen versteckten Link erlaubt und Screenreadern verborgen bleibt, ist nicht nur ein Dark Pattern, sondern gleich mehrfach eine handfeste Barrierefreiheits-Verletzung.

Wer aria-labelledby und aria-describedby verwechselt, sorgt dafür, dass Screenreader Buttons ohne Namen ankündigen oder Fehlermeldungen komplett verschlucken. Dieser Artikel erklärt den Unterschied zwischen dem zugänglichen Namen und der zugänglichen Beschreibung, zeigt die Namensberechnung nach WAI-ARIA, das Referenzieren mehrerer IDs und die häufigsten Verwechslungen anhand echter Formular- und Dialogbeispiele.

Mit prefers-contrast erkennt CSS, ob ein Nutzer in den Betriebssystemeinstellungen mehr oder weniger Kontrast wünscht, und kann Farben, Rahmen und Fokus-Indikatoren gezielt anpassen. Das Media Feature schließt eine echte Lücke in der Barrierefreiheit, die bislang oft mit separaten High-Contrast-Stylesheets umständlich gelöst wurde.

axe-core von Deque Systems ist längst kein einzelnes Werkzeug mehr, sondern die gemeinsame Prüfengine hinter axe DevTools, Lighthouse, jest-axe, Cypress-axe und zahlreichen weiteren Testing-Tools, die alle dieselben Regeln gegen dieselbe DOM-Struktur laufen lassen. Wer axe-core ausschließlich als Teil der CI-Pipeline betrachtet, verschenkt jedoch den größten Vorteil der Bibliothek: die Möglichkeit, Barrieren in Sekunden direkt am eigenen Arbeitsplatz zu entdecken, lange bevor ein Commit überhaupt existiert. Dieser Artikel zeigt, wie axe-core in Storybook, in der lokalen Entwicklung und über die Browser-Extension täglich genutzt wird, und wo die reale Grenze automatisierter Erkennung liegt.

Ein Kontrastverhältnis von 4,5 zu 1 und eine vollständig tastaturbedienbare Formularstrecke nützen wenig, wenn die Fehlermeldung im Checkout in einem verschachtelten Schachtelsatz erklärt, dass ein Feld ein ungültiges Format aufweist. Dieser Artikel zeigt, was WCAG 3.1.5 zur Lesbarkeit konkret verlangt, wie sich Leichte Sprache von Einfacher Sprache unterscheidet und wie klare Fehlermeldungen und Anleitungen im Checkout ohne Fachjargon auskommen.