ARIA
Manche Rollen setzen ein bestimmtes Elternelement voraus
- Regel:
aria-required-parent - Schweregrad: Kritisch
- WCAG-Stufe A
Warum das wichtig ist
Ein role="tab" außerhalb einer Tabliste oder ein listitem außerhalb einer Liste hat keinen Kontext. Hilfsmittel können nicht „Tab 2 von 5“ sagen, weil sie nicht wissen, wozu das Element gehört.
So beheben Sie es
- Umschließen Sie die Kindelemente mit einem Element in der von der Spezifikation geforderten Elternrolle.
- Halten Sie die Beziehung direkt — ein dazwischenliegendes div braucht role="presentation".
- Gibt es im Design kein solches Elternelement, ist die Kindrolle die falsche.
Im Markup
<div>
<button role="tab">Overview</button>
</div><div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
</div>Die Anforderung dahinter
Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:
- 1.3.1 Info und Beziehungen (öffnet in neuem Tab) — WCAG-Stufe A
Weiterführende Quellen
Deque University zu aria-required-parent (öffnet in neuem Tab)
Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.
Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.