Barrierefreies Webdesign ist kein Prüfpunkt nach der Veröffentlichung; es bedeutet, Tastaturnavigation, Fokusmarkierung, Beschriftungen und Textalternativen in die Designentscheidungen einzubeziehen. Dieser Leitfaden hilft Ihnen, diese vier Aufgaben anhand konkreter Beispiele in das Seitenlayout zu integrieren. Ziel ist, dass auch Besucher ohne Maus dieselbe Aufgabe erledigen können.
Barrierefreies Webdesign ist keine Checkliste, die erst geöffnet wird, wenn die Farbpalette feststeht. Tastaturnavigation, eine dauerhaft sichtbare Fokusmarkierung, Formularbeschriftungen und Textalternativen sind Designentscheidungen, die ebenso früh getroffen werden wie Entscheidungen zu Raster, Abständen und Typografie.
Dieser Leitfaden behandelt Barrierefreiheit nicht als nachträgliche Korrektur, sondern anhand von Fokus, Beschriftung, Textalternativen und Navigationsreihenfolge. Ein Ablauf, der mit der Maus klar erkennbar ist, muss auch einer Person, die ausschließlich mit der Tab-Taste navigiert, ermöglichen, dieselbe Aufgabe zu erledigen.
Warum barrierefreies Webdesign eine Designaufgabe ist
Wenn sich im Prüfbericht Punkte wie „Fokus nicht sichtbar“, „Menü lässt sich nicht mit der Tastatur öffnen“ oder „Symbol hat keinen Namen“ häufen, ist das Problem nicht technischer Natur: Das Design wurde unvollständig definiert. Diese Aufgaben hängen mit dem Layout der Benutzeroberfläche, dem Verhalten der Komponenten und der Formulierung der Inhalte zusammen.
Legen Sie bereits beim Entwurf vier Aspekte gemeinsam fest:
- Navigationsreihenfolge: Entspricht der Weg mit der Tab-Taste der visuellen Hierarchie?
- Fokus: Ist das aktive Element überall sichtbar, ohne unter überlagernden Leisten zu verschwinden?
- Beschriftung: Stimmt der sichtbare Name einer Schaltfläche, eines Links oder eines Feldes mit dem Namen überein, den assistive Technologien vorlesen?
- Textalternative: Lassen sich die Informationen eines Bildes, Symbols oder Diagramms in Text wiedergeben?
Diese vier Aspekte ermöglichen es, bei vorübergehenden Verletzungen, motorischen Einschränkungen, bevorzugter Tastaturbedienung oder der Nutzung eines Screenreaders dieselbe Aufgabe zu erledigen. Bei einem neuen Webdesign-Projekt diese Aspekte als „Qualitätsarbeit für den letzten Sprint“ zurückzustellen, führt später zu einer Ansammlung fehlerhafter Fokuszustände und leerer Textalternativen.
Stimmen Sie die Tastaturnavigation auf die visuelle Reihenfolge ab
Wer die Tastatur nutzt, überfliegt die Seite nicht visuell, sondern folgt dem Fokus. Der Fokus sollte von links nach rechts, von oben nach unten und zunächst entlang des Weges zur Hauptaufgabe verlaufen. Steht ein Suchfeld visuell links, wird in der Tab-Reihenfolge aber erst ganz am Ende erreicht, sind Design und Verhalten nicht aufeinander abgestimmt.
Betrachten Sie beim Entwurf der Navigationsreihenfolge die folgenden Regeln als Designentscheidungen:
- Nur interaktive Elemente werden mit der Tab-Taste angesteuert: Links, Schaltflächen, Formularfelder, Dropdown-Menüs und Registerkarten.
- Gewöhnlicher Text, die gesamte Fläche einer Karte oder eine dekorative Box erhalten keinen Fokus.
- Die visuelle Reihenfolge entspricht der DOM-Reihenfolge. Die Reihenfolge mit einem positiven tabindex zu „korrigieren“, ist nur eine provisorische Lösung.
- Ein Link, der nach der wiederkehrenden Hauptnavigation direkt zum eigentlichen Inhalt führt, gehört bei langen Kopfbereichen zu den ersten sinnvollen Maßnahmen.
Die gesamte Karte anklickbar zu machen, ist eine häufige Falle. Ist die ganze Karte ein riesiger Link, hält die Tab-Taste bei jeder Karte an; die darin enthaltenen Aktionen „Ansehen“ und „Vergleichen“ werden nicht einzeln vorgelesen. Die einfachere Lösung: Die Karte bildet einen visuellen Rahmen; nur ein eindeutig benannter Link oder eine Schaltfläche erhält den Fokus. So bleibt die Reihenfolge kurz und die Bezeichnung klar.
Benutzerdefinierte Komponenten, Menüs und Fokusfallen
Ein fertiges Dropdown-Menü, ein Datumswähler oder ein benutzerdefiniertes Auswahlfeld kann bei Mausbedienung einwandfrei wirken. Für die Tastatur ist eine eigene Zustandslogik erforderlich: Enter oder Space öffnet die Auswahl, die Pfeiltasten navigieren durch die Optionen, Escape schließt sie, und der Fokus kehrt zum auslösenden Element zurück. Das sind keine „Mikroanimationen“, sondern verbindliche Interaktionsregeln.
Außer bei modalen Dialogen und seitlich eingeblendeten Panels werden keine Fokusfallen eingerichtet. Wenn sich ein Dialog öffnet, wird der Fokus hineinversetzt; mit Tab wird innerhalb des Dialogs navigiert. Nach dem Schließen kehrt der Fokus zum auslösenden Bedienelement zurück. Wenn die Seite im Hintergrund weiterhin per Tab erreichbar ist, verlieren Nutzer die Orientierung. Dieses Verhalten gilt auch in Webdesign-Projekten für Unternehmen, etwa für das Angebotsformular, das Cookie-Panel oder die Sprachauswahl.
Eine fixierte obere Leiste verdeckt den fokussierten Link. Planen Sie im Design einen Innenabstand oder einen Scroll-Abstand in Höhe der Leiste ein. Wenn der Fokus zwar „vorhanden“, aber nicht sichtbar ist, existiert dieses Bedienelement für Tastaturnutzer praktisch nicht.
Halten Sie die Fokusmarkierung sichtbar und konsistent
Das Entfernen des standardmäßigen Fokusrahmens verspricht bei Mausbedienung ein „aufgeräumteres“ Erscheinungsbild; bei Tastaturbedienung verschwindet dadurch jedoch die Kennzeichnung des aktiven Elements. Wenn Sie den Rahmen entfernen, ersetzen Sie ihn durch einen mindestens ebenso deutlich sichtbaren Fokusring, der zu Ihrer Marke passt. Eine Hover-Farbe ersetzt keinen Fokus: Hover hängt von der Maus ab, der Fokus dient der Tastaturbedienung.
Der Gestaltungshinweis zum Fokusring kann kurz ausfallen:
- Der Ring hebt sich sowohl von hellen als auch von dunklen Hintergründen ab.
- Linienstärke und Abstand verhindern, dass eine dünne Linie untergeht.
- Auf der gesamten Website wird dieselbe Gestaltungssprache verwendet; ein Ring auf einer Seite und keinerlei Kennzeichnung auf einer anderen beeinträchtigen das Vertrauen.
- Der Fokus wird nicht durch abgerundete Ecken oder Schatten abgeschnitten.
Bei KepezWeb-Projekten darf der Fokusring nicht als bloßes „Entwicklerdetail“ behandelt werden. Schaltflächen, Links, Tabs, Bedienelemente innerhalb von Karten und Formularfelder gehören zur selben Gestaltungsfamilie. In der Komponentenbibliothek werden hover, active und focus getrennt gestaltet; focus ist keine „blasse Version von active“.
Dunkle Abschnitte, Text auf Bildern und halbtransparente Ebenen bergen jeweils eigene Risiken für den Fokus. Eine helle Schaltfläche im Hero-Bereich ist auf einem dunklen Foto bei Mausbedienung gut lesbar; verschmilzt der Fokusring jedoch mit dem Foto, verlieren Tastaturnutzer die Orientierung. Die Fokusfarbe wird für den Hintergrund des jeweiligen Blocks gesondert festgelegt.
Textalternativen: Wann Sie sie formulieren und wann Sie sie leer lassen
Ein Alternativtext überträgt die Funktion eines Bildes in Text. Es geht nicht darum, für jedes Bild einen langen Satz zu schreiben. Die entscheidende Frage lautet: Vermittelt die Seite ohne dieses Bild dieselben Informationen?
- Informative Abbildung: Produkt, Team, Büro, Infografik, Diagramm. Der Alternativtext benennt kurz die Informationen, die das Bild vermittelt. „Bild1.jpg“ oder „Produktfoto“ sind keine aussagekräftigen Informationen.
- Dekorative Abbildung: Atmosphäre, Textur, ein Muster zum Füllen einer Fläche. Der Alternativtext bleibt leer; der Screenreader überspringt das Bild.
- Bild, das Text wiederholt: Wenn dieselbe Überschrift bereits daneben steht, erzeugt das erneute Vorlesen des Bildes unnötige Wiederholungen.
- Symbol mit einer Funktion: Lupe, Warenkorb, Schließen, Teilen. Benannt wird nicht das Bild, sondern das Bedienelement: „Suchen“, „Warenkorb“, „Schließen“.
Ein komplexes Diagramm lässt sich nicht in einem einzigen Satz beschreiben. Ein kurzer Alternativtext benennt das Thema; die eigentlichen Daten stehen in einer Tabelle oder in einer Zusammenfassung direkt darunter. „Diagramm, das steigende Umsätze zeigt“ reicht nicht aus; der betreffende Zeitraum und die dargestellten Vergleiche müssen im Text genannt werden.
Ein Bild innerhalb eines Links birgt eine weitere Falle. Führt das Logo zur Startseite, ist der Alternativtext der Markenname und nicht „Logo“. Ist ein Produktbild verlinkt, wiederholt der Alternativtext nicht einfach die Produktbezeichnung; wenn der Link dazu dient, „zu den Produktdetails zu gelangen“, wird dieser Zweck durch sichtbaren Text oder einen zugänglichen Namen vermittelt. Dieselbe Logik hilft auch bei einem technischen SEO-Audit weiter: Ein leerer oder sich wiederholender Alternativtext beeinträchtigt sowohl die Nutzung assistiver Technologien als auch die Einordnung des Bildes in seinen Kontext.
Symbolschaltflächen und rein visuelle Handlungsaufforderungen
Ein Symbol ohne Text mag bei Mausbedienung „verständlich“ sein. Fehlt jedoch eine sichtbare Bezeichnung, bleibt das Bedienelement für die Tastatur- und Screenreader-Nutzung stumm. Herz-, Dreipunkt-, Pfeil- und Schließen-Symbole erhalten entweder einen kurzen Begleittext oder einen konsistenten zugänglichen Namen. Dieser Name darf der sichtbaren Beschriftung nicht widersprechen: Eine Schaltfläche mit der sichtbaren Aufschrift „Senden“ sollte im Hintergrund nicht als „Formular übermitteln“ vorgelesen werden.
Wird ein Hintergrundbild über CSS eingebunden, hat es kein alt-Attribut. Sind Informationen in dieses Bild eingebettet, übertragen Sie sie in HTML-Text. Stehen das Aktionsdatum, ein Preis oder ein Warnhinweis ausschließlich im Bild, ist dieser Inhalt für Menschen, die das Bild nicht sehen können, praktisch nicht vorhanden. Betten Sie veränderliche Angaben wie Preise oder Laufzeiten nicht in Bilder ein; halten Sie sie in der Textebene.
Beschriftung, zugänglicher Name und Sprunglink
Die sichtbare Beschriftung ist die Quelle des zugänglichen Namens. Platzhaltertext ersetzt keine Beschriftung. Ein Platzhalter mit „Ihr Name“ verschwindet, sobald das Feld ausgefüllt ist; bei einem Fehler können Nutzer nicht mehr erkennen, wonach Sie gefragt haben. Die Beschriftung bleibt außerhalb des Feldes sichtbar und wird programmatisch mit ihm verknüpft; die Fehlermeldung beschreibt das betreffende Feld.
ARIA-Attribute ersetzen kein semantisches HTML. Eine Schaltfläche ist eine Schaltfläche, ein Link ist ein Link. Ein anklickbares div nachträglich um Tastaturbedienung und einen Namen zu ergänzen, ist aufwendiger, als von Anfang an das richtige Element zu wählen. Verwenden Sie ARIA, um bei einer tatsächlich benutzerdefinierten Komponente fehlende Semantik zu ergänzen.
Ein Sprunglink („Zum Inhalt springen“) ist das erste fokussierbare Element und wird sichtbar, sobald er den Fokus erhält. Ein Sprunglink, der unsichtbar bleibt und auch beim Fokussieren nicht erscheint, ist praktisch wirkungslos. Auf langen Unternehmensseiten erspart dieses kleine Bedienelement, jedes Mal das gesamte Menü durchlaufen zu müssen.
Auch die Sprachangabe, die Überschriftenhierarchie und Landmarks unterstützen die Navigation. Eine bloße Ansammlung von h2-Elementen oder drei Bereiche mit der Bezeichnung „Hauptinhalt“ beeinträchtigen sowohl die Tastaturnavigation als auch die Überschriftenliste des Screenreaders. Eine Überschrift ist keine Frage der visuellen Größe, sondern ein Strukturmerkmal; großer Text muss kein Überschriftenelement sein, während auch eine kleine Beschriftung eine echte Überschrift sein kann.
Was Sie bereits beim Entwurf prüfen sollten
Der folgende Vergleich fasst zusammen, welche Entscheidungen bereits im Design getroffen werden sollten und wo sonst nachträgliche Korrekturen nötig werden.
| Entscheidung | Im Design festlegen | Nachträgliche Korrektur |
|---|---|---|
| Navigationsreihenfolge | Visuelle Hierarchie und DOM-Reihenfolge werden übereinstimmend geplant | Die Reihenfolge wird mit tabindex und unsichtbaren Fokuspunkten erzwungen |
| Fokusring | Unabhängig vom Hover-Zustand auf allen Komponenten sichtbar | Der Rahmen wird entfernt und später auf einer einzelnen Seite wieder ergänzt |
| Alternativtext | Die Funktion des Bildes (Information / Dekoration / Bedienelement) wird beschrieben | Ein Dateiname oder die nichtssagende Bezeichnung „Bild“ wird eingefügt |
| Beschriftung und Name | Sichtbarer Text und zugänglicher Name stimmen überein | Es bleibt nur ein Platzhalter oder ein Symbol |
| Fenster und Menü | Es gibt einen festgelegten Vertrag für Öffnen, Schließen und die Rückgabe des Fokus | Lässt sich mit der Maus schließen, Escape und Tab funktionieren nicht |
Prüfen Sie dies, indem Sie die Maus ausstecken. Erledigen Sie die Hauptaufgabe ausschließlich mit der Tastatur: vom Menü zur Dienstleistung wechseln, das Formular absenden, den Hauptlink einer Karte öffnen, den modalen Dialog schließen. Geht an einer Stelle der Fokus verloren, springt die Reihenfolge zurück oder wird der Name nicht vorgelesen, fehlt kein „Barrierefreiheits-Plugin“, sondern ein verbindlicher Gestaltungsvertrag für diese Komponente.
Jede Aufgabe, die mit der Maus erledigt wird, muss auch mit der Tastatur in derselben Reihenfolge und mit derselben Benennung erledigt werden können.
Häufig gestellte Fragen
Ist Barrierefreiheit nur für Menschen mit dauerhaften Behinderungen gedacht?
Nein. Ein gebrochener Arm, grelles Sonnenlicht, eine defekte Maus oder die Gewohnheit, ausschließlich die Tastatur zu nutzen, machen dieselben Lücken sichtbar. Schließt das Design diese Lücken von Anfang an, ist die Aufgabe nicht auf eine einzige Eingabemethode beschränkt.
Schadet das Entfernen des Fokusrahmens der Marke?
Den Rahmen ersatzlos zu entfernen, schadet; ein konsistenter, zur Marke passender Fokusring dagegen nicht. Den Hover-Stil als Fokusdarstellung zu verwenden, reicht nicht aus. Der Ring wird auf dunklen und hellen Hintergründen jeweils gesondert geprüft.
Braucht jedes Bild einen Alternativtext?
Nein. Informative Bilder erhalten einen kurzen, zutreffenden Alternativtext. Bei dekorativen Bildern bleibt er leer. Befindet sich ein Icon in einer Schaltfläche, wird nicht das Bild beschrieben, sondern das Bedienelement benannt.
Macht die Verwendung von Aria eine Seite barrierefrei?
Allein nicht. Das richtige HTML-Element, eine sichtbare Beschriftung, die Tastaturreihenfolge und ein sichtbarer Fokus leisten die eigentliche Arbeit. Aria soll verbleibende Lücken in individuellen Komponenten schließen; falsch eingesetztes Aria kann verwirrender sein als ein Bedienelement, dessen Name nicht vorgelesen wird.
Wann sollten Sie dies testen?
Sobald die Komponente erstmals entworfen wird. Gehen Sie Menü, Formular, modalen Dialog und Kartenvorlage mit der Tastatur durch, bevor diese freigegeben werden. Ein einzelner Scan vor der Veröffentlichung kann versäumte frühe Entscheidungen zu Fokus und Beschriftung nicht kostengünstig korrigieren.
Wenn Sie bei einer neuen Website oder einem Relaunch Tastaturreihenfolge, Fokusring und Textalternativen von Anfang an verbindlich festlegen möchten, klären Sie den Umfang mit dem KepezWeb-Team. Um passend zu Ihrem Bedarf ein Angebot zu erhalten, genügt eine kurze Nachricht.
