mouse-only-event-handlers

Event-Handler nur für Zeigergeräte sollten ein per Tastatur erreichbares Gegenstück haben

manualWCAG 2.1.1, 2.1.3 (AAA)Konfidenz: lowSchweregrad: moderateoperable

Markiert Elemente mit einem Event-Handler nur für Zeigergeräte (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave), inline oder, mit dem Listener-Hook, per Skript hinzugefügt, ohne per Tastatur erreichbares Gegenstück (onkeydown/onkeyup/onkeypress/onfocus/onblur) zur manuellen Prüfung.

Anwendbarkeit. Elemente mit mindestens einem Inline-Event-Handler-Attribut nur für Zeigergeräte (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave) mit nicht leerem Wert oder, wo die Seite den Listener-Hook ausführt (listenerHookScript), einem per Skript hinzugefügten Listener eines dieser Typen (addEventListener oder die on…-Eigenschaft), die außerdem infrage kommen bzw. erreichbar sind (nicht ausgeblendet/aria-hidden/display:none).

Erwartung. Das Element trägt außerdem mindestens einen per Tastatur erreichbaren Inline-Handler: onkeydown, onkeyup, onkeypress (die direkten Tastaturereignis-Entsprechungen) oder onfocus/onblur (der übliche Ersatz für hover-ausgelöstes Verhalten: focus/blur sind das per Tastatur navigierbare Gegenstück zu mouseover/mouseout, gemäß WCAG-Technik G90). Ein Handler ist nur erreichbar, wenn Tastaturereignisse ihn erreichen können: onfocus/onblur, wenn das Element selbst den Fokus erhalten kann, und ein Tasten-Handler, wenn das Element oder einer seiner Nachfahren es kann (Tastenereignisse steigen auf, Fokusereignisse nicht). Andernfalls kann das mausgesteuerte Verhalten des Elements (ein Hover-Tooltip, ein eigenes Dropdown, eine Drag-Interaktion) von Personen, die nur die Tastatur nutzen, nicht ausgelöst werden, und es wird mit einem Grund gemeldet, der angibt, ob die Tastatur-Handler fehlen oder nicht ausgeführt werden können. Mit dem Listener-Hook zählt ein per Skript auf dem Element hinzugefügter Tasten-, focus- oder blur-Listener wie der entsprechende Inline-Handler, ebenso focusin/focusout-Listener, die wie Tastenereignisse auch für einen fokussierten Nachfahren ausgelöst werden.

Was ein Befund meldet.

  • mouseAttrs: die Handler nur für Zeigergeräte, die das Element hat. Ein Eintrag ist ein Attributname, etwa onmouseover; ein per Skript hinzugefügter Listener wird mit dem Attribut seines Typs benannt.
  • keyboardAttrs (Handler, die nicht ausgeführt werden können, MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE): die Tastatur-Handler-Attribute des Elements, die Tastaturereignisse nicht erreichen können. Ein Eintrag ist ein Attributname, etwa onfocus.

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

can't tell
<div onmouseover="show()" onmouseout="hide()">Hover-only tooltip trigger</div>

onmouseover/onmouseout haben kein Gegenstück onfocus/onblur, daher können Personen, die die Tastatur verwenden, dieses Verhalten nie auslösen.

can't tell
<div onmouseover="show()" onfocus="show()">Menu</div>

Der onfocus-Handler wird nie ausgeführt: Das <div> kann den Fokus nicht erhalten.

n/a
<div onmouseover="show()" onmouseout="hide()" onfocus="show()" onblur="hide()" tabindex="0">Hover + focus pair</div>

Jeder Maus-Handler hat einen gleichwertigen Fokus-Handler für die Tastatur.

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.

MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE

  1. Suchen Sie das im Bericht genannte Element und notieren Sie, was seine Maus-Handler tun, indem Sie mit dem Zeiger darüberfahren oder darauf klicken.
  2. Gehen Sie diesen Teil der Seite mit Tab durch und beobachten Sie, ob der Fokus jemals auf dem Element oder etwas darin landet.
  3. Wenn ja, probieren Sie Eingabetaste, Leertaste und die Pfeiltasten und vergleichen Sie mit dem, was die Maus bewirkt hat.
  4. Geht es hier nicht mit der Tastatur, prüfen Sie, ob sich das, was die Maus 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 die Maus bewirkt.

Bestanden. Das Element (oder etwas darin) erhält den Tastaturfokus und seine Tastatur- oder Fokus-Handler bewirken dasselbe wie die Maus, oder das, was die Maus bewirkt, lässt sich auf anderem Weg allein mit der Tastatur erledigen, oder die Mausaktion ist rein visuell.

Nicht bestanden. Der Fokus erreicht das Element nie, und was die Maus bewirkt, lässt sich nicht auf anderem Weg mit der Tastatur erledigen; das verstößt gegen WCAG 2.1.1 (F54).

MOUSE_ONLY_HANDLER_NO_KEYBOARD_EQUIVALENT

  1. Suchen Sie das im Bericht genannte Element und notieren Sie seine Maus-Handler (etwa onmouseover oder ondblclick).
  2. Fahren Sie mit der Maus darüber, klicken oder doppelklicken Sie darauf und notieren Sie, was passiert (ein Menü öffnet sich, ein Tooltip erscheint, ein Eintrag bewegt sich).
  3. Laden Sie neu und verwenden Sie dann nur die Tastatur: Springen Sie mit Tab zum Element (oder dem Bedienelement um es herum) und probieren Sie Eingabetaste, Leertaste, die Pfeiltasten und Esc.
  4. Prüfen Sie, ob dasselbe Ergebnis eintritt oder ob dieselbe Funktion von einem anderen per Tastatur erreichbaren Bedienelement angeboten wird.

Bestanden. Die Mausaktion fügt nur einen visuellen Effekt hinzu, oder die Tastatur erzielt beim Fokussieren oder mit einer Taste dasselbe Ergebnis.

Nicht bestanden. Etwas, das die Maus bewirkt (ein Menü öffnen, Informationen anzeigen, einen Eintrag verschieben), ist mit der Tastatur nicht möglich; das verstößt gegen WCAG 2.1.1 (F54).

Quellcode ansehen