Gérez vos priorités en toute sérénité

La fonctionnalité "Point de départ de la navigation séquentielle" définit le point de départ de la recherche d'éléments sélectionnables pour la navigation séquentielle ([Tabulation] ou [Maj-Tabulation]) lorsqu'aucune zone sélectionnée n'est sélectionnée. Elle est particulièrement utile pour les fonctionnalités d'accessibilité comme "Ignorer les liens" et gérer le curseur dans le document.

HTML offre de nombreuses fonctionnalités intégrées pour gérer les interactions au clavier, ce qui signifie qu'il est assez facile d'écrire des pages qui peuvent être utilisées avec le clavier, que ce soit un handicap moteur qui nous empêche d'utiliser une souris ou si nous sommes si efficaces pour nous débarrasser du clavier avec nos mains, nous perdons de précieuses millisecondes.

La gestion du clavier s'articule autour de la sélection, qui détermine l'emplacement des événements de clavier sur la page. Dans certains cas, nous avons dû jusqu'à présent effectuer des opérations supplémentaires pour que l'interface fonctionne bien pour les utilisateurs de clavier. La méthode focus() nous permet de gérer le ciblage en choisissant 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 problèmes et nécessite une attaque JavaScript complexe pour fournir une expérience de base.

Bien que cette technique ne soit pas complètement supprimée prochainement, dans Chrome 50, elle sera nécessaire dans moins de cas grâce au point de départ de la navigation avec sélection séquentielle. Avec ce changement, les pages bien conçues deviendront automatiquement plus accessibles sans qu'il soit nécessaire de gérer manuellement la mise au point. Prenons un exemple.

Les sites comportant beaucoup de texte s'intercalent souvent au sein d'une même page pour permettre aux utilisateurs d'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 le clavier (et un glouton pour la nourriture australienne), ma prochaine série d'actions se passerait comme suit:

  • Appuyez deux fois sur Tab pour sélectionner le lien "Recettes"
  • Appuyez sur Enter pour accéder à la section "Recettes"
  • Appuyez de nouveau sur Tab pour sélectionner le lien "En savoir plus"

Voyons cela en action avec Chrome 49.

Oh. Ça ne s'est pas passé comme prévu ?

Au lieu de sélectionner le lien "Lire la suite", le fait d'appuyer sur Tab pour la dernière fois a déplacé le curseur vers l'élément suivant de la table des matières. 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 fait de cliquer sur l'ancre nommée #recipes n'a pas déplacé le curseur. Il s'agit d'une erreur subtile, et ce n'est pas grave si vous utilisez une souris. Mais c'est potentiellement très important si vous êtes un utilisateur de clavier ou de commutateur. Considérez le nombre d'échanges de liens sur une page Wikipédia classique ? Il serait frustrant de devoir constamment passer en revue tous ces points d'ancrage.

Examinons la même expérience avec Chrome 50.

C'est exactement ce que nous voulions, et en plus, nous n'avons pas eu à modifier notre code. Le navigateur a simplement compris où le curseur devait être placé en fonction de la position dans le document.

Comment ça marche ?

Avant l'implémentation du point de départ du curseur, le curseur passait toujours de l'élément sélectionné précédent ou du haut de la page. Cela signifie que choisir ce qui va suivre peut impliquer de déplacer le curseur vers quelque chose qui ne devrait pas vraiment être sélectionnable, comme un élément conteneur ou un titre. Cela provoque toutes sortes d'anomalies, y compris l'affichage d'un anneau de sélection si vous cliquez par inadvertance sur un tel élément.

Comme son nom l'indique, le point de départ de la sélection fournit un mécanisme pour suggérer où commencer pour rechercher le prochain élément sélectionnable lorsque nous appuyons sur Tab ou Shift-Tab.

Vous pouvez le définir de plusieurs manières : si un élément est sélectionné, il s'agit également du point de départ de la navigation de la sélection, comme précédemment. De plus, comme précédemment, si rien d'autre n'a défini le point de départ de la navigation de sélection, il s'agira de la document actuelle ou, si elle est disponible et compatible, de la dialog actuellement active. Si nous accédons à un fragment de page comme dans l'exemple ci-dessus, le point de départ de la sélection sera désormais 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 de sélection sera alors défini. Enfin, si l'élément qui était le point de départ du focus est supprimé du DOM, son parent devient ce point de départ. Plus besoin de vous focaliser sur votre taupe !

Autres cas d'utilisation

Outre l'exemple ci-dessus, cette fonctionnalité peut s'avérer utile dans de nombreux autres scénarios.

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. C'est par exemple le cas des éléments cliquables d'un carrousel. Dans les versions précédentes de Chrome, masquer l'élément actuellement sélectionné de cette manière réinitialisait le curseur au point de départ par défaut, transformant le carrousel mentionné ci-dessus en un piège désagréable pour les utilisateurs souffrant de troubles de la dextérité. Ce n'est plus le cas pour le point de départ du ciblage séquentiel. Si un élément est masqué via l'une des méthodes ci-dessus, appuyer sur la touche Tab permet simplement de passer à l'élément sélectionnable suivant.

Les liens d'ancrage sont des points d'ancrage invisibles accessibles uniquement à l'aide du clavier. Ils permettent aux utilisateurs d’ignorer les éléments de navigation afin d’accéder directement au contenu d’une page et ils peuvent être extrêmement utiles pour les utilisateurs de clavier et de commutateurs. Comme expliqué sur le site WebAIM

De nombreux sites Web populaires mettent en œuvre des liens d'ancrage, bien que vous ne les ayez peut-être jamais remarqués.

Un lien d&#39;ancrage sur GitHub.com

Étant donné que les liens d'ancrage sont nommés des ancres, ils fonctionnent de la même manière que dans notre exemple de table des matières d'origine.

Mises en garde et assistance

Le point de départ de la navigation avec sélection séquentielle n'est actuellement compatible qu'avec Chrome 50, Firefox et Opera. Tant qu'elle ne sera pas prise en charge par tous les navigateurs, vous devrez quand même ajouter tabindex="-1" (et supprimer le contour du focus) à vos cibles d'ancrage nommées.

Démonstration

Le point de départ de la navigation avec mise au point séquentielle complète l'ensemble des primitives d'accessibilité du navigateur. Il est facile de s'y retrouver et cela nous permet de supprimer le code de notre application tout en améliorant l'expérience de nos utilisateurs. Double victoire ! Pour en savoir plus sur cette fonctionnalité, consultez la démonstration.