Technik & Umsetzung

Reflow bedeutet, dass sich Inhalte ohne horizontales Scrollen anpassen, wenn jemand stark hineinzoomt oder einen schmalen Bildschirm nutzt. Text und Elemente brechen dann einspaltig um. WCAG verlangt das bis zu einer Breite von 320 CSS-Pixeln. So bleiben Seiten auch bei 400 Prozent Vergrößerung lesbar, ohne ständiges Hin- und Herschieben.

Der Accessible Name ist der Name, den ein Bedienelement gegenüber assistiven Technologien trägt. Er wird vom Browser nach festen Regeln berechnet, etwa aus Label, Beschriftung oder aria-label. Screenreader lesen diesen Namen vor, damit Nutzer wissen, was ein Button oder Link bewirkt.

Der Farbkontrast beschreibt, wie stark sich Text und Hintergrund in der Helligkeit unterscheiden. Gemessen wird er als Kontrastverhältnis von 1:1 bis 21:1. Normaler Text braucht mindestens 4,5:1, großer Text 3:1. Ausreichender Kontrast macht Inhalte für Menschen mit Sehschwäche und bei schlechten Lichtverhältnissen lesbar.

Die Zielgröße beschreibt, wie groß klickbare Elemente wie Buttons und Links sein müssen, damit sie sich sicher treffen lassen. WCAG 2.2 fordert mindestens 24 mal 24 CSS-Pixel. Das hilft Menschen mit motorischen Einschränkungen, Zittern oder kleinen Touchscreens, Bedienelemente zuverlässig zu treffen.

Die Tab-Reihenfolge bestimmt, in welcher Abfolge die Tastatur durch die Elemente einer Seite springt. Standardmäßig folgt sie der Reihenfolge im HTML-Code. Mit dem Attribut tabindex kannst du Elemente fokussierbar machen oder aus dem Fokus nehmen. Die Reihenfolge sollte immer der sichtbaren, logischen Lesefolge entsprechen.

Die Überschriftenstruktur ordnet den Inhalt einer Seite mit den Ebenen H1 bis H6 hierarchisch. Sie bildet das Gerüst, an dem sich Screenreader-Nutzer orientieren und durch die Seite springen. Eine logische, lückenlose Hierarchie macht Inhalte erfassbar, ohne die ganze Seite lesen zu müssen.

Tastaturbedienbarkeit bedeutet, dass sich eine Website vollständig ohne Maus bedienen lässt – nur mit Tab, Enter, Leertaste und Pfeiltasten. Davon profitieren blinde Nutzer, Menschen mit motorischen Einschränkungen und alle, die keine Maus nutzen können. Jede Funktion, die per Maus erreichbar ist, muss auch per Tastatur funktionieren.

Die Sprachauszeichnung legt mit dem lang-Attribut fest, in welcher Sprache der Inhalt einer Seite oder eines Abschnitts verfasst ist. Screenreader nutzen diese Angabe, um den Text mit der richtigen Aussprache vorzulesen. Ohne korrekte Auszeichnung klingt fremdsprachiger Inhalt unverständlich.

Ein Transkript ist die vollständige Textfassung eines Audio- oder Videoinhalts. Es gibt das Gesprochene und wichtige Geräusche oder visuelle Vorgänge in Textform wieder. So können gehörlose, sehbehinderte und taubblinde Menschen den Inhalt lesen, statt ihn zu hören oder zu sehen.

Der Fokus-Indikator ist die sichtbare Markierung, die zeigt, welches Element gerade per Tastatur ausgewählt ist – meist ein Rahmen oder Ring um Links und Buttons. Ohne ihn weiß niemand, der mit Tab navigiert, wo er sich befindet. Browser zeigen ihn standardmäßig an. Ihn zu entfernen, ist ein häufiger und schwerer Fehler.

Audiodeskription ist eine zusätzliche Tonspur, die wichtige visuelle Informationen eines Videos in Worte fasst. In Sprechpausen beschreibt eine Stimme, was im Bild passiert. So können blinde und sehbehinderte Menschen der Handlung folgen, auch wenn sie das Bild nicht sehen.

ARIA-Landmarks gliedern eine Seite in benannte Bereiche wie Banner, Navigation, Hauptinhalt und Fußzeile. Screenreader-Nutzer springen damit direkt zwischen diesen Bereichen, ohne alles durchzulesen. Die meisten Landmarks entstehen automatisch aus semantischen HTML-Elementen wie header, nav, main und footer.

Untertitel sind eingeblendete Texte, die das Gesprochene und wichtige Geräusche eines Videos wiedergeben. Sie ermöglichen gehörlosen und schwerhörigen Menschen, Videoinhalte zu verstehen. Im Gegensatz zu einer reinen Übersetzung enthalten echte Untertitel auch Hinweise auf Sprecher und Klänge.

Eine Sprungmarke (Skip-Link) ist ein Link am Seitenanfang, mit dem Tastatur- und Screenreader-Nutzer wiederkehrende Bereiche überspringen. Statt sich durch Logo und Hauptmenü zu tabben, springen sie direkt zum Inhalt. Der Link ist meist unsichtbar und wird erst beim Tastatur-Fokus eingeblendet. Er erfüllt das WCAG-Kriterium Blöcke umgehen.

prefers-reduced-motion ist eine CSS-Media-Feature, mit der eine Website erkennt, ob ein Nutzer im Betriebssystem weniger Bewegung wünscht. Ist die Einstellung aktiv, schaltet die Seite Animationen ab oder reduziert sie. Das hilft Menschen, die durch Bewegung Schwindel oder Übelkeit bekommen.

Eine ARIA-Live-Region sorgt dafür, dass Screenreader dynamische Änderungen auf einer Seite vorlesen, ohne dass der Fokus dorthin springt. Du markierst einen Bereich mit aria-live. Sobald sich sein Inhalt ändert, wird er angesagt. Typisch für Statusmeldungen, Warenkorb-Updates oder Formular-Fehler, die ohne Seitenreload erscheinen.

Fehleridentifikation bedeutet: Wenn ein Nutzer in einem Formular einen Eingabefehler macht, wird das fehlerhafte Feld klar benannt und der Fehler in Textform beschrieben. So wissen auch Menschen mit Sehbehinderung genau, was falsch ist und wo sie korrigieren müssen.

Ein ARIA-Label gibt einem Element einen barrierefreien Namen, wenn sichtbarer Text fehlt. Du setzt es über das Attribut aria-label und schreibst den Namen direkt hinein. Screenreader lesen diesen Text vor. Typisch für reine Icon-Buttons ohne Beschriftung – etwa ein Lupensymbol für die Suche oder ein X zum Schließen.

Formular-Labels sind Beschriftungen, die einem Eingabefeld eindeutig sagen, was dort eingegeben werden soll. Sie werden technisch mit dem Feld verknüpft, damit Screenreader sie vorlesen. Ohne Label wissen Nutzer mit Sehbehinderung nicht, ob sie Name, E-Mail oder Telefonnummer eingeben sollen.

Der Alternativtext beschreibt ein Bild in Worten. Er steht im alt-Attribut und wird vorgelesen, wenn jemand das Bild nicht sehen kann – etwa mit einem Screenreader oder bei langsamer Verbindung. Ein guter Alt-Text vermittelt denselben Sinn wie das Bild. Rein dekorative Bilder bekommen ein leeres alt-Attribut.

Textvergrößerung beschreibt die Fähigkeit einer Website, Text auf bis zu 200 Prozent zu vergrößern, ohne dass Inhalte oder Funktionen verloren gehen. Menschen mit Sehbehinderung stellen die Schriftgröße im Browser größer. Die Seite muss lesbar bleiben und darf nichts abschneiden oder überlappen.

Semantisches HTML bedeutet, dass du HTML-Elemente nach ihrer Bedeutung einsetzt und nicht nach ihrem Aussehen. Ein Button ist ein , eine Überschrift ein , eine Liste ein . So verstehen Browser, Suchmaschinen und Screenreader deinen Inhalt korrekt. Das ist die Grundlage für jede barrierefreie Website.