Dernière mise à jour : 31 mars 2026
Savoir bien structurer les contenus pour maximiser leur accessibilité.
Pour qu’une page soit accessible, l’information doit être présentée dans un ordre logique et prévisible. Il faut donc s’assurer que chaque élément soit présenté au bon moment, pour que le lecteur d’écran puisse le comprendre. Pour ce faire, voici quelques règles à suivre :
1. Un titre est toujours suivi du contenu qu’il présente, dans l’ordre de lecture
Cette logique s’appuie sur les grandes zones de contenu d’une page, comme l’en-tête, la navigation, le contenu principal ou le pied de page, qui structurent l’information dès le départ. En plaçant le contenu après son titre, on crée un repère clair et un ordre de lecture prévisible, particulièrement important pour les personnes qui naviguent sans voir l’écran.
2. Avoir toutes les informations nécessaires avant de poser l’action
Lorsque l’on demande à une personne de faire un choix ou de poser une action, elle doit avoir toutes les informations nécessaires pour y arriver avant de poser l’action. Ces informations doivent être communiquées clairement et au bon moment aux lecteurs d’écran.
Par exemple, si on offre les détails des différentes options de tarification après le champ qui permet de sélectionner l’option voulue, le lecteur d’écran n’aura pas l’information nécessaire au bon moment et ne pourra pas la transmettre à la personne qui l’utilise. Dans ce cas, la solution serait de mettre tous les détails avant le champ ou de les lier au champ dans le code.
3. Dans le code, les contenus cachés ne doivent pas être accessibles par les lecteurs d’écran
Pour les masquer, on peut utiliser le style display:none ou l’attribut aria-hidden="true". Ces propriétés doivent être retirées dès que le contenu devient visible, afin de permettre au lecteur d’écran d’y accéder et de transmettre l’information.
Voici des exemples typiques de contenus qui doivent rester inaccessibles tant qu’ils ne sont pas affichés :
- Le contenu de la page lorsqu’une modale ou une infobulle est ouverte.
- Les images et les descriptions non affichées dans une visionneuse.
- Les informations contenues dans un accordéon fermé.
- Les questions qui apparaissent seulement après la sélection d’une option dans un formulaire.
- Les éléments d’un sous-menu lorsqu’il est fermé.
Bon à savoir
Les contenus masqués visuellement ne doivent pas recevoir le focus clavier.
De plus, les contenus masqués dans les composants, comme les modales et les tiroirs fermés des accordéons, ne doivent pas être annoncés par les lecteurs d'écran.
Comment bien organiser les contenus ?