3.2.1 Bei Fokus

Den Fokus auf ein Element zu setzen, per Tabulatortaste oder per Klick, darf nicht von selbst ein Fenster öffnen, ein Formular absenden, eine Seite laden oder den Fokus woandershin werfen.

/ Was es verlangt

Den Fokus zu erhalten ist die Art, wie Tastatur- und Screenreader-Nutzer bei einem Bedienelement ankommen, bevor sie entscheiden, was sie damit tun. Das Kriterium besagt, dass es keinen Kontextwechsel auslösen darf, wenn irgendein Bestandteil der Benutzerschnittstelle den Fokus erhält. Als Beispiele nennt das W3C Formulare, die beim Erhalt des Fokus abgeschickt werden, neue Fenster, die sich dabei öffnen, und einen Fokus, der gleich an einen anderen Bestandteil weitergereicht wird. Ein Kontextwechsel ist eine größere Veränderung: eine neue Seite, ein neues Fenster, ein Fokus, der woandershin springt, oder Inhalt, der so umgebaut wird, dass die Seite etwas anderes bedeutet. Wer mit der Tabulatortaste durch eine Seite geht oder eine Vergrößerung oder einen Screenreader nutzt, verliert dabei die Orientierung.

Der Fokus kann über die Tastatur kommen oder durch einen Klick in ein Feld; das Überfahren mit der Maus verschiebt den Fokus nicht, außer ein Skript sorgt dafür. Ein Klick auf eine Schaltfläche fokussiert sie und löst sie zugleich aus, und das Auslösen darf den Kontext wechseln. Eine Inhaltsänderung, die kein Kontextwechsel ist, etwa ein Hinweis unter einem Feld oder ein Menü, das aufklappt, während der Fokus bleibt, ist erlaubt. Das Kriterium kennt keine Ausnahmen und bietet, anders als 3.2.2 Bei Eingabe, keinen Ausweg über eine vorherige Ankündigung.

/ Woran Seiten scheitern

Ein Hilfedialog öffnet sich jedes Mal, wenn ein Feld den Fokus erhält, und nimmt den Fokus mit, sodass ein Tastaturnutzer nie an dem Feld vorbeikommt.
Ein Link oder eine Schaltfläche ruft in einem onfocus-Handler this.blur() auf, um den Fokusrahmen zu verstecken, und wirft den Fokus damit vom Element.
Mit der Tabulatortaste auf eine Schaltfläche „Fertig“ zu gehen schickt das Formular ab und lädt die nächste Ansicht, ohne dass die Schaltfläche gedrückt wurde.
Ein Pop-up-Fenster öffnet sich, wenn ein Link in der Navigation den Fokus erhält.
Den Fokus in das Suchfeld im Kopfbereich zu setzen führt auf eine eigene Suchseite, bevor überhaupt etwas eingetippt wurde.

/ So prüfen Sie es selbst

Beginnen Sie oben auf der Seite und gehen Sie mit der Tabulatortaste durch alle Elemente, ohne Eingabetaste oder Leertaste zu drücken. Achten Sie auf neue Fenster, geladene Seiten, abgeschickte Formulare und einen Fokus, der an eine Stelle springt, an die Sie ihn nicht geschickt haben.
Wiederholen Sie das mit Umschalt+Tab und klicken Sie mit der Maus in jedes Textfeld, denn auch Fokus, der per Zeiger ankommt, zählt.
Öffnen Sie eigene Widgets wie Menüs, Datumsauswahlen und Comboboxen nur durch Fokus. Was dabei erscheint, ist in Ordnung, solange der Fokus bleibt, wo er war, und die Seite ihre Bedeutung behält.
Durchsuchen Sie in den Entwicklerwerkzeugen die Skripte nach focus- und focusin-Handlern und onfocus-Attributen, die submit(), window.open() oder blur() aufrufen oder location setzen.
Gehen Sie mit einem Screenreader wie NVDA noch einmal durch und notieren Sie jede Stelle, an der die Ansage in einen anderen Teil der Seite springt.

/ So beheben Sie es

Lösen Sie Kontextwechsel durch Aktivierung aus, also das click-Ereignis einer Schaltfläche oder eines Links, niemals durch focus oder focusin.
Entfernen Sie blur()-Aufrufe aus Fokus-Handlern und gestalten Sie den Fokusindikator mit :focus-visible, statt den Fokus wegzunehmen.
Zeigen Sie die Hilfe zu einem Feld direkt an, als Text darunter, der über aria-describedby verknüpft ist, statt beim Fokussieren einen Dialog zu öffnen.
Öffnen Sie neue Fenster nur über einen Link oder eine Schaltfläche, die die Person auslöst.
Führt ein Suchfeld zu einer vollständigen Suchseite, wechseln Sie beim Absenden der Suche dorthin, nicht beim Fokussieren des Feldes.

/ Was unser Scanner prüft

In unserem Scan ist keine Regel unter 3.2.1 eingeordnet. Die Rendering-Engine fokussiert zwar die Tabulatorstopps nacheinander, während sie 2.4.7 Fokus sichtbar misst, hält aber nicht fest, was das Fokussieren bewirkt hat, und ein Element, das den Fokus nicht behält, wird als nicht fokussierbar übergangen statt gemeldet. Der HTML_CodeSniffer-Test für 3.2.1 gibt nur einen Hinweis aus, den der Scan verwirft. Mit der Tabulatortaste durch die Seite zu gehen und jede Folge zu beurteilen gehört zur manuellen Prüfung.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Worin unterscheiden sich 3.2.1 Bei Fokus und 3.2.2 Bei Eingabe?

3.2.1 betrifft einen Bestandteil, der den Fokus erhält. 3.2.2 betrifft das Ändern seiner Einstellung, etwa die Auswahl einer Option oder das Ankreuzen eines Kästchens. Bei Eingabe ist ein Kontextwechsel erlaubt, wenn die Person vor der Benutzung des Bedienelements darüber informiert wurde. Bei Fokus kennt keine solche Klausel, das Fokussieren eines Bestandteils darf also nie einen Kontextwechsel auslösen.

Darf sich ein Menü oder Tooltip öffnen, wenn ein Element den Fokus erhält?

Ja, wenn es eine Inhaltsänderung ist und kein Kontextwechsel. Einen Tooltip zu zeigen, ein Untermenü aufzuklappen oder einen Hinweis einzublenden ist erlaubt, solange der Fokus auf dem Element bleibt und die Seite ihre Bedeutung behält. Zum Verstoß wird es, wenn das Öffnen den Fokus verschiebt, ein neues Fenster öffnet oder eine andere Seite lädt.

Verstößt ein Klick auf eine Schaltfläche, die eine neue Seite öffnet, gegen Bei Fokus?

Nein. Ein Klick fokussiert eine Schaltfläche und löst sie zugleich aus, und den Kontext wechselt das Auslösen, um das die Person gebeten hat. Das Kriterium betrifft den Fokus allein, etwa wenn jemand mit der Tabulatortaste auf eine Schaltfläche geht und etwas geschieht, bevor er sie drückt.

Eigene Seite messen Alle gemessenen Barrieren