Seite 3 - Barrierefreiheit

Eine korrekte Überschriften-Struktur von h1 bis h6 verwandelt eine Webseite in ein navigierbares Inhaltsverzeichnis für Screenreader-Nutzer, die per Tastenkürzel von Überschrift zu Überschrift springen. Wer Ebenen nur wegen der Schriftgröße überspringt, zerstört diese Navigation unbemerkt. Dieser Artikel zeigt die praktische h1-Konvention, korrekte Hierarchien und schnelle Audit-Methoden für Magento- und Hyvä-Shops.

Seit Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz auf Basis des European Accessibility Act zahlreiche Online-Shops zu digitaler Barrierefreiheit. Dieser Artikel erklärt, welche Unternehmen betroffen sind, welche Bereiche eines Shops konform sein müssen, welche Fristen gelten und mit welchen konkreten Schritten Magento- und Hyvä-Betreiber die gesetzlichen Anforderungen praktisch umsetzen.

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.

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.

Ein Placeholder ist ein flüchtiger Hinweistext, kein dauerhaftes Label. Er verschwindet, sobald jemand zu tippen beginnt, wird von vielen Screenreadern nicht zuverlässig als Formularbeschriftung erkannt und ist wegen seines meist blassen Kontrasts schwer lesbar. Dieser Artikel zeigt, wie Label und Placeholder korrekt zusammenspielen und wo genau die Grenze verläuft.