Informationen und Beziehungen

Was gefordert wird

Alles, was auf einen Blick erkennbar ist — dass dieser fettgedruckte Text eine Überschrift ist, dass diese Zeilen eine Datentabelle bilden, dass diese Gruppe von Feldern zur „Rechnungsadresse“ gehört, dass dieses Sternchen ein Pflichtfeld kennzeichnet — muss auch im zugrunde liegenden Code vorhanden sein. Screenreader, Sprachsteuerungssoftware und Reflow-Engines sehen ausschließlich das Markup. Wird eine Beziehung rein visuell ausgedrückt — durch eine größere Schrift, einen dickeren Rahmen oder einen Einzug —, nimmt assistive Technologie davon nichts wahr.

Wie das Kriterium erfüllt wird

• Echte Überschriften-Elemente (<h1> bis <h6>) in logischer, hierarchischer Reihenfolge verwenden — niemals ein gestaltetes <div>, das eine Überschrift nur simuliert.
• Listen mit <ul>, <ol> und <li> auszeichnen — nicht als Absätze, die durch Zeilenumbrüche oder Aufzählungszeichen getrennt sind.
• <table> mit <th scope="col"> bzw. <th scope="row"> für Datentabellen verwenden; eine <caption> beschreibt den Zweck der Tabelle.
• Jedes Formularfeld benötigt ein programmatisches Label: <label for="...">, aria-labelledby oder aria-label. Platzhaltertext ist kein Label.
• Zusammengehörige Formularfelder in <fieldset> mit <legend> gruppieren oder role="group" mit aria-labelledby für benutzerdefinierte Widgets verwenden.
• Für Abbildungen und Bildunterschriften <figure> und <figcaption> verwenden; für Definitions­paare <dl> / <dt> / <dd>.
• Pflichtfelder sowohl visuell (Sternchen) als auch programmatisch kennzeichnen (aria-required="true" oder das required-Attribut).

Häufige Fehler

• <div class="heading-1"> statt <h1> — sieht korrekt aus, wird aber von assistiver Technologie nicht als Überschrift angekündigt.
• Layout-Tabellen für visuelle Spalten oder Datentabellen, die aus <div>-Rastern ohne <th>-Zellen aufgebaut sind.
• Formularfelder mit ausschließlich Platzhaltertext als Label — das Label verschwindet beim Fokussieren, und Screenreader kündigen es möglicherweise nicht an.
• Aufzählungspunkte durch <p>•&nbsp;Eintrag</p> simuliert statt mit echten Listen-Elementen.
• Pflichtfeld-Sternchen rot per CSS hervorgehoben, ohne aria-required oder required-Attribut.
• Visuell gruppierte Radiobuttons ohne <fieldset> / <legend>, sodass Screenreader-Nutzende zusammenhanglose Optionen ohne die zugehörige Frage hören.
• Datentabellen, bei denen die Kopfzeile fett formatiert, aber als <td> statt als <th> ausgezeichnet ist.

Warum das wichtig ist

Erfolgskriterium 1.3.1 wird in WCAG-Audits am häufigsten nach 1.1.1 und 1.4.3 beanstandet. Jede CMS-generierte Seite, jede Marketing-Landingpage und jedes benutzerdefinierte Formular-Widget scheitert in der Regel an mindestens einem Teil davon. Die Behebung erfordert fast immer semantisches HTML, nicht ARIA — wer role="heading" greift, um ein <div> zu reparieren, das von Anfang an ein <h2> hätte sein sollen, hat bereits verloren.