Was barrierefreie und nachhaltige Webseiten verbindet

96,3 Prozent der meistbesuchten Webseiten weltweit verstoßen gegen Barrierefreiheits-Richtlinien – und viele davon wären mit ein paar Zeilen Code lösbar. Designerin Annika Brinkmann erklärt, warum sauberes HTML nicht nur Menschen mit Einschränkungen hilft, sondern auch Suchmaschinen, Servern und unserem Planeten. Plus: Was es mit ihrem RIAN-Framework auf sich hat und warum ihr Projekt Barrieren-Fasten genau zum richtigen Zeitpunkt startet.

96,3 Prozent – eine ernüchternde Zahl

WebAIM untersucht jährlich die eine Million meistgeklickten Webseiten der Welt. Das Ergebnis seit Jahren: 96,3 Prozent davon haben messbare Fehler nach den WCAG-Richtlinien. Kein Ausreißer, sondern ein Dauerzustand. Dabei sind die häufigsten Probleme keine Rocket Science: zu wenig Kontrast zwischen Text und Hintergrund, fehlende Alt-Texte bei Bildern, Formulare ohne Labels. Dinge, die sich in Minuten beheben lassen – wenn man weiß, worauf man achten muss.

Genau da setzt Annika Brinkmann an. Als Designerin für digitale Barrierefreiheit hat sie irgendwann aufgehört, auf Kundenwunsch zu warten, und macht seither grundsätzlich nur noch barrierefreie Webseiten. Punkt.

Warum barrierefreie Websites automatisch nachhaltiger sind

Das Gespräch mit Annika hat mir nochmals bestätigt, was ich in meiner Beratung immer wieder erlebe: Wer konsequent auf sauberes, semantisches HTML und kaskadierendes CSS setzt, spart automatisch Kilobytes ein. Keine verschachtelten Div-Wüsten, kein aufgeblähtes Framework-CSS, das für jede Klasse einzeln geladen wird – stattdessen schlanker Code, der auch für Screenreader und Suchmaschinen lesbar ist.

Umgekehrt gilt das leider nicht: Eine CO₂-optimierte Website ist nicht zwingend barrierefrei. Barrierefreiheit hat also den größeren Hebel – sie zieht Nachhaltigkeit quasi mit.

Tipp

Starte mit den Low-Hanging Fruits: Prüf Kontraste mit dem WebAIM Contrast Checker, ergänze Alt-Texte bei allen inhaltlichen Bildern, und gib jedem Formularfeld ein sichtbares <label>. Das sind die häufigsten Fehler – und alle lassen sich heute noch beheben.

RIAN: Responsive to Individual Accessibility Needs

Annikas RIAN-Framework denkt Barrierefreiheit weiter als die klassischen WCAG-Kriterien. Statt einer einheitlichen Ansicht für alle passt sich die Website an das an, was Nutzende in ihrem Betriebssystem oder Browser eingestellt haben – Dark Mode, reduzierte Bewegung, höherer Kontrast, kleinere Dateimengen. Das funktioniert am besten mit purem HTML und nativem CSS, weil man dann direkt auf diese Systemeinstellungen reagieren kann. Frameworks wie Tailwind oder Bootstrap, die alles über Klassennamen steuern, machen genau das unnötig schwer.

Besonders spannend: Mit dem CSS-Feature prefers-reduced-data könnte man künftig auch Schriftdateien oder Bilder nur dann laden, wenn ausreichend Datenvolumen vorhanden ist – ein direkter Brückenschlag zur Nachhaltigkeit.

Der European Accessibility Act kommt – bist du bereit?

Ab Juni 2025 gilt der European Accessibility Act auch für private Unternehmen. Wer digitale Produkte und Dienstleistungen in der EU anbietet, muss Barrierefreiheit nachweisbar umsetzen – oder riskiert Strafzahlungen. Annikas Countdown-Seite online-accessibility-countdown.eu zeigt, wie viel Zeit noch bleibt.

Die meisten Unternehmen unterschätzen den Aufwand – nicht weil Barrierefreiheit so komplex ist, sondern weil jahrelang geschlampter Code jetzt aufgeräumt werden muss.

Barrieren-Fasten: jeden Tag eine Zeile Code verbessern

Pünktlich zur Fastenzeit startet Annikas Projekt Barrieren-Fasten: Jeden Tag eine Zeile HTML unter die Lupe nehmen, von der Doctype-Deklaration bis zum Footer. Kein wochenlanges Refactoring-Projekt, sondern eine Barriere pro Tag – mit Erklärung, warum sie schadet und für wen. Nebenbei kommen immer wieder Nachhaltigkeits-Aspekte rein, zum Beispiel tote Preload-Links, die auf 5-MB-Fehlerseiten zeigen.

Das Prinzip überzeugt mich: Wer jeden Tag eine Sache verbessert, hat in 40 Tagen 40 Barrieren weniger. Und 40 Gründe mehr, warum Menschen auf seiner Website bleiben – und wiederkommen.

Dein heutiger erster Schritt: Öffne deine wichtigste Webseite, ruf den WAVE Accessibility Evaluator auf und schau, welcher Fehler ganz oben steht. Den behebst du noch heute.