Tag: Accessibility

1. European Accessibility Act und BFSG: Rechtliche Grundlagen für Shops

   12.09.2025

   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.

   Read more

2. Alt-Texte richtig schreiben: Mehr als nur Pflichtfeld

   01.09.2025

   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.

   Read more

3. Fokus-Management in dynamischen Interfaces und SPAs

   29.08.2025

   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.

   Read more

4. Magento Mini-Cart barrierefrei gestalten

   20.08.2025

   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.

   Read more

5. Produktbilder und Galerien barrierefrei gestalten

   12.08.2025

   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ä.

   Read more

6. Responsive Text und Zoom-Unterstützung bis 200 Prozent

   04.08.2025

   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.

   Read more

7. Dekorative vs. informative Bilder unterscheiden

   02.08.2025

   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.

   Read more

8. Listen und Tabellen barrierefrei auszeichnen

   29.07.2025

   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.

   Read more

9. Label vs. Placeholder: Warum Placeholder kein Ersatz sind

   22.07.2025

   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.

   Read more

10. ARIA Live Regions für dynamische Inhalte ankündigen

    18.07.2025

    Wer dynamische Inhalte per JavaScript aktualisiert, ohne Screenreader-Nutzer zu informieren, erzeugt unsichtbare Fehler und stille Erfolgsmeldungen. ARIA Live Regions mit aria-live, aria-atomic und aria-relevant kündigen Änderungen zuverlässig an, ohne den Fokus zu verschieben, und machen Warenkorb-Updates, Formularvalidierung und Suchergebnisse für alle Nutzer nachvollziehbar.

    Read more