Der komplette Leitfaden zur Barrierefreiheit im Web
Von Das AsasWeb-Team 5 Min. Lesezeit
Barrierefreiheit im Web bedeutet, eine Website zu bauen, die alle nutzen können, auch Menschen, die auf eine Tastatur, einen Screenreader, Untertitel oder hohen Kontrast angewiesen sind. Der internationale Standard ist WCAG 2.2 auf Stufe AA, und er ruht auf vier Ideen, dass Seiten wahrnehmbar, bedienbar, verständlich und robust sein müssen. Der Großteil der Arbeit ist grundlegend statt kosmetisch, die richtigen HTML-Elemente, eine sichtbare Fokusreihenfolge, ausreichender Farbkontrast, echte Textalternativen und klare Formulare. Von Anfang an mitgedacht kostet sie wenig, erweitert euer Publikum, senkt das rechtliche Risiko und verbessert nebenbei euer SEO.
Barrierefreiheit im Web ist die Praxis, Websites so zu bauen, dass alle sie nutzen können, auch Menschen mit Behinderungen. Das umfasst eine breite Gruppe: jemanden, der mit der Tastatur statt mit der Maus navigiert, eine Screenreader-Nutzerin, die die Seite hört statt sie zu sehen, eine Person mit Sehschwäche, die starken Kontrast braucht, und alle, die ein Video ohne Ton anschauen. Dieser Leitfaden erklärt, was Barrierefreiheit bedeutet, warum sie eure Aufmerksamkeit verdient und wie ihr dorthin kommt, ganz ohne Fachjargon.
Was Barrierefreiheit eigentlich bedeutet
Die internationale Referenz sind die Web Content Accessibility Guidelines, kurz WCAG. Die aktuelle Version ist WCAG 2.2, und die meisten Organisationen streben Stufe AA an, die Stufe, auf die sich Gesetze wie der European Accessibility Act, in Deutschland umgesetzt im Barrierefreiheitsstärkungsgesetz, beziehen. Ihr müsst die Richtlinien nicht auswendig lernen, aber es hilft, die vier Prinzipien zu kennen, auf denen sie ruhen. Eine Seite sollte sein:
- Wahrnehmbar. Menschen können die Inhalte aufnehmen, ob sie sie sehen, hören oder fühlen. Bilder haben Textalternativen, Videos haben Untertitel, und Text hat genug Kontrast.
- Bedienbar. Menschen können die Seite mit dem nutzen, was sie haben, einer Maus, nur der Tastatur, einem Taster oder der Stimme. Nichts hält sie fest, und nichts hängt von einem Sinn oder einer Handlung ab, die sie nicht ausführen können.
- Verständlich. Die Inhalte lesen sich klar, und die Oberfläche verhält sich vorhersehbar, sodass niemand überrascht oder verwirrt wird.
- Robust. Die Seite ist so gebaut, dass Browser und assistive Technologien, heute und in Zukunft, sie zuverlässig interpretieren können.
Fast alles Praktische in diesem Leitfaden führt auf eine dieser vier Ideen zurück.
Für wen sie gedacht ist
Es liegt nahe, an eine kleine Nutzergruppe zu denken, doch Barrierefreiheit reicht weiter. Rund einer von sechs Menschen lebt mit einer erheblichen Behinderung, und viele weitere profitieren von barrierefreiem Design, ohne sich als behindert zu verstehen: eine ältere Kundin, jemand mit einer vorübergehenden Verletzung, eine Person mit langsamer Verbindung oder alle, die ihr Handy in grellem Sonnenlicht nutzen. Wer für die Ränder baut, verbessert auch die Erfahrung in der Mitte. Untertitel helfen in einem lauten Raum, starker Kontrast hilft auf einem billigen Bildschirm, und eine klare Fokusreihenfolge hilft allen, die die Tastatur bevorzugen.
Die Grundlagen, die am meisten zählen
Die gute Nachricht: Die Arbeit mit der größten Wirkung ist strukturell, nicht dekorativ. Bringt diese Grundlagen in Ordnung, und ihr habt den Großteil des Weges zu AA geschafft.
Nutzt das richtige HTML-Element
Ein echter Button, ein echter Link und eine echte Liste bringen Verhalten und Bedeutung von Haus aus mit, kostenlos. Baut ihr sie aus generischen gestylten Boxen nach, müsst ihr Fokus, Tastaturunterstützung und die korrekte Ansage von Hand nachrüsten, und die meisten Teams übersehen dabei etwas. Das ist die Gewohnheit mit dem höchsten Ertrag in der Barrierefreiheit. Wir behandeln sie ausführlich in warum semantisches HTML noch immer zählt.
Macht alles per Tastatur bedienbar
Viele Menschen nutzen nie eine Maus. Jedes Bedienelement sollte allein mit der Tastatur erreichbar und bedienbar sein, in einer logischen Reihenfolge, mit einem Fokusrahmen, den man tatsächlich sieht. Es ist zugleich der schnellste manuelle Test, den ihr auf eurer eigenen Website durchführen könnt. Siehe Tastaturnavigation, der Test, an dem die meisten Websites scheitern.
Wählt Farben, die alle lesen können
Text braucht genug Kontrast zu seinem Hintergrund, und Farbe darf nie das einzige Mittel sein, mit dem ihr Bedeutung signalisiert. Das ist einer der häufigsten Fehler und einer der am leichtesten zu behebenden, sobald man die Zielwerte kennt. Unser Leitfaden zur Wahl von barrierefreiem Farbkontrast geht die Zahlen durch.
Schreibt echte Textalternativen
Bilder, die Bedeutung tragen, brauchen Alternativtext, damit Screenreader-Nutzer dieselben Informationen erhalten, und dekorative Bilder müssen als dekorativ markiert sein, damit sie übersprungen werden. Guter Alt-Text hilft auch Suchmaschinen, eure Bilder zu verstehen. Siehe Alt-Text für SEO und Barrierefreiheit.
Baut Formulare, die Menschen abschließen können
Formulare sind der Ort, an dem viele Besucher entscheiden, Kunden zu werden. Ein verwirrendes oder unzugängliches Formular kostet euch also direkt. Beschriftete Felder, klare Fehlermeldungen und sinnvolle Gruppierung helfen allen, ans Ziel zu kommen. Wie das geht, erklären wir in barrierefreie Formulare gewinnen mehr Leads.
Warum sie gut für euer Geschäft ist
Barrierefreiheit wird oft als Compliance gerahmt, doch sie ist zuallererst ein größeres Publikum und eine bessere Erfahrung. Eine barrierefreie Website erreicht mehr Kunden, konvertiert mehr von ihnen und setzt euch weniger rechtlichem Risiko aus, während die Gesetze zur Barrierefreiheit in der Europäischen Union und darüber hinaus strenger werden. Den geschäftlichen Nutzen zeigen wir in Barrierefreiheit ist gut fürs Geschäft.
Es gibt auch einen stillen Bonus. Dieselbe Struktur, die assistiver Technologie hilft, aussagekräftige Überschriften, echte Landmarken, beschreibende Links und richtige Alternativen, ist genau das, was Suchmaschinen lesen, um eine Seite zu verstehen. Barrierefreiheit und SEO bauen auf denselben Grundlagen auf, die Arbeit zahlt sich also doppelt aus.
Eine Anmerkung zu E-Commerce
Onlineshops haben besondere Druckpunkte: Produktgalerien, Filter, Variantenauswahl und einen Checkout, der niemanden verlieren darf. Ein unzugänglicher Checkout ist ein abgebrochener Kauf. Wenn ihr online verkauft, deckt die E-Commerce-Checkliste zur Barrierefreiheit die wichtigsten Punkte ab.
Wie ihr testet
Ihr braucht kein Labor, um anzufangen. Eine kurze, wiederholbare Routine findet die meisten Probleme:
- Legt die Maus weg und bewegt euch mit der Tab-Taste durch die ganze Seite. Könnt ihr alles erreichen und nutzen, und seht ihr immer, wo ihr seid?
- Lasst einen automatischen Prüfer wie axe oder Lighthouse laufen. Er findet nicht alles, aber er markiert die offensichtlichen Fehler schnell.
- Prüft euren Farbkontrast gegen die AA-Zielwerte.
- Probiert zehn Minuten lang einen Screenreader aus. Auf den meisten Systemen ist bereits einer eingebaut.
Automatische Werkzeuge finden vielleicht ein Drittel der Probleme, kombiniert sie also mit den manuellen Prüfungen oben. Das Ziel ist keine perfekte Punktzahl, sondern eine Website, die ein echter Mensch tatsächlich nutzen kann.
Womit anfangen
Wenn sich das nach viel anfühlt, startet mit den Grundlagen: korrektes HTML, eine funktionierende Tastaturreihenfolge und ausreichender Kontrast. Diese drei allein räumen die meisten Barrieren aus dem Weg. Arbeitet euch von dort durch Alt-Texte, Formulare und den Rest, als stetige Gewohnheit statt als einmaliges Projekt.
Wenn ihr Unterstützung möchtet: Barrierefreiheit steckt in allem, was wir tun, und wir bieten sie auch als eigene Leistung an. Schaut euch Barrierefreiheit im Web an, oder startet ein Projekt und sagt uns, wo eure Website heute steht.