Deutsch
Website-Menü

focus-not-removed-by-script

Ein Skript darf den Fokus nicht von einem Element entfernen, sobald es ihn erhält

automaticWCAG 2.1.1, 2.4.7 (AA)Konfidenz: mediumSchweregrad: seriousoperable

Meldet fail für Elemente in der Tab-Reihenfolge, deren Inline-onfocus-Handler nur blur() auf ihnen aufruft, und fragt zu anderen Handlern nach, die blur() oder focus() auf einem anderen Element aufrufen, was den Fokus entfernen kann, sobald das Element ihn erhält (WCAG-Fehler F55).

Anwendbarkeit. Elemente, die den Fokus erhalten können, die die Seite rendert und deren Inline-Handler onfocus blur() oder focus() auf einem anderen Element aufruft. Ohne ein solches Element oder in einem Dokument, in dem keines den Fokus erhalten kann, ist nichts anwendbar.

Erwartung. WCAG-Fehler F55: Ein Skript, das den Fokus von einem Element entfernt, sobald es ihn erhält, lässt Personen, die die Tastatur nutzen, das Element weder erreichen noch bedienen, und sie können nicht sehen, wo der Fokus ist.

  • FOCUS_HANDLER_BLURS_SELF: fail bei einem Element in der Tab-Reihenfolge, wenn der Handler nur das tut (this.blur(), blur() oder blur() auf event.target oder event.currentTarget, per Name oder in eckigen Klammern, gegebenenfalls hinter if (this.blur), höchstens mit einem return), wie es die Beispiele von F55 tun. Der Fokus geht nirgendwohin: Er wird fallen gelassen, nicht anderswohin geschickt. Außerhalb der Tab-Reihenfolge (tabindex="-1"), wo Personen, die die Tastatur nutzen, es nicht erreichen, wird nachgefragt.

Zu jedem anderen Element wird nachgefragt (cantTell):

  • FOCUS_HANDLER_CALLS_BLUR, wenn es blur() neben anderem Code oder auf einem anderen Element aufruft, wobei vom Skript abhängt, ob der Fokus verloren geht;
  • FOCUS_HANDLER_MOVES_FOCUS, wenn es focus() auf einem anderen Element aufruft (document.body.focus()), was den Fokus wegnimmt, sobald er ankommt, wie es der Test von F55 prüft.

Ein Handler, der den Fokus irgendwohin schickt (ein Sentinel einer Fokusfalle, eine Umleitung), ist der Fall des Verschiebens und wird nachgefragt, nie als fail gewertet: Die Regel liest den Text des Handlers, nicht, was die Seite tut, und eine Person kann es bestätigen, indem sie per Tab zum Element geht.

Was ein Befund meldet.

  • reasonCode: FOCUS_HANDLER_BLURS_SELF, FOCUS_HANDLER_CALLS_BLUR oder FOCUS_HANDLER_MOVES_FOCUS.
  • handler: der Wert des onfocus-Attributs, mit zusammengefasstem Leerraum, bis zu 120 Zeichen; ein längerer wird gekürzt und endet auf ….
  • tabbable: ob das Element in der Tab-Reihenfolge ist. Eines, das es nicht ist, kann den Fokus trotzdem durch einen Klick oder ein Skript erhalten.

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

fail
<a href="/offers" onfocus="this.blur()">Offers</a>

Der Link entfernt den Fokus von sich selbst, sobald er ihn erhält, das Beispiel des WCAG-Fehlers F55 selbst: Personen, die die Tastatur nutzen, können nicht auf ihm bleiben, um ihm zu folgen.

can't tell
<button type="button" onfocus="if (locked) this.blur(); track('focus')">Send</button>

Der Handler ruft blur() neben anderem Code auf, ob der Fokus verloren geht, hängt also vom Skript ab.

n/a
<span onfocus="this.blur()">Label</span>

Das <span> kann den Fokus nicht erhalten, daher wird sein Handler nie ausgeführt.

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.

FOCUS_HANDLER_BLURS_SELF

  1. Klicken Sie direkt vor das im Bericht genannte Element und drücken Sie dann Tab, bis der Fokus es erreichen sollte (ist es nicht in der Tab-Reihenfolge, klicken Sie stattdessen darauf).
  2. Beobachten Sie den Fokusindikator und prüfen Sie in der Konsole der Entwicklertools document.activeElement.
  3. Drücken Sie noch einmal Tab und sehen Sie, wohin der Fokus geht.

Bestanden. Der Fokus bleibt auf dem Element, sein Fokusindikator ist zu sehen, und das nächste Tab geht zum nächsten Bedienelement weiter.

Nicht bestanden. Der Fokus verschwindet vom Element, sobald er ankommt, sodass es per Tastatur nicht erreicht oder bedient werden kann; das verstößt gegen WCAG 2.1.1 und 2.4.7 (F55).

FOCUS_HANDLER_CALLS_BLUR

  1. Lesen Sie den onfocus-Handler, den der Bericht zitiert, und notieren Sie, wann er blur() aufruft und für welches Element.
  2. Klicken Sie direkt vor das Element und drücken Sie dann Tab, bis der Fokus es erreichen sollte; wiederholen Sie das in jedem Zustand, den der Handler prüft (zum Beispiel ein ausgefülltes oder leeres Feld).
  3. Beobachten Sie den Fokusindikator und prüfen Sie document.activeElement in der Konsole der Entwicklertools.
  4. Versuchen Sie, das Element mit der Tastatur zu bedienen (tippen, Eingabetaste oder die Leertaste drücken).

Bestanden. In jedem Zustand bleibt der Fokus auf dem Element, sein Fokusindikator ist zu sehen und es kann per Tastatur bedient werden.

Nicht bestanden. In einem Zustand wird der Fokus entfernt, sobald das Element ihn erhält, sodass es nicht per Tastatur bedient werden kann oder der Fokus aus dem Blick gerät; das verstößt gegen WCAG 2.1.1 und 2.4.7 (F55).

FOCUS_HANDLER_MOVES_FOCUS

  1. Lesen Sie den onfocus-Handler, den der Bericht zitiert, und notieren Sie, an welches Element er den Fokus weitergibt.
  2. Klicken Sie direkt vor das Element, drücken Sie dann Tab, bis der Fokus es erreichen sollte, und sehen Sie, wo der Fokus landet (prüfen Sie document.activeElement in der Konsole).
  3. Ist das Element ein unsichtbares, unbenanntes Wächterelement am Rand eines Dialogs, das den Fokus zurück in den Dialog leitet, beachten Sie, dass dies eine erwartete Fokusfalle für ein modales Fenster ist.
  4. Andernfalls versuchen Sie, das Element mit der Tastatur zu bedienen, und drücken Sie Umschalttaste+Tab, um zu sehen, ob Sie zurückgehen können.

Bestanden. Der Fokus geht an eine sinnvolle Stelle (die Fokusschleife eines Dialogs) oder bleibt auf dem Element, und jedes Bedienelement kann weiterhin per Tastatur erreicht und bedient werden.

Nicht bestanden. Ein sichtbares Bedienelement gibt den Fokus bei seiner Ankunft weiter, sodass es per Tastatur nicht erreicht oder bedient werden kann; das verstößt gegen WCAG 2.1.1 und 2.4.7 (F55).

Quellcode ansehen