Motif de conception

Un motif de conception (design pattern) est un modèle documenté qui décrit comment construire un composant d'interface riche de manière accessible. Il spécifie les rôles ARIA à utiliser, les états à gérer et les interactions clavier à coder. Le W3C en publie une trentaine dans l'APG (Authoring Practices Guide), couvrant les onglets, les modales, les menus applicatifs ou encore les accordéons.

Vous construisez un système d'onglets en JavaScript. Le rendu visuel est correct, les panneaux s'affichent au clic. Mais un utilisateur de lecteur d'écran ne perçoit qu'une suite de <div> sans signification. Il manque le mode d'emploi : le motif de conception.

#Ce que contient un motif de conception

Un motif de conception ARIA est une fiche technique publiée dans l'APG du W3C. Chaque fiche décrit trois choses :

1. Les rôles ARIA à attribuer aux éléments (tablist, tab, tabpanel pour des onglets).
2. Les états et propriétés à maintenir (aria-selected, aria-controls, aria-expanded).
3. Le comportement clavier attendu (flèches pour naviguer entre onglets, Entrée pour activer).

Voici un système d'onglets qui suit le motif Tabs de l'APG :

<div role="tablist">
  <button role="tab" aria-selected="true"
          aria-controls="panel-1" id="tab-1">Onglet 1</button>
  <button role="tab" aria-selected="false"
          aria-controls="panel-2" id="tab-2" tabindex="-1">Onglet 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Contenu du premier onglet.
</div>

Sans ces attributs, un lecteur d'écran voit des boutons et des blocs de texte. Avec eux, il annonce « onglet 1 sur 2, sélectionné » et l'utilisateur sait exactement où il se trouve.

#Le piège du motif menu

Le guide du développeur RGAA recense environ 39 motifs ARIA. Le plus mal utilisé : menu. Beaucoup de développeurs appliquent role="menu" et role="menuitem" à leur barre de navigation. C'est une erreur.

Le motif menu ARIA reproduit le comportement d'un menu d'application de bureau (comme Fichier, Édition, Affichage). La navigation entre les items se fait par flèches, pas par tabulation. Quand vous l'appliquez à un menu de navigation web, vous cassez le parcours clavier attendu. Access42 a documenté ce problème : pour la navigation d'un site, un simple <nav> avec une liste de liens suffit.

#Suivre un motif ne garantit pas la conformité WCAG

Idée reçue : « si je suis le motif APG, mon composant est conforme WCAG. » TetraLogical l'a clarifié en 2024 : les motifs de conception sont une recommandation, pas un critère de conformité. Votre composant doit respecter les critères WCAG (opérable au clavier, nommé correctement, compatible avec les technologies d'assistance), que vous suiviez un motif APG ou non. Le glossaire du RGAA dit « il est recommandé », pas « il est obligatoire ».

Les motifs restent la meilleure référence disponible. Mais ils ne remplacent pas un test au clavier et au lecteur d'écran.

#En résumé

Un motif de conception est le plan de montage d'un composant accessible : rôles, états, clavier. Consultez l'APG du W3C avant de coder un composant riche. Méfiez-vous du motif menu pour la navigation. Et testez toujours le résultat avec un lecteur d'écran.