MAISON CODE .
/ Accessibility · A11y · WCAG · Compliance · SEO · Legal

Barrierefreiheit im Internet: Es ist keine Wohltätigkeit, es ist das Gesetz

Domino’s Pizza wurde auf Millionenbeträge verklagt, weil ihre Website nicht mit Screenreadern kompatibel war. So programmieren Sie für die WCAG 2.1 AA-Konformität. A11y ist ROI.

AB
Alex B.
Barrierefreiheit im Internet: Es ist keine Wohltätigkeit, es ist das Gesetz

Barrierefreiheit (A11y) wird oft als „schön zu haben“ angesehen. Das ist es nicht.

  1. Rechtliches Risiko: Für Websites gilt der ADA (Americans with Disabilities Act). Die Zahl der Klagen ist um 300 % gestiegen.
  2. Marktgröße: 15 % der Weltbevölkerung haben eine Behinderung. Das ist ein riesiges Kundensegment.
  3. SEO: A11y und SEO überschneiden sich zu 90 %. Semantisches HTML gewinnt beides. Wenn Sie einen blinden Benutzer blockieren, blockieren Sie GoogleBot.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Warum Maison Code A11y priorisiert

Wir machen das nicht nur wegen der Klagen. Wir tun es, weil das „Lila Pfund“ (die Kaufkraft behinderter Haushalte) allein im Vereinigten Königreich einen Wert von 274 Milliarden US-Dollar hat. Wir machen es, weil es „Curb Cut Effects“ gibt. (Für Rollstühle wurden Bordsteinschnitte gemacht, aber sie helfen Kinderwagen und Koffern.) Untertitel wurden für Gehörlose gemacht, aber sie helfen Menschen, die sich Videos in der Metro ansehen. A11y verbessert das Erlebnis für jeden.

1. Semantisches HTML: Die Grundlage

Hören Sie auf, „

“ für alles zu verwenden.

  • Button: „
  • Überschrift: „

    “, nicht „
    “.

  • Navigation: „

2. Der „Focus Ring“-Stil

Designer hassen die blaue Umrandung: „outline: none“. Entfernen Sie NIEMALS den Umriss, es sei denn, Sie ersetzen ihn. Tastaturbenutzer (motorisch eingeschränkt) verlassen sich auf den Fokusring, um zu wissen, wo sie sich befinden. Verwenden Sie „:focus-visible“, um es nur Tastaturbenutzern und nicht Mausbenutzern anzuzeigen.

„css /* Gute UX / button:focus { Gliederung: keine; / Standard ausblenden */ }

button:focus-visible { Umriss: 2px solid var(—color-electric); Umriss-Offset: 2px; } „

3. ARIA-Labels (Überbrückung der Lücke)

Wenn visuelle Hinweise versagen, verwenden Sie ARIA. Beispiel: Ein „X“-Symbol zum Schließen eines Modals. Optisch: Es ist offensichtlich. Hörbar: Es lautet „Bild“. Fix: <button aria-label="Close Modal">X</button>. Regel: Verwenden Sie zuerst natives HTML. Verwenden Sie ARIA nur, wenn HTML nicht ausreicht. Verwenden Sie „role=“button”` nicht für ein Div, wenn Sie einen „