Barrierefreiheit
Was die Befunde der Barrierefreiheits-Prüfung bedeuten und wie du sie behebst. Die Themen folgen den Kategorien des Reports.
Struktur und Sprache
Was das lang-Attribut macht
Das lang-Attribut im html-Element sagt, in welcher Sprache eine Seite geschrieben ist. Screenreader wählen danach die Aussprache, Browser und Übersetzungsdienste die Sprache.
Wie Überschriften eine Seite gliedern
Überschriften von h1 bis h6 bilden das Inhaltsverzeichnis einer Seite. Wer einen Screenreader nutzt, springt damit von Abschnitt zu Abschnitt, statt alles anzuhören.
Was Landmarken sind
Landmarken teilen eine Seite in Bereiche wie Kopf, Navigation, Hauptinhalt und Fuß. Screenreader und Tastatur springen damit direkt dorthin, wo der Inhalt beginnt.
Bilder und Medien
Was gute Alternativtexte ausmacht
Ein Alternativtext ersetzt ein Bild für alle, die es nicht sehen, und für Suchmaschinen. Er sagt in wenigen Worten, was das Bild an dieser Stelle aussagt.
Warum iframes einen Titel brauchen
Ein iframe bettet eine fremde Seite ein, etwa eine Karte, ein Video oder ein Formular. Sein Titel sagt Screenreader-Nutzern, was darin steckt, bevor sie hineingehen.
Was Untertitel und Transkripte leisten
Untertitel machen Videos für Menschen verständlich, die nicht oder schlecht hören, Transkripte machen es Audio. Dazu gehört, dass nichts von selbst mit Ton losspielt.
Bedienung und Formulare
Was gute Linktexte ausmacht
Ein guter Linktext sagt, wohin der Link führt, auch ohne den Text drumherum. Links, die nur aus einem Icon bestehen, brauchen einen Namen, den der Screenreader vorlesen kann.
Warum Schaltflächen einen Namen brauchen
Eine Schaltfläche ohne Namen wird nur als „Schalter“ angesagt, und niemand weiß, was sie tut. Icon-Buttons für Menü, Suche oder Schließen brauchen deshalb einen Namen im Code.
Was Formularfelder brauchen
Jedes Formularfeld braucht eine sichtbare Beschriftung, die im Code mit dem Feld verbunden ist. Felder für persönliche Angaben bekommen zusätzlich autocomplete, damit der Browser sie ausfüllen kann.
Wie eine Seite mit der Tastatur bedienbar wird
Viele Menschen bedienen Seiten ohne Maus, mit Tabulator, Enter und Pfeiltasten. Dafür muss jedes Bedienelement erreichbar sein, in sinnvoller Reihenfolge, und der Fokus muss sichtbar sein.
ARIA
Wann ARIA hilft und wann es schadet
ARIA sind Attribute, die Screenreadern sagen, was ein Element ist und in welchem Zustand. Richtig eingesetzt schließt es Lücken von HTML, falsch eingesetzt versteckt oder verfälscht es Inhalte.
Was ARIA-Verweise und eindeutige IDs brauchen
Beschriftungen und Beschreibungen verweisen über IDs auf andere Elemente. Das klappt nur, wenn es die ID gibt und sie auf der Seite nur einmal vorkommt.
Darstellung
Was ausreichender Kontrast ist
Kontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund. Normaler Text braucht mindestens 4,5:1, große Schrift 3:1, damit ihn auch Menschen mit Sehschwäche lesen können.
Wie groß Klickflächen sein müssen
Links und Buttons müssen groß genug sein oder genug Abstand haben, damit man sie sicher trifft. WCAG 2.2 verlangt mindestens 24 × 24 Pixel oder entsprechenden Freiraum.
Was Reflow bei Vergrößerung bedeutet
Reflow heißt, dass der Inhalt bei starker Vergrößerung in eine Spalte umbricht, statt seitlich aus dem Bild zu laufen. Bei 320 Pixel Breite darf man nicht waagrecht scrollen müssen.