Mit der Funktion „Ausgangspunkt für die sequenzielle Fokusnavigation“ wird festgelegt, wo nach fokussierbaren Elementen für die sequenzielle Fokusnavigation ([Tabulatortaste] oder [Umschalttaste + Tabulatortaste]) gesucht wird, wenn kein Bereich im Fokus ist. Das ist besonders hilfreich für Eingabehilfefunktionen wie „Links überspringen“ und die Verwaltung des Fokus im Dokument.
HTML bietet viele integrierte Funktionen für die Tastaturinteraktion. Das bedeutet, dass es ziemlich einfach ist, Seiten zu erstellen, die über die Tastatur verwendet werden können – unabhängig davon, 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 Tastaturverwaltung dreht sich um den Fokus, der bestimmt, wo Tastaturereignisse auf der Seite ausgeführt werden. Es gibt einige Situationen, in denen wir bisher zusätzliche Arbeit leisten mussten, um die Nutzung für Tastaturnutzer zu optimieren. Mit der focus()-Methode können wir den Fokus verwalten, indem wir ein Element auswählen, das als Reaktion auf eine Nutzeraktion fokussiert werden soll. Diese Best Practice birgt jedoch viele Fallstricke und erfordert einige knifflige JavaScript-Hacks, um eine grundlegende Funktionsweise zu ermöglichen.
Diese Technik wird zwar nicht so schnell verschwinden, aber in Chrome 50 ist sie dank des Startpunkts für die sequenzielle Fokusnavigation in weniger Fällen erforderlich. Durch diese Änderung werden gut erstellte Seiten automatisch barrierefreier, ohne dass eine manuelle Fokusverwaltung erforderlich ist. Sehen wir uns ein Beispiel an.
Link auf einer Seite
Websites mit viel Text sind oft innerhalb derselben Seite miteinander verknüpft, 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 eine Tastatur verwenden würde (und ein Fan australischer Gerichte wäre), würde meine nächste Abfolge von Aktionen ungefähr so aussehen:
- Drücke zweimal auf
Tab, um den Link zu „Rezepte“ hervorzuheben. - Drücke
Enter, um zum Abschnitt „Rezepte“ zu gelangen. - Drücke noch einmal auf
Tab, um den Link „Weiterlesen“ hervorzuheben.
Sehen wir uns das in Chrome 49 an.
Oh. Das lief also nicht ganz nach Plan, oder?
Anstatt den Fokus auf den Link „Weitere Informationen“ zu legen, wurde durch das Drücken von Tab zum letzten Mal der Fokus auf das nächste Element im Inhaltsverzeichnis verschoben. Das liegt daran, dass der Entwickler tabindex="-1" nicht für die Überschrift festgelegt hat, um sie fokussierbar zu machen. Wenn Sie also auf den Anker #recipes klicken, wird der Fokus nicht verschoben. Das ist ein kleiner Fehler und kein Problem, wenn Sie eine Maus verwenden. Für Nutzer von Tastaturen oder Schaltern ist das jedoch ein großes Problem. Denken Sie an die Anzahl der Verknüpfungen auf einer typischen Wikipedia-Seite? Es wäre frustrierend, ständig zwischen all diesen Ankern hin- und herspringen zu müssen.
Sehen wir uns das jetzt mit Chrome 50 an.
Wow, genau das wollten wir. Und das Beste daran ist, dass wir unseren Code nicht ändern mussten. Der Browser hat einfach anhand unserer Position im Dokument ermittelt, wo der Fokus liegen sollte.
Wie funktioniert das?
Vor der Implementierung des Fokus-Startpunkts wurde der Fokus immer entweder vom vorherigen Element im Fokus oder von oben auf der Seite verschoben. Das bedeutet, dass Sie bei der Auswahl des nächsten Elements, auf das der Fokus gelegt werden soll, möglicherweise ein Element auswählen müssen, das eigentlich nicht hervorgehoben werden sollte, z. B. ein Containerelement oder eine Überschrift. Das führt zu allerlei Unstimmigkeiten, z. B. wird ein Fokusring angezeigt, wenn Sie zufällig auf ein solches Element klicken.
Der Fokus-Startpunkt bietet, wie der Name schon sagt, einen Mechanismus, der vorschlägt, wo nach dem nächsten fokussierbaren Element gesucht werden soll, wenn wir Tab oder Shift-Tab drücken.
Es kann auf verschiedene Arten festgelegt werden:
Wenn ein Element den Fokus hat, ist es wie zuvor auch der Ausgangspunkt für die Fokusnavigation.
Wenn der Startpunkt der Fokusnavigation nicht anderweitig festgelegt wurde, ist es wie bisher der aktuelle document oder, falls verfügbar und unterstützt, der aktuell aktive dialog.
Wenn wir wie im Beispiel oben zu einem Seitenfragment wechseln, wird jetzt der Fokus-Startpunkt festgelegt.
Wenn wir auf ein beliebiges Element auf der Seite klicken, unabhängig davon, ob es fokussierbar ist, wird jetzt der Startpunkt der Fokusnavigation festgelegt.
Wenn das Element, das der Startpunkt des Fokus war, aus dem DOM entfernt wird, wird sein übergeordnetes Element zum Startpunkt des Fokus. Schluss mit der Maulwurf-Jagd!
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 sich ein Nutzer auf einen Artikel konzentriert, der auf visibility: hidden oder display: none gesetzt werden muss. Ein Beispiel hierfür sind anklickbare Elemente in einem Karussell. In früheren Versionen von Chrome wurde der Fokus bei dieser Art der Ausblendung des aktuell fokussierten Elements auf den Standardstartpunkt zurückgesetzt. Das oben genannte Karussell wurde so zu einer Falle für motorisch eingeschränkte Nutzer. Das ist mit dem sequenziellen Fokusausgangspunkt nicht mehr der Fall. Wenn ein Element durch eine der oben genannten Methoden ausgeblendet ist, wird durch Drücken der Taste Tab einfach zum nächsten fokussierbaren Element gewechselt.
Links überspringen
Sprunglinks sind unsichtbare Anker, die nur über die Tastatur erreicht werden können. So können Nutzer Navigationselemente „überspringen“, um direkt zum Inhalt einer Seite zu gelangen. Das ist besonders hilfreich für Nutzer von Tastaturen und Geräten mit Schaltern. Wie auf der WebAIM-Website erläutert
Viele beliebte Websites haben Links zum Überspringen, die Sie vielleicht noch nie bemerkt haben.
Da Sprunglinks benannte Anker sind, funktionieren sie genauso wie in unserem ursprünglichen Beispiel für den Inhaltsverzeichnis.
Einschränkungen und Support
Der Ausgangspunkt für die sequenzielle Fokusnavigation wird derzeit nur in Chrome 50, Firefox und Opera unterstützt. Bis die Funktion in allen Browsern unterstützt wird, müssen Sie Ihren benannten Ankerzielen weiterhin tabindex="-1" hinzufügen und den Fokusrahmen entfernen.
Demo
Der Ausgangspunkt der sequenziellen Fokusnavigation ist eine hervorragende Ergänzung zu den Barrierefreiheitsfunktionen des Browsers. Es ist leicht zu verstehen und ermöglicht es uns, Code aus unserer Anwendung zu entfernen und gleichzeitig die Nutzerfreundlichkeit zu verbessern. Doppelter Gewinn! In der Demo können Sie sich diese Funktion genauer ansehen.