Rampsight

Alle Regeln

ARIA

Manche Rollen setzen ein bestimmtes Elternelement voraus

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

  1. Umschließen Sie die Kindelemente mit einem Element in der von der Spezifikation geforderten Elternrolle.
  2. Halten Sie die Beziehung direkt — ein dazwischenliegendes div braucht role="presentation".
  3. Gibt es im Design kein solches Elternelement, ist die Kindrolle die falsche.

Im Markup

Fehlerhaft
<div>
  <button role="tab">Overview</button>
</div>
Korrekt
<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:

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.