Seite 2 - Barrierefreiheit

focus-within und focus-visible klingen ähnlich, lösen aber grundverschiedene Probleme. Der eine reagiert auf Fokus irgendwo innerhalb eines Containers, der andere unterscheidet zwischen Tastatur- und Mausinteraktion. Wer beide verwechselt, baut entweder unruhige Fokusringe oder unsichtbare Tastaturnavigation.

grid-auto-flow: dense füllt Lücken in einem CSS Grid automatisch, indem es bei jeder Platzierung rückwärts sucht. Das erzeugt ein dichtes, lückenloses Layout, kann dabei aber die visuelle Reihenfolge der Elemente deutlich von ihrer Reihenfolge im Markup trennen, mit direkten Folgen für Tastatur-Navigation und Screenreader.

Eine schöne Farbpalette ist noch keine lesbare Farbpalette. Ein Farbkontrast-Audit deckt auf, welche Text-Hintergrund-Kombinationen einer Tailwind CSS Palette WCAG AA tatsächlich erfüllen, bevor sie im Design System zur Falle für Nutzer mit eingeschränktem Sehvermögen werden.

Eine Breadcrumb-Leiste aus verschachtelten div- und span-Elementen mit Trennzeichen sieht für sehende Nutzer korrekt aus, liefert einem Screenreader jedoch keinerlei Information darüber, dass es sich um eine Navigationshilfe mit einer klaren Position innerhalb der Seitenhierarchie handelt. Dieser Artikel zeigt, wie nav mit aria-label, aria-current, eine semantisch korrekte Listen-Struktur und barrierefreie Pagination-Kontrollen echte, für Screenreader-Nutzer nutzbare Navigation schaffen, mit vollständigen Praxisbeispielen aus Hyvä.

Barrierefreie Webshops erschließen eine relevante Zielgruppe mit erheblicher Kaufkraft, verbessern durch sauberes semantisches Markup SEO und Performance, reduzieren rechtliche Risiken durch das Barrierefreiheitsstärkungsgesetz und stärken die Markenreputation. Wer Barrierefreiheit als Investition statt als Pflichtübung kommuniziert, überzeugt auch Stakeholder, die ausschließlich in Kennzahlen und Return on Investment denken, mit belastbaren wirtschaftlichen Argumenten.

Eine automatisch generierte Rechnungs-PDF aus Magento sieht für sehende Kundinnen und Kunden korrekt aus, ist für Screenreader-Nutzer aber häufig nur eine unstrukturierte Ansammlung von Textfragmenten oder sogar ein reines Bild ohne erkennbaren Text. Dieser Artikel zeigt, was der PDF/UA-Standard konkret verlangt, wie sich getaggte PDFs von gescannten Bildern unterscheiden und wie sich Magento-Rechnungen, Kataloge und Datenblätter mit Adobe Acrobat und dem PAC-Checker Schritt für Schritt barrierefrei nachbearbeiten lassen.

Produktfilter, die nur mit der Maus bedienbar sind oder nach jeder Auswahl den Fokus verlieren, schließen Nutzer mit Tastatur oder Screenreader faktisch aus. Dieser Artikel zeigt, wie Checkboxen, Radio-Buttons und Preis-Regler in einer Layered Navigation semantisch korrekt ausgezeichnet, per Tastatur bedienbar gemacht und mit Live-Regionen für aktualisierte Ergebniszahlen kombiniert werden, ohne den Fokus beim Neuladen des Produktrasters zu verlieren.

Accordion und Tabs zählen zu den am häufigsten falsch umgesetzten Interface-Mustern im Web, weil sie visuell einfach wirken, aber unter der Oberfläche eine präzise definierte Tastatur-Interaktion und eine eigene ARIA-Rollenstruktur erfordern. Ein Accordion, das nur per Klick auf ein div reagiert, oder Tabs, die keine Pfeiltasten-Navigation kennen, funktionieren für Maus-Nutzer scheinbar einwandfrei und bleiben für Tastatur- und Screenreader-Nutzer trotzdem unbenutzbar oder zumindest missverständlich.

Automatisierte Accessibility-Checks finden nur einen Bruchteil der echten Barrieren, denn sie können nicht hören, wie eine Seite tatsächlich klingt. Wer NVDA unter Windows und VoiceOver unter macOS selbst bedient, entdeckt fehlende Ankündigungen, falsche Fokusreihenfolgen und stumme Buttons, bevor Nutzerinnen und Nutzer mit Sehbehinderung sie im Livebetrieb erleben, und lernt zugleich die eigenen Testgrenzen kennen.

Barrierefreiheitsfehler, die im Pull Request entdeckt werden, kosten Minuten. Werden sie erst im späteren Accessibility Audit gefunden, kosten sie Tage. Eine feste Prüfliste für semantische Elemente, Formular Labels, Tastaturbedienbarkeit und Fokus Management im Code Review verhindert genau diese teuren Nacharbeiten und macht Barrierefreiheit zum festen Bestandteil jedes Merges, ohne die Review Geschwindigkeit spürbar zu bremsen.