- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 181 / 193
1.3.1 Info und Beziehungen
Struktur, die auf dem Bildschirm sichtbar ist (Überschriften, Listen, Tabellen, Beschriftungen), muss im Markup stehen, nicht nur im Styling.
/ Was es verlangt
Was eine sehende Person aus dem Layout abliest, muss auch für Software verfügbar sein. Großer fetter Text wirkt wie eine Überschrift, eine eingerückte Spalte wie eine Liste, ein Raster wie eine Tabelle und ein Wort neben einem Feld wie dessen Beschriftung. Sagt das Markup nicht dasselbe, liest ein Screenreader einen gleichförmigen Textstrom vor, und wer ihn nutzt, kann nicht von Überschrift zu Überschrift springen, hört nicht, zu welcher Spalte eine Zelle gehört, und erfährt nicht, wonach ein Formularfeld fragt.
Das Kriterium ist erfüllt, wenn sich jede dieser Beziehungen aus dem Code ermitteln lässt oder im Text steht. Ein Pflichtfeld, das mit dem Wort „Pflichtfeld“ gekennzeichnet ist, besteht; eines, das nur einen roten Rahmen hat, besteht nicht. WCAG schreibt weder genau eine h1 pro Seite vor noch verbietet es eine übersprungene Überschriftenebene, und es nennt hier keine Ausnahmen. Der Fehler ist die Abweichung: Struktur, die es für das Auge gibt und nicht im Markup, oder Markup, das eine Struktur behauptet, die der Inhalt nicht hat.
/ Woran Seiten scheitern
- Überschriften sind Absätze oder div-Elemente mit großer, fetter Schrift, sodass die Seite keine Gliederung hat, durch die man navigieren kann.
- Ein Formularfeld hat weder ein label-Element noch einen zugänglichen Namen oder verlässt sich auf einen Platzhalter, der beim Tippen verschwindet.
- Eine Datentabelle hat keine th-Zellen, sodass jeder Wert ohne seine Spalte und Zeile vorgelesen wird.
- Eine Liste besteht aus Zeilenumbrüchen und Spiegelstrichen, oder ein ul enthält Kinder, die keine li-Elemente sind.
- Eine Gruppe von Radiobuttons oder Checkboxen hat kein fieldset mit legend, sodass jede Option ohne die Frage vorgelesen wird.
/ So prüfen Sie es selbst
- Lassen Sie sich die Überschriften im Screenreader auflisten (NVDA: Einfg+F7) oder mit einer Browsererweiterung, die die Gliederung der Seite zeigt. Vergleichen Sie die Liste mit dem, was auf dem Bildschirm wie eine Überschrift aussieht.
- Klicken Sie auf die sichtbare Beschriftung jedes Formularfelds. Springt der Cursor nicht ins Feld, ist die Beschriftung nicht mit ihm verknüpft.
- Untersuchen Sie jede Datentabelle auf th-Elemente und das scope-Attribut und jede sichtbare Liste auf ul, ol und li.
- Schalten Sie die Stile ab (Firefox: Ansicht, Webseiten-Stil, Kein Stil) und prüfen Sie, ob Überschriften, Listen und Tabellen noch erkennbar sind.
- Springen Sie mit dem Screenreader von Landmark zu Landmark und vergewissern Sie sich, dass Hauptinhalt, Navigation und Fußzeile erreichbar sind.
/ So beheben Sie es
- Zeichnen Sie Überschriften mit h1 bis h6 in einer Reihenfolge aus, die dem Inhalt folgt, und verwenden Sie Überschriftenelemente nicht zum bloßen Vergrößern von Text.
- Geben Sie jedem input, select und textarea ein label-Element, das über for und id mit ihm verknüpft ist, und fassen Sie zusammengehörige Optionen in einem fieldset mit legend zusammen.
- Schreiben Sie Kopfzellen als th mit scope="col" oder scope="row" und ergänzen Sie eine caption, die die Tabelle benennt.
- Bauen Sie Listen aus ul, ol und li, wobei li die einzigen direkten Kinder sind.
- Fassen Sie die Bereiche der Seite in main, nav, header und footer und verbinden Sie jeden Tab über aria-controls mit seinem Panel.
/ Was unser Scanner prüft
Der statische Durchlauf zählt h1-Elemente (keines oder mehr als eines), Sprünge in der Überschriftenebene, ein fehlendes main-Element und Tabellen ohne th. Der Durchlauf auf der gerenderten Seite ergänzt Inhalt außerhalb aller Landmarks, Listen mit fremden Kindelementen, Felder ohne Beschriftung oder nur mit Platzhalter, Optionsgruppen ohne legend und Tabs ohne Verbindung zum Panel. HTML_CodeSniffer ergänzt leere Überschriften. Text, der nur wie eine Überschrift aussieht, sieht keines dieser Werkzeuge.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Ist eine übersprungene Überschriftenebene ein WCAG-Verstoß?
Für sich genommen nicht. 1.3.1 verlangt, dass die Überschriftenstruktur im Markup die Struktur des Inhalts wiedergibt; es steht dort nicht, dass auf h2 eine h3 folgen muss. Beheben sollten Sie es trotzdem, denn Screenreader-Nutzer überfliegen eine Seite anhand der Gliederung, und eine Lücke wirkt wie ein fehlender Abschnitt. Unser Scanner meldet es deshalb als Befund mittlerer Schwere.
Darf eine Seite mehr als eine h1 haben?
WCAG verbietet es nicht. Es genügt, dass Überschriften als Überschriften ausgezeichnet sind und ihre Ebenen dem Aufbau des Inhalts entsprechen. Eine h1, die die Seite benennt, ist die Konvention, die die meisten Screenreader-Nutzer erwarten; mehrere davon machen die Gliederung schwerer lesbar. Unser Scanner führt mehr als eine h1 als Befund mittlerer Schwere unter 1.3.1: ein Hinweis auf schwache Struktur, kein Beweis für einen Verstoß.
Reicht ein Platzhalter als Beschriftung eines Formularfelds?
Nein. Ein Platzhalter verschwindet, sobald jemand tippt, ist oft zu blass zum Lesen und wird nicht von jeder assistiven Technologie als Beschriftung behandelt. Verwenden Sie ein sichtbares label-Element, das über for und id mit dem Feld verbunden ist. Wo eine sichtbare Beschriftung nicht möglich ist, etwa bei einem einzelnen Suchfeld mit Schaltfläche, gibt aria-label dem Feld einen Namen.