Barrierefreiheit

Ein Sternen-Rating aus fünf gefüllten und leeren Icons ist für sehende Nutzer sofort verständlich, für Screenreader-Nutzer ohne zusätzliches Markup dagegen entweder komplett stumm oder eine verwirrende Aneinanderreihung von fünf einzelnen Grafiken ohne erkennbaren Gesamtwert. Wer die Textalternative für das Rating, das Bewertungsformular und die Sortier- und Filteroptionen für Rezensionen konsequent zugänglich gestaltet, macht aus einem rein visuellen Vertrauenssignal eine Information, die jeder Nutzer tatsächlich abrufen kann.

CSS konnte über Jahrzehnte kein Eltern-Element anhand des Zustands eines seiner Kinder auswählen. Der :has()-Selektor schließt genau diese Lücke und macht Formular-Wrapper, Fieldsets und ganze Formularabschnitte reaktiv auf :invalid, :user-invalid und :checked, komplett ohne eine einzige Zeile JavaScript.

Ein Shop kann jede automatisierte Prüfung mit voller Punktzahl bestehen und trotzdem für Screenreader-Nutzende, Menschen mit motorischen Einschränkungen oder Menschen mit kognitiven Beeinträchtigungen faktisch unbenutzbar bleiben, weil Werkzeuge wie axe-core oder Lighthouse nur technische Regelverstöße erkennen, nicht aber die tatsächliche Erfahrung beim Ausführen einer Aufgabe. User-Testing mit echten Menschen mit Behinderungen deckt genau diese Lücke auf, von der Rekrutierung einer diversen Testgruppe über den passenden Testaufbau bis zur Priorisierung der gewonnenen Erkenntnisse im Entwicklungsalltag.

Die WCAG unterteilt Erfolgskriterien in drei Konformitätsstufen: A, AA und AAA. Wer versteht, was jede Stufe technisch fordert, kann realistische Ziele setzen statt pauschal auf Vollständigkeit zu hoffen. Dieser Artikel erklärt die Unterschiede zwischen den Stufen, warum AA für die meisten kommerziellen Websites der richtige rechtliche und praktische Zielstandard ist und welche einzelnen AAA-Kriterien sich trotzdem gezielt lohnen.

content bei ::before und ::after wird oft nur fuer leere dekorative Elemente genutzt, kann aber deutlich mehr: attr() liest HTML-Attribute direkt aus, counter() nummeriert Listen und Kapitel automatisch, und content: url() bindet Bild-Icons ein, ganz ohne zusaetzliches Markup. Wer diese Moeglichkeiten kennt, spart HTML-Elemente, muss dabei aber die Zugaenglichkeits-Grenzen von generiertem Inhalt genau verstehen.

Barrierefreiheit-Wissen, das nur bei einer einzigen Person im Team liegt, ist ein stilles Risiko: Urlaub, Krankheit oder ein Jobwechsel reißen sofort eine Lücke. Dieser Artikel zeigt praxisnahe, kostengünstige Wege, wie Pairing-Sessions, Screenreader-Demos und eine gemeinsame Checkliste Wissen im ganzen Team verankern und neue Entwickler sowie Designer von Anfang an mitnehmen.

Produktvideos ohne Untertitel schließen gehörlose und schwerhörige Nutzer aus, während fehlende Audiodeskription blinden Nutzern zentrale visuelle Informationen vorenthält. Dieser Artikel zeigt, wie Entwickler WebVTT-Untertitel, das HTML track-Element und durchsuchbare Transkripte konkret in Magento- und Hyvä-Shops einbauen, inklusive echtem Produktionsworkflow.

Screenreader und andere assistive Technologien lesen niemals direkt das HTML, sondern eine vom Browser berechnete Parallelstruktur namens Accessibility Tree. Wer versteht, wie DOM, semantisches HTML und ARIA-Attribute diesen Baum formen, kann fehlende oder falsche Accessible Names gezielt mit den richtigen Werkzeugen aufspüren und beheben, statt Barrierefreiheit auf gut Glück zu testen.

Ein barrierefreier Checkout in Magento und Hyvä führt Nutzerinnen und Nutzer mit Screenreader, Tastatur oder Sprachsteuerung sicher durch Versand, Zahlung und Bestellübersicht. Dieser Artikel zeigt praxisnah, wie eine zentrale Fehlerzusammenfassung, tastaturbedienbare Zahlungsmethoden, sauberes Fokus Management und angekündigte Statusmeldungen Kaufabbrüche verhindern, Vertrauen schaffen und den gesamten Checkout Flow zuverlässig auf WCAG 2.2 Niveau bringen.

Mit der Funktion light-dark() lässt sich ein Hell- und ein Dunkelmodus-Farbwert in einer einzigen Deklaration angeben, statt zwei getrennte prefers-color-scheme-Blöcke zu pflegen. Der Browser wählt automatisch anhand des aktuell aktiven color-scheme, welcher der beiden Werte zum Einsatz kommt, sowohl bei System-Präferenz als auch bei einem manuellen Umschalter, der die Eigenschaft überschreibt.