Barrierefreie Website: Die Basics, die jede kleine Seite umsetzen kann

Barrierefreiheit bedeutet, dass möglichst alle Menschen deine Seite nutzen können: mit Screenreader, ohne Maus, bei schlechtem Sehen oder auf einem Handy in der prallen Sonne. Vieles davon kostet nichts außer Aufmerksamkeit.

Warum das auch dich betrifft

Menschen mit Einschränkungen sind keine kleine Randgruppe. Dazu zählen Blinde und Sehbehinderte, Menschen mit Farbfehlsichtigkeit, Gehörlose, Menschen mit motorischen Einschränkungen oder Lernschwierigkeiten, aber auch Ältere, jemand mit gebrochenem Arm oder mit einem Bildschirm im Gegenlicht. Was für sie besser wird, hilft fast immer allen.

Dazu kommt der rechtliche Rahmen. Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, die sich an Verbraucher richten, darunter Angebote des Online-Handels. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Als Kleinstunternehmen gilt, wer weniger als 10 Beschäftigte hat und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme erreicht. Ob und wie das Gesetz deinen konkreten Fall betrifft, lässt sich hier nicht beantworten, das ist keine Rechtsberatung. Wenn du einen Online-Shop betreibst oder unsicher bist, lass es prüfen, zum Beispiel bei einer Beratungsstelle oder bei fachkundigen Juristen.

Ein Verein oder eine Handwerkerseite ohne Verkauf ist häufig nicht direkt betroffen. Trotzdem lohnt es sich: Die folgenden Grundlagen sind gute Praxis und meist in einem Nachmittag umgesetzt.

Überschriften: die Gliederung, die Programme lesen

Screenreader-Nutzer springen oft von Überschrift zu Überschrift, so wie andere den Text überfliegen. Damit das funktioniert, brauchst du echte Überschriften und keine fett gedruckten Zeilen.

• Pro Seite genau eine Hauptüberschrift, darunter Zwischenüberschriften in sinnvoller Reihenfolge.
• Keine Ebenen überspringen, nur weil dir die Schriftgröße besser gefällt. Die Optik regelst du über die Vorlage.
• Überschriften sollen den Abschnitt beschreiben. „Mehr“ oder „Infos“ sagen wenig, „Anmeldung zum Sommerfest“ dagegen viel.

Alternativtexte für Bilder

Der Alternativtext ersetzt ein Bild für alle, die es nicht sehen. Schreibe kurz auf, was das Bild in diesem Zusammenhang mitteilt, nicht jedes Detail. „Vorstand nach der Wahl“ ist oft besser als „Fünf Personen stehen vor einer Wand“.

• Informative Bilder bekommen einen kurzen, sachlichen Text.
• Rein dekorative Bilder bekommen einen leeren Alternativtext, damit sie übersprungen werden.
• Steckt Text im Bild, etwa auf einem Plakat, muss dieser Text auch im normalen Seitentext stehen. Ein Termin, der nur als Bild existiert, ist für viele unsichtbar.
• Bei Logos mit Link beschreibst du das Ziel („Zur Startseite“), nicht das Aussehen.

Kontrast und Farbe

Hellgrauer Text auf weißem Grund sieht elegant aus und ist für viele kaum lesbar. Achte auf ausreichenden Helligkeitsunterschied zwischen Text und Hintergrund. Dafür gibt es Kontrastprüfer, die dir für zwei Farbwerte ein Verhältnis ausgeben; die gängigen Richtwerte für normalen Text findest du in den Web Content Accessibility Guidelines (WCAG) unter der Stufe AA. Fließtext sollte im Zweifel eher dunkler und größer sein.

Zweite Regel: Verlass dich nie allein auf Farbe. „Pflichtfelder sind rot“ hilft Menschen mit Rot-Grün-Schwäche nicht. Ergänze ein Sternchen oder den Hinweis „Pflichtfeld“ im Text.

Bedienung per Tastatur

Nicht jeder nutzt eine Maus. Probier es selbst aus: Klick mit der Maus einmal in die Adresszeile, dann drück die Tabulatortaste, immer wieder. Die Tab-Taste springt von Link zu Link, mit Enter öffnest du sie.

• Du solltest immer sehen können, wo du gerade bist. Ein deutlicher Fokusrahmen ist wichtig, und du solltest ihn nicht wegdesignen.
• Die Reihenfolge muss logisch sein, von oben nach unten und von links nach rechts.
• Menüs, Aufklapper und Formulare müssen sich ohne Maus bedienen lassen.
• Ein „Zum Inhalt springen“-Link am Anfang erspart Tastaturnutzern, bei jeder Seite das ganze Menü durchzutippen. Viele moderne Vorlagen bringen ihn mit.

Linktexte, Formulare und PDFs

Ein Screenreader kann sich alle Links einer Seite als Liste vorlesen. „Hier klicken“ zehnmal hintereinander ist dann wertlos. Der Linktext soll auch ohne Umgebung verständlich sein: „Beitrittsformular als PDF herunterladen“ statt „Hier“. Gleiche Ziele bekommen gleiche Texte.

Bei Formularen gehört zu jedem Feld eine sichtbare Beschriftung, die mit dem Feld verknüpft ist. Ein Hinweistext, der nur im Feld steht und beim Tippen verschwindet, zählt nicht. Fehlermeldungen sollten sagen, was schiefging und wie es sich beheben lässt, etwa „Bitte gib deine E-Mail-Adresse mit @ an“.

PDFs sind oft ein blinder Fleck. Ein eingescanntes Formular ist für einen Screenreader nur ein Bild. Besser ist ein PDF mit echtem Text, Überschriften und sinnvoller Reihenfolge, wie es gängige Textprogramme beim Exportieren erzeugen können, wenn du Formatvorlagen verwendest. Am einfachsten: Stell den wichtigen Inhalt zusätzlich als normale Webseite bereit und nutze das PDF nur als Zugabe.

Texte, Sprache und Medien

Barrierefreiheit hört nicht bei der Technik auf. Schreibe kurze Sätze und erkläre Fachwörter oder vermeide sie. Das hilft Menschen mit Lernschwierigkeiten, Nicht-Muttersprachlern und allen, die schnell etwas nachlesen wollen. Sprich in Absätzen mit einem Gedanken pro Absatz und nutze Listen, wenn du etwas aufzählst.

Videos brauchen Untertitel, damit Gehörlose und alle, die ohne Ton schauen, folgen können. Bei reinen Tonaufnahmen hilft ein Text zum Nachlesen. Vermeide Inhalte, die sich von selbst bewegen oder blinken, oder gib die Möglichkeit, sie anzuhalten. Und lass keine Musik oder kein Video automatisch beginnen.

Womit du anfängst

Versuch nicht, alles auf einmal zu lösen. Nimm dir die Seiten vor, die die meisten Besucher brauchen, meist Startseite, Kontakt und Anmeldung. Arbeite die Liste ab: Überschriften ordnen, Alternativtexte ergänzen, Kontraste prüfen, per Tastatur testen, Linktexte klären. Neue Inhalte machst du gleich richtig, dann wächst das Problem nicht weiter.

Barrierefreiheit hängt auch von der Grundlage ab. Eine Seite, die auf dem Handy gut funktioniert, hat meist schon einen Teil geschafft; mehr dazu im Beitrag zu responsivem Webdesign. Und ob ein Redaktionssystem gute, zugängliche Vorlagen mitbringt, ist ein wertvolles Kriterium im CMS-Vergleich. Automatische Prüfwerkzeuge finden nur einen Teil der Probleme, manuelle Tests und echte Rückmeldungen ersetzen sie nicht. Biete deshalb auf der Seite einen Kontakt an, über den dir Menschen Barrieren melden können, und nimm diese Hinweise ernst.