Sechs Referenz-Beispiele aus Verband, Verwaltung, Medien und E-Commerce. Was sie technisch richtig machen, was Sie davon lernen können und wie Sie die Erkenntnisse auf Ihre eigene Seite übertragen.
Vorbild für die Erklärung zur Barrierefreiheit, die das BFSG verlangt: Konformitätsstand, Mängelliste, Feedback-Kanal, Schlichtungsstelle. Alles transparent dokumentiert.
Was sie richtig machen
Zeigt, dass Barrierefreiheit nicht zu visuell unattraktiven Seiten führen muss. Klare Typografie, ruhiges Layout, alle Inhalte mehrfach zugänglich.
Was sie richtig machen
Premium-Produkte und Barrierefreiheit schließen sich nicht aus. Apple integriert Accessibility als Designprinzip, nicht als nachträgliches Add-on.
Was sie richtig machen
Das GOV.UK Design System ist Open Source und einer der besten Referenzen für barrierefreie Web-Komponenten überhaupt. Frei nutzbar.
Was sie richtig machen
Medienhäuser können von BBC lernen, wie Multimedia-Inhalte für jeden zugänglich werden, ohne den visuellen Anspruch zu verlieren.
Was sie richtig machen
Beweist, dass massive Skalierung und Barrierefreiheit zusammen gehen. Über 6 Millionen Artikel pflegen, alle einer einheitlichen Struktur folgend.
Was sie richtig machen
Auch wenn die Marken völlig unterschiedlich sind, finden sich diese acht Bausteine auf allen guten barrierefreien Websites.
Jedes interaktive Element zeigt deutlich an, wenn es fokussiert ist. Kein outline:none ohne Ersatz.
Beim ersten Tab erscheint 'Zum Hauptinhalt springen'. Tastaturnutzer überspringen Header und Navigation.
H1, dann H2, dann H3. Keine ausgelassenen Ebenen. Screenreader haben damit eine navigierbare Inhaltsstruktur.
'Geschäftsführer Max Müller im Interview' statt 'IMG_3847.jpg' oder gar nichts.
Label oberhalb oder neben dem Feld, nicht nur Placeholder. Fehlermeldungen klar und konkret.
Menü-Reihenfolge und Beschriftung bleibt auf allen Seiten gleich. Vorhersehbarkeit erleichtert Orientierung.
Pflicht nach BFSG. Mit Konformitätsstand, bekannten Lücken und Kontakt für Feedback.
Nicht nur Text, auch Buttons, Inputs und Border-Lines erreichen mindestens 3:1.
Auch große, technisch ausgereifte Websites haben blinde Flecken. Diese sechs Fehler sind Klassiker und fallen erst beim manuellen Audit auf.
Overlays beheben keine Probleme, sie verstecken sie. Marktwächter warnen ausdrücklich davor.
Auto-rotierende Slider sind oft Tastaturfallen und verletzen WCAG 2.2.2.
Untagged PDFs sind für Screenreader unzugänglich. Pflicht: PDF/UA.
Reine Icons brauchen aria-label. 'Hörer-Icon' allein hilft Screenreadern nicht.
Viele Banner blockieren Tab-Navigation oder lassen sich nicht per Escape schließen.
Fokus muss in den Dialog wandern, beim Schließen zurück zum Auslöser.
Die Website der Aktion Mensch wird häufig als Referenz genannt. Sie kombiniert hohe WCAG-Konformität mit Leichter Sprache und Gebärdensprache-Videos. Auch bund.de und die Seiten einzelner Bundesländer (z.B. bayern.de mit ihrem Accessibility-Schwerpunkt) sind gute Lernreferenzen.
Teilweise. Amazon, Otto und Zalando haben Fortschritte gemacht, sind aber nicht durchgängig WCAG 2.2 AA konform. Internationale Vorbilder wie Apple oder Microsoft setzen den Standard höher. Für deutsche Mittelstand-Shops besteht großer Aufholbedarf.
Mehrere Indikatoren: Erklärung zur Barrierefreiheit im Footer, sichtbarer Fokus bei Tab-Navigation, Skip-Link beim ersten Tab, Alt-Texte mit Inhalt (mit Rechtsklick prüfen), keine reinen Icon-Buttons ohne aria-label, Formulare mit sichtbaren Labels. Unser Tool prüft die wichtigsten Punkte automatisch.
Ja. Apple, Stripe, Slack und viele andere zeigen, dass Premium-Design und Barrierefreiheit sich nicht ausschließen. Im Gegenteil: konsequente Hierarchie, klarer Fokus und reduzierte Komplexität sind sowohl gutes Design als auch Accessibility-Voraussetzung.
Kontakt
Sie haben eine Idee, ein Projekt oder einfach nur eine Frage? Wir freuen uns auf Ihre Nachricht.
0521 98 99 40 99
hello@pakumedia.de