focus-order-semantics
In die Tab-Reihenfolge aufgenommene Elemente sollten interaktive Semantik haben
Markiert Elemente mit tabindex >= 0, deren explizite Rolle eine nicht interaktive Struktur- bzw. Dokumentrolle ist (z. B. heading, list, note, presentation), zur manuellen Prüfung.
Anwendbarkeit. Elemente mit einem expliziten tabindex von 0 oder höher (in der Tab-Reihenfolge) UND einem expliziten role-Attribut, das zu einer Rolle aus einer kuratierten Menge eindeutig nicht interaktiver Struktur- bzw. Dokumentrollen aufgelöst wird. Das Attribut ist eine Fallback-Liste: Sein erstes bekanntes, nicht abstraktes Token ist, ohne Berücksichtigung der Groß-/Kleinschreibung, die Rolle (role="foo HEADING" ist eine Überschrift, role="foo" ist keine Rolle).
Erwartung. Ein Element, das absichtlich in die Tab-Reihenfolge aufgenommen wurde, sollte vermitteln, warum es fokussierbar ist: Eine Rolle wie heading, list, note oder presentation gibt assistiven Technologien keine interaktive Semantik zum Ansagen. Das verwirrt Personen, die per Tastatur darauf landen und keinen Hinweis erhalten, was eine Aktivierung (wenn überhaupt) bewirken würde.
Was ein Befund meldet.
tabindex: dertabindexdes Elements als Zahl (0 oder größer).role: die nicht interaktive Rolle, die das Element trägt.
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
<div role="heading" tabindex="0">Fake focusable heading</div>
Eine heading-Rolle hat kein interaktives Verhalten; sie per Tab erreichbar zu machen, ist ungewöhnlich und einen Blick wert.
<div role="button" tabindex="0">Real custom button</div>
role="button" ist eine interaktive Rolle, daher ist die Erreichbarkeit per Tab zu erwarten.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
TABBABLE_WITH_NON_INTERACTIVE_ROLE
- Drücken Sie Tab, bis der Fokus das im Bericht genannte Element erreicht, und hören Sie mit einem Screenreader hin oder lesen Sie seine Rolle im Bereich „Barrierefreiheit“.
- Finden Sie heraus, warum es fokussierbar ist: Scrollt es (sein Inhalt läuft über und die Pfeiltasten scrollen ihn), oder tut es etwas, wenn es angeklickt oder Eingabetaste oder die Leertaste gedrückt wird?
- Wirkt es als Bedienelement, vergleichen Sie die angesagte Rolle mit dem, was es tut.
Bestanden. Das Element ist aus einem Grund fokussierbar, den seine Rolle unterstützt, etwa ein scrollbarer Bereich, den Tastaturnutzende scrollen müssen, und es wirkt nicht als Bedienelement.
Nicht bestanden. Das Element wirkt als Bedienelement (es öffnet, schaltet um oder navigiert), wird aber mit einer nicht interaktiven Rolle wie heading oder list angesagt, sodass Tastaturnutzende nicht erfahren, was es tut; ein Verstoß gegen die Best Practice im Zusammenhang mit WCAG 4.1.2. Tut es nichts und scrollt nicht, ist es ein unnötiger Tabstopp.