Rôle Structure du document

`toolbar`

Marque un conteneur comme une barre d'outils — un ensemble de contrôles connexes (barre de mise en forme, rangée de boutons icônes). Réduit les arrêts de tabulation : 10 boutons ne forment qu'un seul arrêt, la navigation entre eux s'effectuant avec les touches fléchées.

Quand l’utiliser

Lorsqu’une rangée (ou colonne) regroupe trois contrôles connexes ou plus — barre de mise en forme d’un éditeur de texte, rangée d’icônes au-dessus d’un champ de discussion, actions d’édition photo. L’avantage est l’efficacité au clavier : au lieu que chaque bouton soit son propre arrêt de tabulation, la barre d’outils n’en consomme qu’un seul et expose ses enfants via les touches fléchées.

Une barre d’outils DOIT avoir un nom accessible (aria-label ou aria-labelledby). L’orientation par défaut est horizontale ; utiliser aria-orientation="vertical" pour une barre verticale.

Les enfants sont généralement des boutons (<button>), avec role="separator" entre les groupes logiques. Les barres d’outils PEUVENT contenir des boutons, des boutons à bascule, des liens, des boutons de menu et d’autres petits contrôles — mais pas de formulaires entiers ni de widgets liste.

Contrat clavier + focus

Conformément au modèle APG toolbar :

Tab déplace le focus dans la barre d’outils vers le premier contrôle ou le dernier contrôle actif ; Tab permet d’en sortir.
Les flèches Droite/Gauche (Haut/Bas si vertical) se déplacent entre les éléments de la barre.
Début / Fin sautent au premier / dernier élément.
Chaque bouton individuel s’active toujours avec Entrée ou Espace — son contrat d’activation n’est pas modifié par le rôle toolbar.

Utiliser un tabindex roulant : un seul élément de la barre d’outils a tabindex="0" à la fois.

Erreurs courantes

Tous les boutons de la barre d’outils ont tabindex="0". Cela annule l’intérêt — Tab parcourt chaque bouton de toute façon.
Barre d’outils sans nom accessible.
Boutons de la barre sans libellés car le visuel est une icône. Ajouter aria-label à chacun.
Mélange des sémantiques toolbar et role="group". Choisir l’une : toolbar implique la navigation par touches fléchées, group non.
role="toolbar" sur un élément <nav>. Les rôles sont en conflit — utiliser l’un ou l’autre.

Exemple

<div role="toolbar" aria-label="Text formatting">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="Bold">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Italic">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Underline">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="Insert link">Link</button>
</div>