Accessibility Espresso #9 ☕
4. September 2026
|
|
{if %lastname != ''}{if %gender == 'female'}Sehr geehrte Frau{elseif %gender == 'male'}Sehr geehrter Herr{else}Sehr geehrte Frau / Sehr geehrter Herr{/if}{if %title != ''} {%title}{/if} {%lastname}{else}{if %gender == 'female'}Sehr geehrte Kundin{elseif %gender == 'male'}Sehr geehrter Kunde{else}Sehr geehrte/r Kundin/Kunde{/if}{/if},
herzlich willkommen zur neuen Ausgabe, diesmal mit folgenden Themen:
Am 27. September verbietet die EU die Behauptung, ein Widget mache eine Seite konform - ohne Übergangsfrist, ohne Einzelfallprüfung. Dazu sechs Rechtsräume mit einem Standard darunter. Und ein selbstgebauter Button kostet 500 Zeilen JavaScript.
Ich wünsche Ihnen eine schöne Lektüre.
Viele Grüße
Jan Deppisch
|
|
⭐ Thema der Woche
|
|
|
Drei Wochen nach dieser Ausgabe ändert sich die Rechnung. Am 27. September 2026 greift die EU-Richtlinie EmpCo ohne Übergangsfrist, und ihre schwarze Liste verbietet genau die Behauptung, mit der Overlays verkauft werden: Ein Widget mache eine Seite WCAG-konform. Keine Einzelfallprüfung - ein Wettbewerber oder Verbraucherverband kann direkt abmahnen. Die Belege lagen längst vor: Karl Groves maß 46 Prozent behobener Fehler über 29 React-Komponenten, nur rund 32 Prozent der WCAG-Kriterien auf A und AA sind automatisierbar, und das Widget reißt selbst 2.1.1, 1.4.13 und 2.4.7. Die FTC belegte den Marktführer schon 2025 mit einer Million Dollar.
|
|
|
📋 Das große Ganze
|
|
|
Nützlich sind nicht die Bußgelder, sondern die Leiter. Alexandra Groves legt für jedes Land dieselben vier Stufen frei: EAA, nationales Gesetz, nationale Verordnung, EN 301 549. Der öffentliche Sektor läuft über eine zweite Leiter ab der Web Accessibility Directive, weshalb BFSG und BITV 2.0 eben nicht dasselbe Regelwerk sind. Die Falle, auf die sie hinweist: BITV 2.0 ist Bundesrecht, und jedes Land hat seine eigene Fassung - bei einer Kommune gilt also die Landesverordnung. Frankreich ist älter als der EAA und wird am schärfsten durchgesetzt. Alles endet bei EN 301 549. Deutsche Kunden brauchen zusätzlich eine jährliche Erklärung zur Barrierefreiheit.
|
|
|
|
|
Nina Gerlings Faustregel lautet, dass das BFSG dem Verbraucher folgt und nicht der Website: Seiten und Apps mit Vertragsabschluss, E-Books und Reader, Selbstbedienungsterminals, Streaming, Telekommunikation. Eine reine Imageseite ohne Abschluss fällt oft komplett heraus. Spannender ist, wo Digitales und Physisches sich treffen - Geldautomaten, und die Echtzeit-Textkommunikation für gehörlose Anrufer, die an den Mobilfunknetzen hängt.
|
|
|
|
|
Mit Abstand gelesen ist das gar kein Text über KI. Es ist eine Beschwerde mit einer Forderung am Schluss. Léonie Watson trennt KI als Erweiterung, für die sie sich nicht entschuldigt, von KI als Ersatz für Barrierefreiheit, die jemand anderes weggelassen hat. Der EAA kostet sie mit 125.000 Wörtern ohne Überschriften vier Stunden, selbst bei den 500 Wörtern pro Minute, die ihr Screen Reader schafft. Calvin Klein gibt jedem Produktbild dieselbe Beschreibung, eine Kopie des Seitentitels. Ihr Schlusssatz ist der Punkt: Überlasst die Entscheidung über KI nicht den behinderten Menschen. Baut es richtig.
|
|
|
⚙️ In der Praxis
|
|
|
Bemerkenswert ist nicht das useEffect, sondern der Zielkonflikt darunter. Chris Yoong zitiert Marcy Suttons Fable-Tests von 2019 mit fünf behinderten Teilnehmern: Der Fokus auf die h1 war für Screen Reader am schnellsten - und für Bildschirmvergrößerung kaputt, weil der Browser mitten in die breite Überschrift springt und den Text an beiden Rändern abschneidet. An main kommen Tastaturnutzer gar nicht, denn Landmarks sind nicht fokussierbar. Nur der Sprunglink hielt in allen Gruppen stand. React 19 hebt title in den Head - lang ausdrücklich nicht. SvelteKit liefert alle drei Korrekturen als Standard, React keine davon.
|
|
|
|
|
Auf die Frage, was man tun soll, wenn der eigene Agent nicht barrierefreien Code schreibt, antwortet Marco Campos, dass LLMs genau den standardmäßig produzieren. Die 4.000 Wörter davor begründen, warum das zählt. Er baut einen Button als Custom Element nach: Rolle, Accessible Name, tabindex, Maus-, Touch- und Pointer-Events, Teilnahme an Formularen, Validierung, den disabled-Zustand und zuletzt eine Hülle um addEventListener, damit fremde Handler zuletzt laufen. Knapp 500 Zeilen JavaScript für einen Teil dessen, was ein nativer Button ohne eine einzige kann.
|
|
|
|
|
Drei Techniken lesen dieselbe Zeichenkette, und dieser Teil fehlt meistens: Screen Reader sagen sie an, die Sprachsteuerung sucht nach ihr, Braillezeilen geben sie aus. Whitney Lewis nennt die Rangfolge - aria-labelledby, aria-label, native Beschriftung, Textinhalt, title - und zeigt dann einen Button, auf dem "Submit" steht und der "Refresh" ansagt, weil ein hineinkopiertes aria-label weiter oben steht. Ihre Empfehlung lautet nicht mehr ARIA, sondern weniger: sichtbares Label verwenden, und wo das nicht geht, es per CSS verstecken, damit der Name der Textinhalt bleibt. In WAVE listet die Ansicht Order alle interaktiven Elemente in unter zwei Minuten.
|
|
|
|
Im Browser ansehen
Abbestellen
|
|
|
© 2026 Jan Deppisch ·
jandeppisch.de
|
|