Einführung in den Fokus

Bildschirmfokus bei Bedienungshilfen – Übersicht

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

In dieser Lektion geht es um den Fokus und darum, wie Sie ihn in Ihrer Anwendung verwalten können. Der Fokus bezieht sich darauf, welches Steuerelement auf dem Bildschirm (ein Eingabeelement wie ein Feld, ein Kästchen, eine Schaltfläche oder ein Link) derzeit Eingaben über die Tastatur und aus der Zwischenablage erhält, wenn Sie Inhalte einfügen.

Dies ist ein guter Ausgangspunkt, um mehr über Barrierefreiheit zu erfahren, da wir alle wissen, wie man eine Tastatur verwendet, die sich leicht mit der Barrierefreiheit identifizieren und testen lässt und praktisch alle Nutzer davon profitieren.

Nutzer mit motorischen Beeinträchtigungen, z. B. dauerhafte Lähmung oder ein verstauchtes Handgelenk, nutzen zum Navigieren auf der Seite möglicherweise eine Tastatur oder ein Schaltergerät. Daher ist eine gute Fokusstrategie entscheidend, um eine gute Nutzerfreundlichkeit zu bieten.

Poweruser, die alle Tastenkombination auf ihrem Computer kennen, können produktiver arbeiten, wenn sie einfach nur mit der Tastatur schnell durch Ihre Website navigieren können.

Mit einer gut implementierten Fokusstrategie können Sie dafür sorgen, dass alle Ihre Anwendung optimal nutzen können. In den kommenden Lektionen werden wir sehen, dass Ihr Fokus eine wichtige Grundlage für die Unterstützung von Nutzenden und tatsächlich aller Nutzenden ist.

Worauf bezieht sich der Fokus?

Der Fokus legt fest, wo Tastaturereignisse zu einem bestimmten Zeitpunkt auf der Seite erscheinen. Wenn Sie beispielsweise den Fokus auf ein Texteingabefeld legen und mit der Eingabe beginnen, empfängt das Eingabefeld die Tastaturereignisse und zeigt die eingegebenen Zeichen an. Während dieser fokussiert ist, erhält er auch eingefügte Eingaben aus der Zwischenablage.

Tastaturfokus in einem Textfeld.

Das aktuell hervorgehobene Element wird oft durch einen Fokusring gekennzeichnet, dessen Stil sowohl vom Browser als auch vom Stil abhängt, den der Autor der Seite angewendet hat. So hebt Chrome beispielsweise fokussierte Elemente in der Regel mit einem blauen Rahmen hervor, während bei Firefox eine gestrichelte Rahmenlinie verwendet wird.

Schaltfläche „Anmelden“.

Einige Nutzer bedienen ihren Computer fast vollständig mit der Tastatur oder einem anderen Eingabegerät. Für diese Nutzer ist der Fokus von entscheidender Bedeutung. Sie ist ihr wichtigstes Mittel, um alles auf dem Bildschirm zu erreichen. Aus diesem Grund besagt die Web AIM-Checkliste in Abschnitt 2.1.1, dass alle Seitenfunktionen über die Tastatur verfügbar sein sollten, es sei denn, dies ist mit einer Tastatur nicht möglich, z. B. beim Freihandzeichnen.

Als Nutzer können Sie mithilfe von Tab, Shift+Tab oder den Pfeiltasten steuern, welches Element gerade im Fokus ist. Unter Mac OSX funktioniert das etwas anders: In Chrome lässt sich immer mit Tab navigieren. In anderen Browsern wie Safari müssen Sie Option+Tab drücken, um den Fokus zu ändern. Sie können diese Einstellung im Abschnitt „Tastatur“ in den Systemeinstellungen ändern.

Dialogfeld mit den Tastatureinstellungen.

Die Reihenfolge, in der der Fokus durch interaktive Elemente vorwärts und rückwärts über Tab vorwärts und rückwärts durchläuft, wird, wenig überraschend, als Tab-Reihenfolge bezeichnet. Das Erstellen einer Seite mit einer logischen TAB-Reihenfolge ist ein wichtiger Schritt, den wir später behandeln werden.

Was ist fokussierbar?

Integrierte interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten sind implizit fokussierbar, d. h. sie werden automatisch in die Tab-Reihenfolge eingefügt und verfügen über eine integrierte Tastaturereignis-Verarbeitung ohne Eingriff des Entwicklers.

Implizit fokussierbare Felder.

Es sind jedoch nicht alle Elemente fokussierbar. Absätze, Divs und verschiedene andere Seitenelemente werden nicht hervorgehoben, wenn Sie mit der Tabulatortaste durch die Seite navigieren. Das ist so gewollt. Es ist im Allgemeinen nicht nötig, etwas zu fokussieren, wenn die Nutzenden nicht damit interagieren können.

Nicht alle Elemente sind fokussierbar,

Fokus auf den Fokus

Lassen Sie uns einige der gerade besprochenen Fokustechniken ausprobieren. Rufen Sie in Chrome die Mockup-Seite der Fluggesellschaften auf und suchen Sie über die Tastatur nach einem bestimmten Ticket. Die Seite lässt keine Mauseingaben zu, sodass Sie die Übung nicht überladen können (nicht, dass wir Ihnen nicht vertrauen ;-).

Modell der Website einer Fluggesellschaft

Folgende Ticketparameter sollten Sie angeben:

  • Nur Hinflug
  • nach Melbourne
  • Abflug am 12. Oktober 2017 (12.10.2017)
  • Rückkehr am 23. Oktober 2017 (23.10.2017)
  • Fenstersitz
  • möchten keine Werbeangebote erhalten.

Wenn Sie das Formular ohne Eingabefehler ausfüllen und die Schaltfläche „Suchen“ aktivieren, wird das Formular einfach gelöscht und zurückgesetzt. Füllen Sie das Formular aus und kehren Sie dann zurück.

Sehen wir uns an, wie das Formular die Tastatureingabe nutzt. Beginnend mit den ersten Tab-Vorgängen werden im Browser die Navigationselemente für Flüge, Hotels und Mietwagen hervorgehoben. Wenn Sie weiterhin Tab drücken, gelangen Sie zur Gruppe von Optionsfeldern, in der Sie mit den Pfeiltasten zwischen „Hin- und Rückflug“, „Einfache Fahrt“ oder „Multi-City“ wählen können.

Fahren Sie mit den Feldern für Name und Adresse fort. Geben Sie die erforderlichen Informationen ein. Wenn Sie am Zielauswahlelement angekommen sind, können Sie mit den Pfeiltasten eine Stadt auswählen oder mit der Eingabe beginnen, um das Feld automatisch zu vervollständigen. Ebenso können Sie in den Datumsfeldern die Pfeiltasten verwenden oder einfach ein Datum eingeben.

Die Auswahl eines Sitzplatztyps beruht auch auf den Pfeiltasten oder Sie können „w“, „a“ oder „n“ eingeben, um zu einer Sitzoption zu springen. Dann können Sie die standardmäßigen Werbeangebote deaktivieren, indem Sie die Leertaste drücken, während das Kästchen hervorgehoben ist. Fokussieren Sie abschließend die Schaltfläche „Search“ und drücken Sie Enter, um das Formular zu senden.

Es ist sehr praktisch, wenn Sie nur über die Tastatur mit einem Formular interagieren und nicht zur Maus und zurück wechseln müssen, um eine Aufgabe zu erledigen. Da alle im Formular verwendeten Elemente native HTML-Tags mit implizitem Fokus sind, funktioniert das Formular problemlos mit der Tastatur und Sie müssen keinen Code schreiben, um das Fokusverhalten hinzuzufügen oder zu verwalten.