Bei Fokus

Das bloße Wechseln des Fokus auf ein Element – z. B. durch Drücken der Tabulatortaste (Tab) – darf niemals eine größere Änderung auslösen, wie das Laden einer neuen Seite, das Absenden eines Formulars oder das Öffnen eines Popups.

Dies ist eine : Die Automatisierung kann aus minimiertem oder Framework-JavaScript nicht zuverlässig erkennen, ob ein Fokus-Handler den Kontext ändert, daher zeigt Silktide auf jeder Seite eine Aufforderung an, und eine Person bestätigt dies durch Tabben.

Warum das wichtig ist

Tastaturnutzende bewegen den Fokus über eine Seite, um sie zu erkunden – so wie Mausnutzende den Zeiger bewegen. Ein Steuerelement zu erreichen, ist nicht dasselbe wie sich dafür zu entscheiden, es zu benutzen. Wenn bereits das Hineintabben in ein Suchfeld die Seite neu lädt oder das Erreichen einer Schaltfläche einen Dialog öffnet, werden Tastatur- und -Nutzende an einen Ort gezerrt, an den sie nicht wollten – oft verlieren sie dabei ihre Position und ihre Arbeit. Menschen mit motorischen Beeinträchtigungen, die langsam, Element für Element, navigieren, geraten ständig in solche Fallen.

Dies ist das -Erfolgskriterium 3.2.1 (Bei Fokus), eine Anforderung der – Teil der grundlegendsten Konformitätsstufe.

Was zu prüfen ist

Tabben Sie durch jedes fokussierbare Steuerelement auf der Seite.
Bestätigen Sie, dass der Fokus allein niemals navigiert, ein Formular absendet oder einen Dialog bzw. ein neues Fenster öffnet.
Fokus-Handler, die lediglich ein Feld hervorheben, einen Hinweis anzeigen oder im Hintergrund Daten vorbereiten, sind unproblematisch.

Wenn der Fokus den Kontext niemals ändert, Sie den Befund.

So beheben Sie es

Verschieben Sie die Aktion aus dem Fokus-Handler heraus. Navigation, Absenden und Dialoge sollten durch eine eindeutige Aktion ausgelöst werden, z. B. click, Eingabetaste oder eine vom Besuchenden bestätigte Änderung.
Verwenden Sie Fokus-Handler nur für nicht störende Effekte.

\/\/ Problem: Das Erreichen des Feldes navigiert sofort
searchBox.addEventListener('focus', () => {
  window.location.href = '\/search';
});

\/\/ Lösung: Nur navigieren, wenn die Person aktiv handelt
searchBox.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    window.location.href = '\/search';
  }
});

Wie Silktide dies testet

Silktide kann fokusbedingte Kontextänderungen nicht zuverlässig durch das Untersuchen des Listener-Quellcodes erkennen – Frameworks und Minifizierung machen das fragil –, daher erzeugt diese Prüfung pro Seite eine Überprüfungsaufforderung, die beschreibt, was per Tabben zu verifizieren ist.