click-handler-keyboard-operable

Click-Handler auf Elementen, die keine nativen Steuerelemente sind, müssen per Tastatur funktionieren

automaticWCAG 2.1.1, 2.1.3 (AAA)Konfidenz: mediumSchweregrad: seriousoperable

Prüft, dass ein Element, das kein natives Steuerelement ist und einen Click-Handler hat (ein Inline-onclick oder einen Click-Listener, den der Listener-Hook gesehen hat), den Tastaturfokus erhalten kann und dass ein Tasten-Handler an ihm, an einem Vorfahren oder an einem Nachkommen seine Tasten empfängt, sodass Personen, die die Tastatur nutzen, ausführen können, was ein Klick ausführt.

Anwendbarkeit. Elemente, die die Seite mit einem nicht leeren Inline-Attribut onclick rendert oder, wo die Seite den Listener-Hook ausführt (listenerHookScript), mit einem per Skript auf dem Element selbst hinzugefügten Click-Listener (addEventListener('click', …) oder die Eigenschaft onclick), außer:

<html> und <body>, wo ein Click-Handler der ganzen Seite dient;
ein Handler, der nur aus Anweisungen besteht, die nichts tun (return false, void(0), void 0, event.preventDefault()): Er bietet keine Funktion;
ein Element mit aria-disabled="true" auf ihm selbst oder einem Vorfahren: Ein deaktiviertes Steuerelement bietet keine Funktion zum Bedienen;
native Steuerelemente, deren eigenes Tastaturverhalten bei den Nutzenden ankommt: ein Link oder area mit href, button, input außer hidden, select, textarea, option, summary, label (es aktiviert sein Steuerelement, das selbst den Fokus erhält), iframe, embed, audio oder video mit controls und ein Editing Host (contenteditable);
ein Element, das im Flat Tree (sein Shadow Root und eingesetzte Slot-Inhalte eingeschlossen) ein Steuerelement in der Tab-Reihenfolge enthält, dessen Aktivierung per Tastatur click auslöst (ein Link oder area mit href, button, summary oder ein Input vom Typ button, submit, reset, image, checkbox oder radio): Der Klick des Steuerelements steigt zum Handler auf, es handelt sich also um Event Delegation, und die Tastatur führt ihn bereits aus;
ein Element, das den Fokus nicht erhalten kann, keinen Nachfahren hat, der es kann, und weder eine Widget-Rolle noch cursor: pointer hat: Nichts zeigt den Nutzenden, dass es anklickbar ist, und ein solcher Handler zählt oft nur Klicks oder stoppt ihre Weitergabe.

Erwartung. Personen, die die Tastatur nutzen, können ausführen, was der Klick ausführt. Chromium löst click bei Enter oder Leertaste nur für native Steuerelemente aus: Ein <span role="button" tabindex="0" onclick> erhält den Fokus, tut aber bei keiner der beiden Tasten etwas.

Das Element oder einer seiner Nachfahren im Flat Tree ist in der Tab-Reihenfolge, und ein Inline-Tasten-Handler (onkeydown, onkeyup, onkeypress) liegt auf ihm, einem Vorfahren oder einem Nachfahren, sodass Tastenereignisse vom fokussierten Element einen erreichen können: pass.
Das Element oder ein Nachfahre ist in der Tab-Reihenfolge, aber dort gibt es keinen Inline-Tasten-Handler: cantTell (CLICK_HANDLER_NO_KEY_HANDLER); prüfen Sie, ob Enter und Leertaste tun, was ein Klick tut.
Das Element oder ein Nachfahre kann den Fokus erhalten, aber nur mit tabindex="-1", und kein Vorfahre hat einen Tasten-Handler: cantTell (CLICK_HANDLER_NOT_IN_TAB_ORDER). Tab erreicht es nie; ein Skript kann den Fokus dorthin verschieben, wie es ein Roving Tabindex tut.
Mit dem Listener-Hook zählt ein per Skript auf dem Element oder einem Nachfahren hinzugefügter Tasten-Listener wie ein Inline-Tasten-Handler. Einer nur auf einem Vorfahren, einem Shadow Root, in dem das Element liegt, dem Dokument oder dem Fenster kann die Tasten des Elements behandeln oder nur die anderer: cantTell (CLICK_HANDLER_KEY_LISTENER_ABOVE).
Das Element ist in der Tab-Reihenfolge, seine Rolle ist button, link, checkbox, switch, tab, menuitem, menuitemcheckbox oder menuitemradio, und ein vor den Skripten der Seite installierter Hook hat weder auf ihm, einem Nachfahren, einem Vorfahren, einem Shadow Root, in dem es liegt, dem Dokument oder dem Fenster einen Tasten-Listener gesehen, noch gibt es dort einen Inline-Tasten-Handler: fail (CLICK_HANDLER_NO_KEY_LISTENER). Kein Tastenereignis erreicht einen Handler, Enter und Leertaste tun also nichts. Außer ein focus- oder focusin-Listener liegt auf ihm, einem Vorfahren, einem Shadow Root, in dem es liegt, dem Dokument oder dem Fenster: Er kann den Tasten-Listener hinzufügen, sobald das Element den Fokus hat, oder bei einem Tab dessen Panel beim Fokussieren anzeigen, daher cantTell (CLICK_HANDLER_FOCUS_LISTENER).
Weder das Element noch ein Nachfahre kann den Fokus erhalten, und seine Rolle ist button, link, checkbox oder switch: fail (CLICK_HANDLER_CONTROL_NOT_FOCUSABLE). Das Element gibt sich als Steuerelement aus, und Tab erreicht es nie, wie beim WCAG-Fehler F42 für per Skript erzeugte Links. Außer ein Vorfahre trägt aria-activedescendant oder einen Inline-Tasten-Handler oder ist ein fokussierbares zusammengesetztes Widget (grid, treegrid, listbox, menu, menubar, tree, tablist, toolbar, radiogroup, combobox), das es bedienen kann, ohne den Fokus dorthin zu verschieben: dann cantTell.
Weder das Element noch ein Nachfahre kann den Fokus erhalten, mit einer anderen Widget-Rolle oder cursor: pointer: cantTell (CLICK_HANDLER_NOT_FOCUSABLE). Eine Option der Liste einer combobox oder eine Zelle eines grid wird oft von dem Element aus bedient, das den Fokus behält, und die Aktion kann von einem anderen Steuerelement der Seite angeboten werden.

Was ein Befund meldet.

role: die ARIA-Rolle des Elements oder '', wenn es keine hat.
focusable: ob das Element selbst den Fokus erhalten kann.

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

<span role="button" tabindex="0" onclick="save()" onkeydown="if (event.key === 'Enter' || event.key === ' ') save()">Save</span>

Das span erhält den Fokus, und sein Tasten-Handler führt dieselbe Aktion aus wie der Klick.

fail

<div role="button" onclick="openPanel()">Open the panel</div>

Das Element gibt sich als Button aus und führt einen Click-Handler aus, aber der Tastaturfokus kann es nie erreichen.

can't tell

<span role="button" tabindex="0" onclick="showPreferences()">Manage my cookies</span>

Das span erhält den Fokus, aber Enter und Leertaste lösen darauf keinen Klick aus, und es hat keinen Inline-Tasten-Handler; ein per Skript hinzugefügter Listener wäre im Markup nicht zu sehen.

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.

`CLICK_HANDLER_FOCUS_LISTENER`

Klicken Sie auf das im Bericht genannte Element und notieren Sie, was passiert.
Laden Sie neu und drücken Sie dann Tab, bis das Element den Fokus hat.
Drücken Sie Eingabetaste, dann die Leertaste, und vergleichen Sie mit dem, was der Klick bewirkt hat.
Geht es hier nicht mit der Tastatur, prüfen Sie, ob sich das, was der Klick bewirkt, auf anderem Weg allein mit der Tastatur erledigen lässt, zum Beispiel mit einer Schaltfläche oder einem Menüeintrag an anderer Stelle der Seite. Das zählt nur, wenn es alles bewirkt, was der Klick bewirkt.

Bestanden. Die Eingabetaste (und bei schaltflächenartigen Bedienelementen die Leertaste) bewirkt dasselbe wie ein Klick, oder bei einem Tab zeigt schon das Fokussieren sein Panel, oder das, was der Klick bewirkt, lässt sich auf anderem Weg allein mit der Tastatur erledigen.

Nicht bestanden. Eingabetaste oder Leertaste bewirken nichts, auch wenn der Fokus angekommen ist, und was der Klick bewirkt, lässt sich nicht auf anderem Weg mit der Tastatur erledigen; das verstößt gegen WCAG 2.1.1 (F54).

`CLICK_HANDLER_KEY_LISTENER_ABOVE`

Klicken Sie auf das im Bericht genannte Element und notieren Sie, was passiert.
Drücken Sie Tab, bis das Element den Fokus hat.
Drücken Sie Eingabetaste, dann die Leertaste (und die Pfeiltasten, falls es in einer Gruppe steht), und vergleichen Sie mit dem Klick.
Geht es hier nicht mit der Tastatur, prüfen Sie, ob sich das, was der Klick bewirkt, auf anderem Weg allein mit der Tastatur erledigen lässt, zum Beispiel mit einer Schaltfläche oder einem Menüeintrag an anderer Stelle der Seite. Das zählt nur, wenn es alles bewirkt, was der Klick bewirkt.

Bestanden. Die Eingabetaste (und bei schaltflächenartigen Bedienelementen die Leertaste) bewirkt dasselbe wie ein Klick, oder das, was der Klick bewirkt, lässt sich auf anderem Weg allein mit der Tastatur erledigen.

Nicht bestanden. Eingabetaste oder Leertaste bewirken am Element nichts, der Listener darüber verarbeitet sie also nicht, und was der Klick bewirkt, lässt sich nicht auf anderem Weg mit der Tastatur erledigen; das verstößt gegen WCAG 2.1.1.

`CLICK_HANDLER_NOT_FOCUSABLE`

Klicken Sie auf das im Bericht genannte Element und notieren Sie, was sein Klick bewirkt.
Gehen Sie die Seite mit Tab durch und prüfen Sie, dass das Element nie den Fokus erhält.
Ist es ein Eintrag in einer Liste, einem Grid oder einer Combobox, fokussieren Sie dieses Widget und prüfen Sie mit den Pfeiltasten, ob der Eintrag aktiv wird und Eingabetaste die Aktion ausführt.
Andernfalls suchen Sie auf der Seite nach einem anderen per Tastatur bedienbaren Bedienelement, das dasselbe tut.

Bestanden. Dieselbe Aktion ist per Tastatur möglich, über das verwaltende Widget oder ein anderes Bedienelement.

Nicht bestanden. Die Aktion ist nur mit der Maus möglich; das verstößt gegen WCAG 2.1.1 (F54, F42).

`CLICK_HANDLER_NOT_IN_TAB_ORDER`

Klicken Sie auf das im Bericht genannte Element und notieren Sie, was passiert.
Gehen Sie die Seite mit Tab durch und prüfen Sie, ob der Fokus jemals darauf landet.
Gehört es zu einer Gruppe (Tabs, Menü, Symbolleiste, Liste), springen Sie mit Tab in die Gruppe und prüfen Sie, ob die Pfeiltasten den Fokus dorthin bewegen.
Sobald es den Fokus hat, drücken Sie Eingabetaste oder die Leertaste und vergleichen Sie mit dem Klick.
Geht es hier nicht mit der Tastatur, prüfen Sie, ob sich das, was der Klick bewirkt, auf anderem Weg allein mit der Tastatur erledigen lässt, zum Beispiel mit einer Schaltfläche oder einem Menüeintrag an anderer Stelle der Seite. Das zählt nur, wenn es alles bewirkt, was der Klick bewirkt.

Bestanden. Das Element ist per Tastatur erreichbar (Tab oder Pfeiltasten innerhalb seiner Gruppe) und Eingabetaste oder Leertaste bewirken dasselbe wie ein Klick, oder das, was der Klick bewirkt, lässt sich auf anderem Weg allein mit der Tastatur erledigen.

Nicht bestanden. Keine Taste bringt den Fokus zum Element, und was der Klick bewirkt, lässt sich nicht auf anderem Weg mit der Tastatur erledigen, die Aktion geht also nur mit der Maus; das verstößt gegen WCAG 2.1.1.

`CLICK_HANDLER_NO_KEY_HANDLER`

Klicken Sie auf das im Bericht genannte Element und notieren Sie, was passiert.
Laden Sie neu und drücken Sie dann Tab, bis das Element den Fokus hat.
Drücken Sie Eingabetaste, dann die Leertaste, und vergleichen Sie mit dem, was der Klick bewirkt hat.
Geht es hier nicht mit der Tastatur, prüfen Sie, ob sich das, was der Klick bewirkt, auf anderem Weg allein mit der Tastatur erledigen lässt, zum Beispiel mit einer Schaltfläche oder einem Menüeintrag an anderer Stelle der Seite. Das zählt nur, wenn es alles bewirkt, was der Klick bewirkt.

Nicht bestanden. Eingabetaste oder Leertaste bewirken nichts oder weniger als ein Klick, und was der Klick bewirkt, lässt sich nicht auf anderem Weg mit der Tastatur erledigen; das verstößt gegen WCAG 2.1.1 (F54).

Quellcode ansehen