Das Kriterium dahinter
1.3.1 Info und Beziehungen
Struktur, die Sie im Layout zeigen — Überschriften, Listen, Tabellen, Gruppen — muss auch im Markup existieren.
Stufe A · EN 301 549 § 9.1.3.1
Warum es diese Prüfung gibt
Screenreader-Nutzende navigieren über Überschriften und Landmarken. Sind Ihre Überschriften gestylte `div`s, gibt es diese Navigation nicht, und die Seite wird ein einziger langer Absatz.
Was sie üblicherweise auslöst
- fällt durch`<div class="h2">` statt `<h2>`.
- fällt durchEine Layout-Tabelle ohne `<th>` oder eine Datentabelle ohne Kopfzellen.
- fällt durchZusammengehörige Radiobuttons ohne `<fieldset>` mit `<legend>`.
- fällt durchEine optische Liste, gebaut aus `<br>`-Tags.
So beheben Sie es
- tunNehmen Sie das Element, das bedeutet, was Sie meinen, und stylen Sie es dann. Semantik zuerst, CSS danach.
- tunGeben Sie Datentabellen `<th scope="col">` oder `scope="row"`.
- tunFassen Sie zusammengehörige Formularfelder in `<fieldset>` und benennen Sie die Gruppe im `<legend>`.
- tunErgänzen Sie Landmarken: `<main>`, `<nav>`, `<header>`, `<footer>`.
Wie es gemeldet wird
A11ySignal meldet das mit der Schwere kritisch. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:
https://dequeuniversity.com/rules/axe/4.13/aria-required-children ↗
Prüfung umgesetzt in axe-core 4.13.0, © Deque Systems, MPL-2.0.
Weitere Prüfungen für 1.3.1
kritischaria-hidden-bodyAria-hidden='true' darf nicht für den <body> des Dokumentes verwendet werden.
kritischaria-required-parentBestimmte ARIA-Rollen müssen in spezifischen, übergeordneten Eltern-Rollen enthalten sein.
kritischtd-has-headerIn Tabellen, die größer als 3 mal 3 sind, müssen alle nichtleeren <td>-Elemente einen zugehörigen Tabellenkopf haben.
schwerwiegenddefinition-list<dl>-Elemente dürfen unmittelbar nur korrekt verschachtelte <dt>- und <dd>-Gruppen, <script>- oder <template>-Elemente enthalten.
schwerwiegenddlitem<dt>- und <dd>-Elemente müssen in einem <dl>-Element enthalten sein.
schwerwiegendlist<ul>- und <ol>-Elemente dürfen unmittelbar nur <li>-, <script>- oder <template>-Elemente enthalten.
schwerwiegendlistitem<li>-Elemente müssen in einem <ul>- oder <ol>-Element enthalten sein.
schwerwiegendp-as-headingDie Schriftschnitte bold und italic sowie die Schriftgröße dürfen nicht verwendet werden, um <p>-Elemente wie Überschriften zu formatieren.
schwerwiegendtable-fake-captionDaten- oder Kopfzellen sollten nicht verwendet werden, um einer Datentabelle eine Überschrift zu geben.
schwerwiegendtd-headers-attrInnerhalb eines <table>-Elementes dürfen sich Zellen, die das headers-Attribut verwenden, nur auf andere Zellen derselben Tabelle beziehen.
schwerwiegendth-has-data-cellsAlle <th>-Elemente sowie Elemente mit role=columnheader/rowheader müssen Datenzellen haben, die sie beschreiben.