Mit der Funktion „Sequenzieller Fokus-Navigationsstartpunkt“ wird definiert, wo wir mit der Suche nach fokussierbaren Elementen für die sequenzielle Fokus-Navigation ([Tab] oder [Umschalt-Tab]) beginnen, wenn kein Bereich im Fokus ist. Das ist besonders hilfreich für Eingabehilfefunktionen wie „Links überspringen“ und zum Verwalten des Fokus im Dokument.
HTML bietet uns viel integrierte Unterstützung für die Verarbeitung von Tastatureingaben. Das bedeutet, dass es ziemlich einfach ist, Seiten zu schreiben, die über die Tastatur verwendet werden können – egal, ob eine motorische Beeinträchtigung uns daran hindert, eine Maus zu verwenden, oder wir einfach so effizient sind, dass das Entfernen der Hände von der Tastatur wertvolle Millisekunden verschwendet.
Die Tastatursteuerung dreht sich um den Fokus, der bestimmt, wohin Tastaturereignisse auf der Seite geleitet werden. Bisher mussten wir in einigen Situationen zusätzliche Maßnahmen ergreifen, damit die Bedienung mit der Tastatur reibungslos funktioniert. Mit der Methode focus() können wir den Fokus verwalten, indem wir als Reaktion auf eine Nutzeraktion ein Element auswählen, auf das fokussiert werden soll. Diese Best Practice hat jedoch viele Tücken und erfordert einige knifflige JavaScript-Hacks, um eine grundlegende Nutzerfreundlichkeit zu bieten.
Diese Technik wird zwar nicht so schnell verschwinden, aber in Chrome 50 ist sie dank des sequenziellen Fokusnavigations-Startpunkts in weniger Fällen erforderlich. Durch diese Änderung werden gut geschriebene Seiten automatisch zugänglicher, ohne dass eine zusätzliche manuelle Fokusverwaltung erforderlich ist. Sehen wir uns ein Beispiel an.
Link auf einer Seite
Auf Websites mit viel Text werden häufig interne Links auf derselben Seite verwendet, damit Nutzer schnell zu wichtigen Abschnitten springen können.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Wenn ich ein Tastaturnutzer wäre (und ein Fan australischer Speisen), würde ich als Nächstes so vorgehen:
- Drücke zweimal
Tab, um den Link „Rezepte“ zu fokussieren. - Drücke
Enter, um direkt zum Bereich „Rezepte“ zu gelangen - Drücken Sie noch einmal
Tab, um den Link „Weitere Informationen“ zu fokussieren.
Sehen wir uns das in Aktion mit Chrome 49 an.
Oh. Das ist ja nicht ganz nach Plan gelaufen.
Anstatt den Link „Weitere Informationen“ in den Fokus zu rücken, wurde durch das letzte Drücken von Tab der Fokus auf das nächste Element im Inhaltsverzeichnis verschoben. Das liegt daran, dass der Entwickler tabindex="-1" im Header nicht festgelegt hat, damit er fokussierbar ist. Wenn Sie also auf den Anker #recipes geklickt haben, wurde der Fokus nicht verschoben. Es handelt sich um einen kleinen Fehler, der für Mausnutzer nicht weiter schlimm ist. Für Nutzer von Tastaturen oder Schaltern kann das aber ein großes Problem sein. Wie viele Links gibt es auf einer typischen Wikipedia-Seite? Es wäre frustrierend, ständig zwischen all diesen Ankern hin- und herwechseln zu müssen.
Sehen wir uns nun an, wie das Ganze in Chrome 50 aussieht.
Wow, das ist genau das, was wir wollten. Und das Beste daran: Wir mussten unseren Code nicht ändern. Der Browser hat einfach anhand der Stelle im Dokument, an der wir uns befanden, ermittelt, wohin der Fokus verschoben werden sollte.
Wie funktioniert das?
Vor der Implementierung des Fokus-Startpunkts wurde der Fokus immer vom vorherigen Element im Fokus oder vom Seitenanfang aus verschoben. Das bedeutet, dass beim Auswählen des nächsten Elements, auf das fokussiert werden soll, der Fokus auf etwas verschoben werden kann, das eigentlich nicht fokussierbar sein sollte, z. B. ein Containerelement oder eine Überschrift. Das führt zu allen möglichen Problemen, z. B. wird ein Fokusring angezeigt, wenn Sie versehentlich auf ein solches Element klicken.
Der Fokus-Startpunkt bietet, wie der Name schon sagt, einen Mechanismus, um vorzuschlagen, wo nach dem nächsten fokussierbaren Element gesucht werden soll, wenn wir Tab oder Shift-Tab drücken.
Sie kann auf verschiedene Arten festgelegt werden:
Wenn etwas den Fokus hat, ist es wie bisher auch der Startpunkt für die Fokusnavigation.
Wenn der Startpunkt für die Fokusnavigation nicht anderweitig festgelegt wurde, ist er wie bisher das aktuelle document oder, falls verfügbar und unterstützt, das aktuell aktive dialog.
Wenn wir zu einem Seitenfragment wie im obigen Beispiel navigieren, wird jetzt der Fokusstartpunkt festgelegt.
Wenn wir auf ein beliebiges Element auf der Seite klicken, unabhängig davon, ob es fokussierbar ist, wird dadurch der Startpunkt für die Fokusnavigation festgelegt.
Wenn das Element, das den Fokus-Startpunkt darstellt, aus dem DOM entfernt wird, wird das übergeordnete Element zum Fokus-Startpunkt. Kein „Whack-a-Mole“ mehr beim Fokussieren
Andere Anwendungsfälle
Neben dem oben genannten Beispiel gibt es viele weitere Szenarien, in denen diese Funktion nützlich sein kann.
Elemente ausblenden
Es kann vorkommen, dass ein Nutzer sich auf ein Element konzentriert, das auf visibility: hidden oder display: none gesetzt werden muss. Ein Beispiel hierfür sind anklickbare Elemente in einem Karussell. In früheren Chrome-Versionen wurde der Fokus durch das Ausblenden des aktuell fokussierten Elements auf den Standardstartpunkt zurückgesetzt. Das oben erwähnte Karussell wurde so zu einer unangenehmen Falle für Nutzer mit motorischen Einschränkungen. Mit dem sequenziellen Fokus-Startpunkt ist das nicht mehr der Fall. Wenn ein Element mit einer der oben genannten Methoden ausgeblendet wird, wird durch Drücken der Tab-Taste einfach zum nächsten fokussierbaren Element gewechselt.
Links überspringen
Sprunglinks sind unsichtbare Anker, die nur über die Tastatur erreicht werden können. Sie ermöglichen es Nutzern, Navigationselemente zu überspringen, um direkt zu den Inhalten einer Seite zu gelangen. Das kann für Nutzer, die Tastaturen und Schaltergeräte verwenden, sehr hilfreich sein. Wie auf der WebAIM-Website erläutert
Viele beliebte Websites verwenden Sprunglinks, auch wenn Sie sie vielleicht noch nie bemerkt haben.
Da Sprunglinks benannte Anker sind, funktionieren sie genauso wie unser ursprüngliches Beispiel für ein Inhaltsverzeichnis.
Einschränkungen und Support
Der Ausgangspunkt für die sequenzielle Fokusnavigation wird derzeit nur in Chrome 50, Firefox und Opera unterstützt. Bis es in allen Browsern unterstützt wird, müssen Sie Ihren benannten Ankerzielen weiterhin tabindex="-1" hinzufügen und die Fokusumrisslinie entfernen.
Demo
Der Ausgangspunkt für die sequenzielle Fokusnavigation ist eine großartige Ergänzung der Barrierefreiheitsfunktionen des Browsers. Es ist einfach zu verstehen und ermöglicht es uns, Code aus unserer Anwendung zu entfernen und gleichzeitig die Nutzerfreundlichkeit zu verbessern. Doppelt gewonnen! In der Demo können Sie sich diese Funktion genauer ansehen.