Was die Norm sagt
Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können programmatisch ermittelt werden oder stehen als Text zur Verfügung.
Warum das zählt
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.
Wie ein Fehlschlag aussieht
- 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 A11ySignal es prüft
Bei jedem Scan laufen 12 automatische Prüfungen gegen dieses Kriterium.
kritischaria-hidden-bodyAria-hidden='true' darf nicht für den <body> des Dokumentes verwendet werden.
kritischaria-required-childrenBestimmte ARIA-Rollen müssen spezifische, untergeordnete Kind-Rollen enthalten.
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.
Was ein Werkzeug Ihnen nicht sagen kann
Automatik findet fehlende Tabellenköpfe und leere Überschriften. Ob Ihre Überschriftenebenen die tatsächliche Gliederung abbilden, muss trotzdem jemand lesen.