Deutsch
Website-Menü

widget-keyboard-focusable

Widgets sollten per Tastatur erreichbar sein

manualWCAG 2.1.1 (A)Konfidenz: mediumSchweregrad: seriousoperable

Markiert ein Element mit einer Widget-Rolle, das den Fokus nicht erhalten kann oder außerhalb der Tab-Reihenfolge liegt, sowie ein zusammengesetztes Widget ohne Tab-Stopp, zur manuellen Prüfung.

Anwendbarkeit. Elemente, die die Seite mit aria-activedescendant anzeigt, sowie solche, deren Rolle, aus dem role-Attribut oder den ElementInternals eines Custom Elements, ein Widget ist, das Nutzende bedienen:

  • einzelne Widgets: button, link, checkbox, switch, radio, slider, spinbutton, textbox, searchbox, combobox;
  • zusammengesetzte Widgets: grid, treegrid, listbox, menu, menubar, tree, tablist, toolbar, radiogroup.

Außen vor bleiben:

  • ein Element außerhalb des Accessibility Tree (aria-hidden="true") oder ein deaktiviertes (disabled oder aria-disabled="true" auf ihm oder einem Vorfahren): Es bietet nichts zum Bedienen;
  • ein Widget in einem zusammengesetzten Widget oder in einem Element, das den Fokus erhalten kann und dessen aria-activedescendant auf einen Eintrag zeigt (per id oder per Skript als ariaActiveDescendantElement gesetzt; ein leeres Attribut zeigt auf nichts): Das zusammengesetzte Widget bewegt den Fokus zwischen seinen Einträgen (ein Roving Tabindex) oder behält ihn und zeigt auf den aktiven, daher wird stattdessen das äußere Element beurteilt (bei einem Untermenü seine menubar);
  • ein Element mit einem Inline-onclick oder einem Click-Listener, den der Listener-Hook (listenerHookScript) gesehen hat; dieses beurteilt click-handler-keyboard-operable.

Erwartung. Personen, die die Tastatur nutzen, können das Widget per Tab erreichen (WCAG 2.1.1). Gelesen wird nur die Fokussierbarkeit laut Markup: Ein Skript kann den Fokus verschieben oder Tasten auf eine Weise behandeln, die das Markup nicht zeigt, daher ist ein Befund eine Frage, nie ein Fehlschlag.

  • Ein einzelnes Widget, das in der Tab-Reihenfolge ist oder ein Element enthält, das es ist, ergibt pass.
  • Ein einzelnes Widget, das den Fokus nicht erhalten kann und nichts enthält, was es kann: cantTell (WIDGET_NOT_FOCUSABLE). Prüfen Sie, ob Personen, die die Tastatur nutzen, es oder seine Funktion auf andere Weise erreichen können.
  • Ein einzelnes Widget, das den Fokus nur per Skript erhält (tabindex="-1"): cantTell (WIDGET_NOT_IN_TAB_ORDER). Tab erreicht es nie; prüfen Sie, ob ein Skript den Fokus dorthin verschiebt oder ob seine Funktion anderswo angeboten wird.
  • Ein zusammengesetztes Widget ergibt pass, wenn es in der Tab-Reihenfolge ist (mit oder ohne aria-activedescendant, das auf seinen aktiven Eintrag zeigt) oder ein Element enthält, das es ist. Eines, das kein anderes Element in aria-controls oder aria-owns nennt (ein Popup, das ein Button oder eine combobox öffnet, erhält den Fokus von dort) und das keines von beiden hat: cantTell (COMPOSITE_NO_TAB_STOP).
  • Ein Element beliebiger Rolle mit aria-activedescendant, das den Fokus nicht erhalten kann: cantTell (ACTIVEDESCENDANT_HOST_NOT_FOCUSABLE). Der aktive Eintrag wird nur angesagt, solange dieses Element den Fokus hat. Ein solches Element verwaltet den Fokus nicht für die Widgets darin, daher werden diese für sich beurteilt.

Was ein Befund meldet.

  • role: die Rolle des Elements.
  • focusable: ob das Element selbst den Fokus erhalten kann.
  • scriptFocusable: bei einem zusammengesetzten Widget, ob irgendein Element darin den Fokus per Skript erhält (tabindex="-1").

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
<div role="button" tabindex="0">Save</div>

Der eigene Button ist in der Tab-Reihenfolge.

can't tell
<div role="button">Save</div>

Das Element gibt sich als Button aus, aber Tab erreicht es nie. Eine Person prüft, ob Personen, die die Tastatur nutzen, es oder seine Funktion auf andere Weise erreichen können.

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.

ACTIVEDESCENDANT_HOST_NOT_FOCUSABLE

  1. Suchen Sie das im Bericht genannte Element; es verweist mit aria-activedescendant auf seinen aktiven Eintrag.
  2. Öffnen oder erreichen Sie das Widget nur mit der Tastatur (zum Beispiel durch Tippen in sein Suchfeld) und beobachten Sie, ob dieses Element und nicht etwas anderes den Fokus erhält.
  3. Drücken Sie bei laufendem Screenreader die Pfeiltasten und achten Sie darauf, ob jeder aktive Eintrag angesagt wird.
  4. Lassen sich die Elemente so nicht erreichen, prüfen Sie, ob dieselbe Auswahl auf anderem Weg allein mit der Tastatur möglich ist, zum Beispiel durch Eintippen des Werts in ein Textfeld. Das zählt nur, wenn jede Auswahl so verfügbar ist und ein Screenreader sie ansagt.

Bestanden. Das Element erhält den Fokus und der Screenreader sagt jedes aktive Element an, wenn die Pfeiltasten es wechseln, oder dieselbe Auswahl ist auf anderem Weg allein mit der Tastatur möglich und der Screenreader sagt sie an.

Nicht bestanden. Das Element kann den Fokus nicht erhalten, sodass beim Wechseln zwischen den Elementen nichts angesagt wird oder sie nicht erreichbar sind, und die Auswahl ist auf keinem anderen Weg mit der Tastatur möglich; das verstößt gegen WCAG 2.1.1.

COMPOSITE_NO_TAB_STOP

  1. Suchen Sie das im Bericht genannte Widget (ein Menü, ein Listenfeld, eine Tab-Liste, eine Symbolleiste, ein Grid oder einen Baum).
  2. Klicken Sie direkt davor, drücken Sie Tab und beobachten Sie, ob der Fokus in das Widget oder auf einen seiner Einträge gelangt.
  3. Ist es ein Popup, öffnen Sie es mit der Tastatur über seine Schaltfläche und sehen Sie, ob der Fokus hineinwechselt.
  4. Prüfen Sie im Widget, ob die Pfeiltasten zwischen den Einträgen wechseln.
  5. Gelangt der Fokus nie hinein, prüfen Sie, ob sich das, was das Widget bietet, auf anderem Weg allein mit der Tastatur erledigen lässt, zum Beispiel dieselben Auswahlmöglichkeiten als Links oder Schaltflächen an anderer Stelle der Seite. Das zählt nur, wenn jede Option des Widgets so verfügbar ist.

Bestanden. Tab (oder die Schaltfläche, die es öffnet) setzt den Fokus in das Widget und die Pfeiltasten wechseln zwischen seinen Elementen, oder alles, was seine Elemente bewirken, lässt sich auf anderem Weg allein mit der Tastatur erledigen.

Nicht bestanden. Der Fokus gelangt mit der Tastatur nie in das Widget oder seine Elemente, und was sie bewirken, lässt sich nicht auf anderem Weg mit der Tastatur erledigen; das verstößt gegen WCAG 2.1.1.

WIDGET_NOT_FOCUSABLE

  1. Suchen Sie das im Bericht genannte Widget und notieren Sie, was es beim Anklicken oder Antippen tut.
  2. Klicken Sie direkt davor, drücken Sie dann Tab und beobachten Sie, ob der Fokus jemals darauf landet.
  3. Erhält es nie den Fokus, suchen Sie nach einem anderen per Tastatur erreichbaren Bedienelement, das dasselbe tut.
  4. Tut das Element nichts, ist seine Rolle möglicherweise falsch; notieren Sie stattdessen das.

Bestanden. Das Widget erhält den Tastaturfokus und funktioniert mit der Tastatur, oder dieselbe Funktion wird von einem anderen per Tastatur erreichbaren Bedienelement angeboten.

Nicht bestanden. Das Widget kann mit der Tastatur weder erreicht noch bedient werden und seine Funktion wird nirgends sonst angeboten; das verstößt gegen WCAG 2.1.1 (F42).

WIDGET_NOT_IN_TAB_ORDER

  1. Suchen Sie das im Bericht genannte Widget und notieren Sie, wann es erscheint (zum Beispiel wenn sich ein Menü oder Dialog öffnet).
  2. Öffnen oder erreichen Sie diesen Teil der Seite nur mit der Tastatur und beobachten Sie, ob ein Skript den Fokus auf das Widget bewegt oder die Pfeiltasten es erreichen.
  3. Erreicht der Fokus es nie, suchen Sie nach einem anderen per Tastatur erreichbaren Bedienelement, das dasselbe tut.

Bestanden. Der Fokus wird bei Bedarf per Skript oder mit den Pfeiltasten auf das Widget bewegt, oder seine Funktion wird anderswo angeboten.

Nicht bestanden. Tab und Pfeiltasten erreichen das Widget nie und nichts anderes bietet seine Funktion an; das verstößt gegen WCAG 2.1.1.

Quellcode ansehen