Kopfschmerzen vermeiden

Mit der Funktion „Beginn der sequenziellen Fokusnavigation“ wird definiert, wo nach fokussierbaren Elementen für die sequenzielle Fokusnavigation ([Tabulatortaste] oder [Umschalttaste + Tabulatortaste]) mit der Suche nach fokussierbaren Elementen begonnen wird, wenn kein fokussierter Bereich vorhanden ist. Das ist besonders hilfreich bei Bedienungshilfen wie „Links überspringen“ und der Verwaltung des Fokus im Dokument.

HTML bietet uns eine Menge integrierte Unterstützung für den Umgang mit Tastaturinteraktionen, sodass es ziemlich einfach ist, Seiten zu schreiben, die über die Tastatur verwendet werden können - ob eine motorische Beeinträchtigung uns daran hindert, eine Maus zu verwenden, oder ob wir einfach so effizient die Hände von der Tastatur entfernen, wodurch wertvolle Millisekunden verschwendet werden.

Bei der Tastatursteuerung dreht sich alles um den Fokus, der bestimmt, wo Tastaturereignisse auf der Seite platziert werden. Es gibt ein paar Situationen, in denen wir bis jetzt einige zusätzliche Arbeitsschritte brauchten, damit alles für Tastaturnutzer gut funktioniert. Mit der Methode focus() lässt sich der Fokus steuern, indem selektiv ein Element ausgewählt wird, das als Reaktion auf eine Nutzeraktion in den Fokus rückt. Diese Best Practice ist jedoch sehr aufwendig und erfordert ein kniffliges JavaScript-Hackerprogramm, um eine Basis zu schaffen.

Auch wenn diese Technik in naher Zukunft nicht endgültig verschwinden wird, wird sie in Chrome 50 dank des Startpunkts der Navigation mit sequenziellem Fokus in weniger Fällen erforderlich sein. Durch diese Änderung wird der Zugriff auf gut verfasste Seiten automatisch verbessert, ohne dass eine zusätzliche manuelle Fokusverwaltung erforderlich ist. Sehen wir uns ein Beispiel an.

Websites mit vielen Texten sind häufig innerhalb derselben Seite verlinkt, 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 die Tastatur nutzen würde und bei australischen Lebensmitteln alles andere, würde meine nächste Reihe von Aktionen in etwa so aussehen:

  • Zweimal Tab drücken, um den Link „Rezepte“ hervorzuheben
  • Drücken Sie Enter, um zum Bereich „Rezepte“ zu springen
  • Drücken Sie noch einmal Tab, um den Link „Weiterlesen“ hervorzuheben

Sehen wir uns das in Chrome 49 an.

Oh. Das lief nicht ganz nach Plan, oder?

Anstatt sich auf den Link „Weiterlesen“ zu konzentrieren, wurde der Fokus durch Drücken von Tab zum letzten Mal auf das nächste Element im Inhaltsverzeichnis verschoben. Das liegt daran, dass der Entwickler tabindex="-1" für den Header nicht festgelegt hat, um ihn fokussierbar zu machen. Der Fokus wurde also beim Klicken auf den benannten #recipes-Anker nicht verschoben. Es ist ein subtiler Fehler und kein großes Problem für Mausnutzer. Wenn Sie jedoch Tastaturen verwenden oder Geräte wechseln, kann das eine große Rolle spielen. Denken Sie an das Maß an Verknüpfungen auf einer typischen Wikipedia-Seite? Es wäre frustrierend, ständig zwischen den Ankern hin- und herwechseln zu müssen.

Sehen wir uns nun an, wie es jetzt mit Chrome 50 aussieht.

Wow, das war genau das, was wir wollten, und das Beste ist, dass wir unseren Code nicht ändern mussten. Der Browser hat gerade anhand der Position im Dokument herausgefunden, wohin der Fokus gehen soll.

Wie funktioniert das?

Vor der Implementierung des fokussierten Startpunkts wurde der Fokus immer entweder vom vorherigen fokussierten Element oder nach oben auf der Seite verschoben. Wenn Sie also festlegen, was als Nächstes in den Fokus rückt, kann der Fokus auch auf etwas verschoben werden, das eigentlich nicht fokussierbar sein sollte, z. B. ein Containerelement oder eine Überschrift. Das kann alles seltsam machen, z. B. dass ein Fokusring angezeigt wird, wenn Sie versehentlich auf ein solches Element klicken.

Wie der Name schon sagt, kann der Startpunkt für den Fokus vorschlagen, wo mit der Suche nach dem nächsten fokussierbaren Element begonnen werden soll, wenn wir Tab oder Shift-Tab drücken.

Es gibt mehrere Möglichkeiten: Wenn nichts anderes den Startpunkt der Fokusnavigation festgelegt hat, ist es wie zuvor der aktuelle document oder, falls verfügbar und unterstützt, der aktuell aktive dialog. Wenn wir wie im obigen Beispiel zu einem Seitenfragment navigieren, wird nun der fokussierte Startpunkt festgelegt. Wenn wir auf ein Element auf der Seite klicken, unabhängig davon, ob es fokussierbar ist, wird jetzt der Startpunkt der Fokusnavigation festgelegt. Wenn schließlich das Element, das der Startpunkt des Fokus war, aus dem DOM entfernt wird, wird das übergeordnete Element zum Startpunkt des Fokus. Kein fokussierter Maulwurf mehr!

Andere Anwendungsfälle

Neben dem obigen Beispiel gibt es viele weitere Szenarien, in denen diese Funktion nützlich sein kann.

Elemente ausblenden

Es kann vorkommen, dass ein Nutzer den Fokus auf ein Element legt, für das visibility: hidden oder display: none festgelegt werden muss. Ein Beispiel hierfür sind anklickbare Elemente in einem Karussell. In früheren Versionen von Chrome wurde der Fokus auf den Standardstartpunkt zurückgesetzt, wenn das fokussierte Element auf diese Weise ausgeblendet wurde. Mit dem sequenziellen Fokus-Ausgangspunkt ist dies nicht mehr der Fall. Wenn ein Element mit einer der oben genannten Methoden ausgeblendet wurde, gelangen Sie durch Drücken der Taste Tab einfach zum nächsten fokussierbaren Element.

Sprunglinks sind unsichtbare Anker, auf die nur über die Tastatur zugegriffen werden kann. Sie ermöglichen es Nutzenden, Navigationselemente zu „überspringen“, um direkt zum Inhalt einer Seite zu springen. Außerdem können sie für Tastaturen und Nutzende eines anderen Geräts sehr hilfreich sein. Wie auf der WebAIM-Website erläutert

Auf vielen beliebten Websites werden Sprunglinks implementiert, auch wenn Sie diese vielleicht noch nie bemerkt haben.

Einen Link zum Überspringen auf GitHub.com

Da Sprunglinks als Anker bezeichnet werden, funktionieren sie genauso wie unser ursprüngliches Inhaltsverzeichnis.

Einschränkungen und Support

Der Startpunkt der sequenziellen Fokusnavigation wird derzeit nur in Chrome 50, Firefox und Opera unterstützt. Bis es in allen Browsern unterstützt wird, müssen Sie weiterhin tabindex="-1" zu Ihren benannten Ankerzielen hinzufügen und die Kontur entfernen.

Demo

Der Ausgangspunkt der sequentiellen fokussierten Navigation ist eine hervorragende Ergänzung der Bedienungshilfen-Primitive des Browsers. Sie ist leicht zu verstehen und ermöglicht es uns, Code aus unserer Anwendung zu entfernen und gleichzeitig die User Experience für unsere Nutzer zu verbessern. Doppelter Sieg! Sieh dir die Demo an, um mehr über diese Funktion zu erfahren.