Seite 7 - Barrierefreiheit

Ein neues Akzentblau im Design-Token-Set kann still einen bestehenden Button unlesbar machen, ohne dass es jemand vor dem Release bemerkt. Farbkontrast-Tooling für React-Design-Systeme automatisiert genau diese Prüfung: von der Token-Definition über Storybook bis zur CI-Pipeline, damit WCAG-Verstöße auffallen, bevor sie in Produktion landen.

Ein Formular, das nur visuell gut aussieht, aber für Screenreader stumm bleibt, kostet Nutzer und Umsatz. Barrierefreie Formulare mit Tailwind CSS verbinden Labels korrekt, verknüpfen Fehlermeldungen über aria-describedby und gruppieren zusammengehörige Felder mit fieldset und legend.

Ein Alt-Text im Produktkatalog ist erst dann brauchbar, wenn er den Kontext des Bildes trifft, ohne mit Bild-von oder Foto-von zu beginnen. Dieser Artikel zeigt, wie sich Alt-Texte für Produktfotos, Infografiken und Icons konkret unterscheiden, wann leere alt-Attribute korrekt sind und wie ihr bestehende Katalogdaten auf echte Qualität statt reiner Anwesenheit prüft.

Kurzlebige Toast-Meldungen wie „Zum Warenkorb hinzugefügt“ verschwinden oft, bevor ein Screenreader sie überhaupt vollständig vorgelesen hat, und verletzen damit regelmäßig WCAG 2.2.1 zur einstellbaren Anzeigedauer.

Beim klassischen Seitenwechsel setzt der Browser den Fokus zuverlässig auf den Dokumentanfang. Bei clientseitigem Routing und dynamisch eingeblendeten Modals passiert das nicht von selbst. Wer Fokus nach Navigationswechseln und beim Öffnen und Schließen von Dialogen nicht explizit steuert, macht Single Page Applications für Tastatur und Screenreader faktisch unbedienbar.

Ein Mini-Cart, der Warenkorb-Updates nur visuell zeigt, lässt Screenreader-Nutzer im Unklaren, ob ein Produkt tatsächlich hinzugefügt wurde. Mit einer korrekten Live-Region, vollständiger Tastaturbedienung und sauberem Fokus-Management wird das Flyout für alle Besucher gleichermaßen nutzbar, testbar und WCAG-konform.

Produktgalerien mit mehreren Bildern, Zoom-Funktion und Karussell-Navigation gehören zu den komplexesten Bausteinen einer Produktseite. Wer nur Alt-Text ergänzt, aber Tastaturbedienung, Fokus-Management und Ankündigungen für Screenreader vergisst, baut eine Galerie, die für viele Nutzergruppen unbedienbar bleibt. Dieser Beitrag zeigt ein vollständiges, praxiserprobtes Muster für barrierefreie Produktgalerien in Magento und Hyvä.

Wenn Nutzerinnen und Nutzer die Browserschrift auf 200 Prozent vergrößern, muss ein Shop weiterhin vollständig lesbar und bedienbar bleiben, ohne dass Inhalte abgeschnitten werden oder seitliches Scrollen nötig wird. Dieser Artikel zeigt praxisnah, wie rem-basierte Einheiten, reflowende Layouts, ein offener Viewport und gezielte Zoom-Tests genau das in Magento- und Hyvä-Shops zuverlässig sicherstellen, ohne aufwendige Sonderlösungen.

Screenreader-Nutzer verlieren keine Information, wenn ein rein dekoratives Bild fehlt, aber sie verlieren wichtigen Kontext, wenn ein informatives Bild ohne Alt-Text bleibt. Dieser Artikel zeigt einen praktischen Test für die Unterscheidung, korrekte Techniken wie leeres alt, CSS-Hintergrundbilder und aria-hidden sowie typische Fehler beim Umgang mit Icons und dekorativen Grafiken in Magento- und Hyvä-Shops.

Wer Listen als gestapelte div-Elemente und Tabellen als reines Layoutwerkzeug missbraucht, macht Inhalte für Screenreader-Nutzer unbrauchbar. Mit ul, ol, dl für echte Aufzählungen und th mit scope sowie caption für echte Tabellendaten werden Beziehungen zwischen Inhalten programmatisch erkennbar, navigierbar und WCAG-konform, ohne visuelles Design zu opfern.