De functie 'Startpunt voor sequentiële focusnavigatie' definieert waar we beginnen met zoeken naar focusbare elementen voor sequentiële focusnavigatie ([Tab] of [Shift-Tab]) wanneer er geen focusgebied is. Dit is vooral handig voor toegankelijkheidsfuncties zoals 'links overslaan' en het beheren van de focus in het document.
Dankzij HTML hebben we veel ingebouwde ondersteuning voor interactie met het toetsenbord. Dat betekent dat het heel eenvoudig is om pagina's te schrijven die via het toetsenbord kunnen worden gebruikt, of dat we nu een motorische beperking hebben waardoor we geen muis kunnen gebruiken of dat we gewoon zo efficiënt zijn dat we kostbare milliseconden verspillen door onze handen van het toetsenbord te halen.
Toetsenbordafhandeling draait om focus, wat bepaalt waar toetsenbordgebeurtenissen op de pagina terechtkomen. Er zijn een paar situaties waarin we tot nu toe wat extra werk moesten verzetten om alles goed te laten werken voor toetsenbordgebruikers. Met de focus() methode kunnen we de focus beheren door selectief een element te kiezen waarop de focus moet komen te staan als reactie op een gebruikersactie. Deze best practice kent echter veel valkuilen en vereist lastige JavaScript-hacks om een basiservaring te bieden.
Hoewel deze techniek niet snel helemaal zal verdwijnen, zal het in Chrome 50 in minder gevallen nodig zijn dankzij het Sequential Focus Navigation Start Point. Met deze wijziging worden goed geschreven pagina's automatisch toegankelijker zonder dat er handmatig focusbeheer nodig is. Laten we eens naar een voorbeeld kijken.
Link binnen een pagina
Sites met veel tekst linken vaak binnen dezelfde pagina naar elkaar, zodat gebruikers snel naar belangrijke secties kunnen springen.
<!-- 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>
Als ik een toetsenbordgebruiker was (en een liefhebber van Australisch eten), dan zouden mijn volgende acties er ongeveer zo uitzien:
- Druk tweemaal op
Tabom de link Recepten te focussen - Druk op
Enterom naar het gedeelte Recepten te gaan - Druk nogmaals op
Tabom de link Lees meer te focussen
Laten we dit eens in de praktijk bekijken met Chrome 49.
Oh. Dat ging niet helemaal volgens plan, hè?
In plaats van de link 'Lees meer' te focussen, verplaatste Tab de focus naar het volgende item in de inhoudsopgave. Dit komt doordat de ontwikkelaar tabindex="-1" niet in de header heeft ingesteld om de focus te activeren. Klikken op het anker met de naam #recipes verplaatste de focus dus niet. Het is een subtiele fout en geen groot probleem als je een muis gebruikt. Maar het kan een groot probleem zijn als je een toetsenbord of een ander apparaat gebruikt. Denk eens aan de hoeveelheid links op een gemiddelde Wikipedia-pagina. Het zou frustrerend zijn om constant heen en weer te moeten gaan tussen al die ankers!
Laten we dezelfde ervaring eens bekijken, maar dan met Chrome 50.
Wauw, dat is precies wat we wilden, en het mooiste is: we hoefden onze code niet aan te passen. De browser berekende gewoon waar de focus moest komen, gebaseerd op waar we in het document waren.
Hoe werkt het?
Vóór de implementatie van het focusstartpunt verplaatste de focus zich altijd van het vorige gefocuste element of de bovenkant van de pagina. Dit betekent dat het kiezen van wat vervolgens de focus krijgt, kan betekenen dat de focus verplaatst wordt naar iets dat eigenlijk niet focusbaar zou moeten zijn, zoals een containerelement of een koptekst. Dit veroorzaakt allerlei vreemde situaties, waaronder het tonen van een focusring als je per ongeluk op zo'n element klikt.
Het focusstartpunt biedt, zoals de naam al doet vermoeden, een mechanisme dat aangeeft waar u moet beginnen met zoeken naar het volgende element waarop de focus valt wanneer u op Tab of Shift-Tab drukt.
Dit kan op verschillende manieren worden ingesteld: Als iets de focus heeft, is het ook het startpunt voor de focusnavigatie, net als voorheen. En net als voorheen, als er niets anders het startpunt voor de focusnavigatie heeft ingesteld, dan is het het huidige document of, indien beschikbaar en ondersteund, het momenteel actieve dialog . Als we naar een paginafragment navigeren, zoals in het bovenstaande voorbeeld, wordt dat nu het startpunt voor de focusnavigatie. Ook als we op een element op de pagina klikken, ongeacht of het focusbaar is, wordt dat nu het startpunt voor de focusnavigatie. Ten slotte, als het element dat het startpunt voor de focus was, uit de DOM wordt verwijderd, wordt het bovenliggende element het startpunt voor de focusnavigatie. Geen focus-whack-a-mole meer!
Andere use cases
Naast het bovenstaande voorbeeld zijn er nog veel meer scenario's waarin deze functie handig kan zijn.
Verbergen van elementen
Het kan voorkomen dat een gebruiker de focus legt op een item dat moet worden ingesteld op visibility: hidden of display: none . Een voorbeeld hiervan zijn klikbare items in een carrousel. In eerdere versies van Chrome werd de focus teruggezet naar het standaard startpunt als het item op deze manier werd verborgen. Dit maakte de carrousel een lastige valkuil voor gebruikers met een motorische beperking. Met een sequentieel startpunt voor focus is dit niet langer het geval. Als een element via een van de bovenstaande methoden wordt verborgen, gaat u met de Tab -toets gewoon naar het volgende item met focus.
Links overslaan
Skiplinks zijn onzichtbare ankers die alleen via het toetsenbord te bereiken zijn. Ze stellen gebruikers in staat navigatie-elementen over te slaan om direct naar de inhoud van een pagina te springen. Ze kunnen zeer nuttig zijn voor gebruikers van toetsenborden en switch-apparaten. Zoals uitgelegd op de WebAIM-website .
Veel populaire websites maken gebruik van skip-links, maar het kan zijn dat u ze nog nooit heeft opgemerkt.
Omdat skip-links ankers worden genoemd, werken ze op dezelfde manier als ons oorspronkelijke voorbeeld van de inhoudsopgave.
Voorbehouden en ondersteuning
Het startpunt voor sequentiële focusnavigatie wordt momenteel alleen ondersteund in Chrome 50, Firefox en Opera. Totdat het in alle browsers wordt ondersteund, moet u nog steeds tabindex="-1" toevoegen (en de focuscontour verwijderen) aan uw benoemde ankerdoelen.
Demonstratie
Het startpunt voor sequentiële focusnavigatie is een geweldige aanvulling op de toegankelijkheidsprimitieven van de browser. Het is gemakkelijk te begrijpen en stelt ons in staat om code uit onze applicatie te verwijderen en tegelijkertijd de gebruikerservaring te verbeteren. Dubbele winst! Bekijk de demo om deze functie verder te verkennen.