La fonctionnalité "Point de départ de la navigation séquentielle avec la sélection" définit le point de départ de la recherche d'éléments pouvant être sélectionnés pour la navigation séquentielle avec la sélection ([Tabulation] ou [Maj+Tabulation]) lorsqu'aucune zone n'est sélectionnée. Il est particulièrement utile pour les fonctionnalités d'accessibilité telles que les "liens de saut" et la gestion du focus dans le document.
Le langage HTML offre de nombreuses fonctionnalités intégrées pour gérer les interactions au clavier. Il est donc assez facile d'écrire des pages utilisables au clavier, que ce soit en raison d'un handicap moteur qui nous empêche d'utiliser une souris ou que nous soyons tellement efficaces que retirer nos mains du clavier nous ferait perdre de précieuses millisecondes.
La gestion du clavier repose sur le focus, qui détermine l'emplacement des événements de clavier sur la page. Jusqu'à présent, nous avons dû effectuer quelques tâches supplémentaires pour que les utilisateurs de clavier puissent utiliser correctement les applications. La méthode focus() nous permet de gérer le ciblage en sélectionnant de manière sélective un élément à cibler en réponse à une action de l'utilisateur. Cependant, cette bonne pratique présente de nombreux pièges et nécessite des manipulations JavaScript délicates pour fournir une expérience de référence.
Bien que cette technique ne disparaisse pas complètement de sitôt, elle sera moins nécessaire dans Chrome 50 grâce au point de départ de la navigation séquentielle avec la sélection. Avec ce changement, les pages bien rédigées deviendront automatiquement plus accessibles sans aucune gestion manuelle supplémentaire de la sélection. Prenons un exemple.
Lien dans une page
Les sites comportant beaucoup de texte sont souvent interliés sur la même page pour aider les utilisateurs à accéder rapidement aux sections importantes.
<!-- 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>
Si j'utilisais un clavier (et que j'étais un gourmand de cuisine australienne), ma série d'actions suivante serait la suivante:
- Appuyer deux fois sur
Tabpour sélectionner le lien "Recettes" - Appuyez sur
Enterpour accéder à la section "Recettes" - Appuyer de nouveau sur
Tabpour sélectionner le lien "En savoir plus"
Voyons cela en action avec Chrome 49.
Oh. Cela ne s'est pas déroulé comme prévu, n'est-ce pas ?
Au lieu de mettre en surbrillance le lien "En savoir plus", l'appui sur Tab pour la dernière fois a déplacé le focus sur l'élément suivant du sommaire. En effet, le développeur n'a pas défini tabindex="-1" sur l'en-tête pour le rendre sélectionnable. Par conséquent, le clic sur l'ancre nommée #recipes n'a pas déplacé le focus. Il s'agit d'une erreur subtile, qui n'a pas d'importance si vous utilisez une souris. Toutefois, cela peut être très important si vous utilisez un clavier ou un appareil à contacteur. Pensez à la quantité de liens croisés sur une page Wikipédia typique. Il serait frustrant de devoir constamment passer d'une ancre à l'autre.
Examinons maintenant la même expérience avec Chrome 50.
C'est exactement ce que nous voulions. Et le meilleur, c'est que nous n'avons pas eu à modifier notre code. Le navigateur a simplement déterminé où le focus devait se placer en fonction de l'endroit où nous nous trouvions dans le document.
Fonctionnement
Avant l'implémentation du point de départ du focus, le focus passait toujours de l'élément précédent sélectionné ou du haut de la page. Cela signifie que le choix de l'élément suivant sur lequel le focus doit être placé peut impliquer de déplacer le focus vers un élément qui ne devrait pas vraiment être sélectionnable, comme un élément de conteneur ou un titre. Cela entraîne toutes sortes d'anomalies, y compris l'affichage d'un anneau de sélection si vous cliquez sur un tel élément par hasard.
Comme son nom l'indique, le point de départ du ciblage fournit un mécanisme permettant de suggérer où commencer à rechercher le prochain élément pouvant être ciblé lorsque vous appuyez sur Tab ou Shift-Tab.
Il peut être défini de plusieurs manières :
Si un élément est sélectionné, il s'agit également du point de départ de la navigation avec sélection, comme auparavant.
De même qu'auparavant, si aucun autre élément n'a défini le point de départ de la navigation avec la sélection, il s'agit de l'document actuelle ou, si elle est disponible et prise en charge, de l'dialog active.
Si nous accédons à un fragment de page comme dans l'exemple ci-dessus, le point de départ du focus sera défini.
De plus, si nous cliquons sur un élément de la page, qu'il soit sélectionnable ou non, le point de départ de la navigation par sélection est défini.
Enfin, si l'élément qui était le point de départ du focus est supprimé du DOM, son parent devient le point de départ du focus. Fini de devoir appuyer sur le bouton de mise au point pour la rétablir !
Autres cas d'utilisation
Outre l'exemple ci-dessus, cette fonctionnalité peut s'avérer utile dans de nombreux autres cas.
Masquer des éléments
Il peut arriver qu'un utilisateur se concentre sur un élément qui doit être défini sur visibility: hidden ou display: none. Par exemple, les éléments cliquables d'un carrousel. Dans les versions précédentes de Chrome, le fait de masquer l'élément actuellement sélectionné de cette manière réinitialisait le focus sur le point de départ par défaut, ce qui transformait le carrousel susmentionné en piège pour les utilisateurs ayant des difficultés motrices. Ce n'est plus le cas avec le point de départ de la sélection séquentielle. Si un élément est masqué à l'aide de l'une des méthodes ci-dessus, appuyer sur la touche Tab permet simplement de passer à l'élément suivant pouvant être sélectionné.
Ignorer les liens
Les liens d'ancrage sont des ancres invisibles auxquelles vous ne pouvez accéder qu'à l'aide du clavier. Ils permettent aux utilisateurs d'"ignorer" les éléments de navigation pour accéder directement au contenu d'une page. Ils peuvent être extrêmement utiles pour les utilisateurs de clavier et de contacteurs. Comme expliqué sur le site WebAIM
De nombreux sites Web populaires implémentent des liens de prévisualisation, même si vous ne les avez peut-être jamais remarqués.
Étant donné que les liens de saut sont des ancres nommées, ils fonctionnent de la même manière que notre exemple de table des matières d'origine.
Mises en garde et assistance
Le point de départ de la navigation séquentielle par sélection n'est actuellement compatible qu'avec Chrome 50, Firefox et Opera. Tant que cette fonctionnalité n'est pas prise en charge dans tous les navigateurs, vous devrez toujours ajouter tabindex="-1" (et supprimer le contour de focus) à vos cibles d'ancrage nommées.
Démo
Le point de départ de la navigation séquentielle est un excellent ajout à l'ensemble de primitives d'accessibilité du navigateur. Il est facile à comprendre et nous permet de supprimer du code de notre application tout en améliorant l'expérience pour nos utilisateurs. Double avantage ! Regardez la démo pour découvrir cette fonctionnalité plus en détail.