presentational-children-focusable-absent

Rollen mit präsentationalen Kindern dürfen keine fokussierbaren Inhalte enthalten

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass ein Element, dessen Rolle seine Kinder präsentational macht (button, checkbox, img, option, radio, slider, switch, tab, ...), keinen Nachfahren mit Tab-Stopp enthält.

Anwendbarkeit. Gilt für Elemente, deren semantische Rolle eine der WAI-ARIA-Rollen ist, die als Rollen mit präsentationalen Kindern definiert sind (button, checkbox, img, menuitemcheckbox, menuitemradio, meter, option, progressbar, radio, scrollbar, separator, slider, switch, tab sowie doc-pagebreak und graphics-symbol aus den Modulen DPUB-ARIA/Graphics-ARIA, die dieselbe Eigenschaft erben). Die Rolle kann explizit (role="tab") oder nativ (<button>, <meter>, <progress>, <option>) sein. Ein Custom Element, dem seine ElementInternals eine dieser Rollen geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.

Erwartung. Kein Nachfahre des Elements ist Teil der sequenziellen Fokusnavigation. Der Mechanismus der präsentationalen Kinder entfernt jeden Nachfahren aus dem Accessibility Tree; ein Nachfahre, der trotzdem einen Tab-Stopp hat, erhält den Fokus ohne Rolle und ohne Namen, der angekündigt werden könnte.

Was ein Befund meldet.

  • role: die Rolle, die die Kinder des Elements präsentational macht.
  • focusableElements: der Tag-Name jedes Tab-Stopps im Element, ein Eintrag pro Tab-Stopp, in Dokumentreihenfolge.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass
<button>Save</button>

Kein präsentationaler Inhalt, der zugleich fokussierbar ist.

fail
<button>
Save
<span role="button" aria-label="save options" aria-expanded="false" tabindex="0">▼</span>
</button>

Das verschachtelte <span> hat innerhalb des präsentationalen Inhalts des Buttons eine eigene interaktive Rolle und einen eigenen Tab-Stopp.

Quellcode ansehen