Seite 5 - Barrierefreiheit

Wer outline:none ohne Ersatz einsetzt, macht Tastaturnutzern die Bedienung der Seite praktisch unmöglich, weil unsichtbar bleibt, welches Element gerade aktiv ist. Mit :focus-visible, kontraststarken Fokus-Ringen und klaren WCAG-Kriterien lässt sich dieser häufige Fehler gezielt beheben, ohne die visuelle Ruhe für Maus-Nutzer zu opfern.

Der Checkout ist die geschäftskritischste Stelle jedes Online-Shops, und genau dort scheitern barrierefreie Interfaces am häufigsten. Blockierte Fortschrittsanzeigen, unauffindbare Fehlermeldungen und Tastaturfallen im Zahlungsschritt kosten zahlende Kunden und öffnen rechtliches Risiko nach dem Barrierefreiheitsstärkungsgesetz. Dieser Artikel zeigt, wie ihr jeden einzelnen Schritt des Checkout-Prozesses in Magento und Hyva systematisch barrierefrei auditiert, testet und umsetzt.

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.

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.

Parallax-Scrolling, große Zoom-Übergänge und autoplayende Hintergrundvideos wirken für viele Nutzer modern, lösen bei Menschen mit vestibulären Störungen aber echte Übelkeit, Schwindel und Migräne aus. Die Media Query prefers-reduced-motion erkennt diese Präferenz zuverlässig in CSS und JavaScript und ermöglicht eine reduzierte, weiterhin funktionale Animation statt eines abrupten Interfaces ohne jede Rückmeldung.

Ein Keyboard Trap entsteht, wenn der Tastaturfokus in ein Modal, Dropdown oder Drittanbieter-Widget hineinwandert und mit Tab oder Umschalt Tab nicht wieder herausfindet. Für Tastaturnutzer und Screenreader-Nutzer bedeutet das einen kompletten Blockadepunkt. Dieser Artikel zeigt typische Ursachen, ein systematisches Testverfahren und eine korrekte Fokus-Trap-Implementierung, die mit der Escape-Taste zuverlässig wieder verlassen werden kann.

Formulare sind der kritischste Berührungspunkt jeder Website für Menschen mit Screenreadern, denn ohne korrekte label-Zuordnung, sinnvolle fieldset- und legend-Gruppierung und eindeutig kommunizierte Pflichtfelder bleibt ein Checkout schlicht unbedienbar. Dieser Artikel zeigt anhand eines praktischen Adressformulars, wie Magento- und Hyvä-Entwickler Formulare semantisch korrekt aufbauen, Fehler barrierefrei kommunizieren und WCAG-konforme Eingabehilfen umsetzen.

Wer ein eigenes Dropdown oder eine Combobox baut statt ein natives HTML-Element zu nutzen, übernimmt die volle Verantwortung für Tastaturbedienung, Fokus und Screenreader-Ankündigung. Dieser Artikel zeigt Schritt für Schritt, wie ein barrierefreies Custom Widget nach den WAI-ARIA Authoring Practices entsteht, mit korrektem role, aria-expanded, aria-activedescendant und echten Tests mit einem Screenreader vor dem Release.

Alpine.js-Komponenten wirken oft interaktiv und modern, bleiben für Screenreader und Tastaturnutzer jedoch häufig unbrauchbar, wenn ARIA-Attribute nicht reaktiv mit dem Komponentenzustand verbunden sind. Dieser Artikel zeigt praxisnah, wie man x-bind:aria-expanded, x-on:keydown und sauberes Fokus-Management korrekt einsetzt, und baut ein vollständig barrierefreies Akkordeon sowie ein Dropdown-Menü Schritt für Schritt von Grund auf, inklusive Tastaturnavigation und Screenreader-Unterstützung.