Stufe A · WCAG 2.0

1.3.1 Info und Beziehungen

Die Struktur, die sehende Nutzer erkennen — Überschriften, Listen, Tabellen, Formulargruppen — muss im Markup stehen, nicht nur in der Gestaltung.

Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.

Kostenlosen Scan anfordern

Woran es in der Praxis scheitert

Ein fett gesetzter Absatz als Abschnittsüberschrift. Eine Layout-Tabelle ohne Kopfzellen. Radiobuttons für Versandoptionen ohne fieldset, sodass ein Screenreader vier zusammenhanglose Optionen vorliest.

Wie man es repariert

Nehmen Sie das Element, das die Sache bedeutet: h2 für eine Überschrift, ul für eine Liste, th mit scope für eine Datentabelle, fieldset und legend für eine Gruppe.

Auf einen Blick

Stufe: Stufe A — das Minimum. Ein Verstoß hier macht etwas meist unmöglich, nicht bloß mühsam.
Prinzip: Wahrnehmbar
Richtlinie: 1.3 Anpassbar
Neu in: WCAG 2.0
EN 301 549: 9.1.3.1
Englische Bezeichnung: Info and Relationships
Automatische Prüfung: Teilweise automatisch

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

Öffnen Sie die Liste der Überschriften – im Screenreader oder mit einem Bookmarklet – und lesen Sie sie als Gliederung der Seite. Was wie eine Überschrift aussieht und in der Liste fehlt, ist ein Verstoß.
Prüfen Sie, ob sichtbare Listen ul oder ol sind, ob Datentabellen th-Zellen haben und ob zusammengehörige Radiobuttons und Checkboxen in einem fieldset mit legend stehen.
Klicken Sie auf jede sichtbare Beschriftung eines Formularfelds: Das zugehörige Feld sollte den Fokus bekommen. Wenn nicht, ist die Beschriftung nicht verknüpft.
Schalten Sie die Styles ab – der Lesemodus genügt – und prüfen Sie, ob die Struktur ohne sie erhalten bleibt.

Im Code

Nicht erfüllt

<p class="section-title">Versand</p>

<input type="radio" name="versand" id="standard"> Standard
<input type="radio" name="versand" id="express"> Express

Erfüllt

<h2>Versand</h2>

<fieldset>
  <legend>Versandart</legend>
  <label><input type="radio" name="versand" value="standard"> Standard</label>
  <label><input type="radio" name="versand" value="express"> Express</label>
</fieldset>

Teilweise automatisch

Wie weit eine automatische Prüfung kommt

Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.

Fehlende Tabellenköpfe, Listen aus den falschen Elementen und Formularfelder ohne Beschriftung werden automatisch gefunden. Ob das Markup dem entspricht, was optisch gruppiert aussieht, nicht. Eine übersprungene Überschriftenebene melden wir ebenfalls, aber als Best Practice: axe-core wertet sie nicht als Verstoß gegen 1.3.1, und wir auch nicht.

Regeln, die dieses Kriterium prüfen

aria-hidden-bodyAria-hidden='true' darf nicht für den <body> des Dokumentes verwendet werden.
aria-required-childrenARIA-Rolle ohne passende Kindelemente
aria-required-parentARIA-Rolle ohne passendes Elternelement
definition-list<dl>-Elemente dürfen unmittelbar nur korrekt verschachtelte <dt>- und <dd>-Gruppen, <script>- oder <template>-Elemente enthalten.
dlitem<dt>- und <dd>-Elemente müssen in einem <dl>-Element enthalten sein.
labelFormularfeld ohne Beschriftung
listFehlerhafte Listenstruktur
listitemListenpunkt ohne Liste
select-nameAuswahlliste ohne Beschriftung
td-headers-attrFehlerhafte Tabellen-Zuordnung
th-has-data-cellsAlle <th>-Elemente sowie Elemente mit role=columnheader/rowheader müssen Datenzellen haben, die sie beschreiben.

Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.

Alle Regeln erklärt

Wo es besonders zählt

Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.

Weiterlesen

Überschriftenstruktur
Die logische Gliederung einer Seite mit h1 bis h6; für viele Screenreader-Nutzende der wichtigste Weg, eine Seite zu überfliegen.
Landmark (ARIA-Landmark)
Ein Seitenbereich mit fester Rolle (etwa header, nav, main oder footer), zu dem Screenreader-Nutzende direkt springen können.
Semantisches HTML
HTML-Elemente nach ihrer Bedeutung einsetzen (etwa button, nav, h2), damit Browser und assistive Technologien Struktur und Bedienelemente verstehen.
label
Die axe-Regel label meldet Eingabefelder ohne zugänglichen Namen. Warum ein Platzhalter keine Beschriftung ist und wie Sie es beheben – mit Codebeispiel.
list
Die axe-Regel list meldet ul oder ol mit anderen Kindern als li, etwa einem Wrapper-div oder einer falsch platzierten Unterliste. Lösung mit Codebeispiel.
listitem
Die axe-Regel listitem meldet ein li, das nicht in ul, ol oder menu steht, etwa in einem div oder einem ul mit geänderter Rolle. Lösung mit Codebeispiel.
select-name
Die axe-Regel select-name meldet Auswahllisten ohne zugänglichen Namen. Warum die gewählte Option keine Beschriftung ist – mit Codebeispiel.

Finden Sie heraus, welche Kriterien Ihre Website verfehlt

Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.