Utiliser le critère de succès WCAG 1.3.1 pour améliorer l'accessibilité des personnes ayant des troubles cognitifs

Vous êtes-vous déjà retrouvé sur une page web qui semblait encombrée et déroutante ? Imaginez vivre cela au quotidien parce que le contenu n’est pas correctement structuré. Pour les personnes ayant des troubles cognitifs, y compris les troubles du spectre autistique (TSA), une mauvaise organisation du site peut rendre la navigation frustrante et confuse, voire carrément impossible.

C’est là qu’interviennent les Règles pour l’accessibilité des contenus Web (WCAG) Critère de succès 1.3.1 : Informations et relations(opens in a new tab). Ce critère de succès garantit que la structure du contenu — des titres et listes aux étiquettes de formulaires — est claire et transmise de manière programmatique, ce qui rend le contenu plus accessible aux utilisateurs.

Qu’est-ce que le critère de succès WCAG 1.3.1 exactement ? Nous allons l’explorer plus en détail ci-dessous — ainsi que la façon dont l’application de cette règle bénéficie aux personnes ayant des troubles cognitifs. Nous verrons aussi comment les créateurs de contenu (designers, développeurs, rédacteurs) peuvent la mettre en œuvre efficacement.

Qu’est-ce que le critère de succès WCAG 1.3.1 : Informations et relations ?

Le critère de succès WCAG 1.3.1 : Informations et relations fait partie des exigences de niveau A de la WCAG 2.0 dans la catégorie « Perceptible ». Il garantit que la structure et la signification du contenu sont préservées et transmises de manière à être comprises par les technologies d’assistance, y compris les lecteurs d’écran. Plus simplement, cela signifie que lorsque vous créez une interface utilisateur, vous devez utiliser une structure sémantique appropriée afin que les lecteurs d’écran et autres types de technologies d’assistance puissent interpréter correctement le contenu.

Voyez cela comme un livre bien organisé : un site web bien structuré est comme un livre bien rangé. Les titres sont les chapitres, les listes permettent de détailler les points clés, et les contrôles et étiquettes de formulaire donnent des instructions claires. Si ces éléments ne sont pas codés correctement, les utilisateurs de technologies d’assistance risquent de se retrouver face à un contenu désordonné au lieu d’une séquence d’informations cohérente.

Il est important de noter que ce critère de succès va au-delà de l’organisation visuelle. Le 1.3.1 vise à garantir que les relations entre les éléments sont intégrées dans le code afin qu’elles aient du sens, quel que soit le mode d’accès au contenu. Nous verrons plus en détail comment appliquer ces pratiques à votre contenu numérique ci-dessous.

Illustration d’un site web et d’un système de poulie menant à la tête d’une personne

Comment le critère WCAG 1.3.1 soutient les personnes ayant des troubles cognitifs

Maintenant que vous comprenez le critère de succès 1.3.1, voyons comment il bénéficie spécifiquement aux personnes ayant des troubles cognitifs.

Mais avant d’entrer dans le détail, examinons les troubles cognitifs courants et comment chacun affecte la capacité d’une personne à interagir avec le contenu numérique.

Troubles cognitifs courants et défis numériques

Les troubles cognitifs affectent la façon dont les personnes traitent, comprennent et interagissent avec l’information. Différents troubles cognitifs présentent des défis uniques lors de l’interaction ou de la navigation sur des contenus en ligne. Voici quelques exemples :

TDAH (trouble du déficit de l’attention avec ou sans hyperactivité)

Le TDAH est un trouble du développement neurologique qui affecte la concentration, le contrôle des impulsions et la mémoire de travail. Les personnes avec un TDAH peuvent avoir du mal à rester concentrées face à de longs paragraphes, des pages encombrées ou des mises en page incohérentes. Les sites mal structurés ou trop distrayants compliquent la recherche d’informations ou l’accomplissement d’une tâche sans frustration.

Autisme (trouble du spectre autistique, TSA)

L’autisme est un trouble du spectre qui affecte la communication, l’interaction sociale et le traitement sensoriel. Beaucoup de personnes autistes s’appuient sur des schémas prévisibles et une organisation claire pour traiter l’information. Un contenu désorganisé, des changements soudains de mise en page ou l’absence de titres et d’étiquettes peuvent créer de la confusion et de la frustration. Les sensibilités sensorielles peuvent aussi rendre difficile la concentration sur une page surchargée d’animations inutiles, de pop-ups ou de formats incohérents.

Dyslexie

La dyslexie est un trouble de l’apprentissage qui affecte principalement la lecture et le traitement du langage. Les personnes dyslexiques peuvent avoir des difficultés à décoder les mots, à reconnaître les motifs de lettres ou à suivre les lignes de texte. De grands blocs de contenu non structuré peuvent être accablants, tandis qu’un formatage incohérent perturbe la lecture. Des titres clairs, des listes à puces et un texte bien structuré améliorent la compréhension et la navigation.

Comment une structure de contenu adaptée améliore l’accessibilité

Pour améliorer l’expérience en ligne des personnes ayant des troubles cognitifs (et des autres aussi), il est important que votre contenu numérique soit bien organisé, prévisible et facile à naviguer. Le critère WCAG 1.3.1 apporte cette cohérence et cette prévisibilité en :

• Maintenant la navigation et la mise en page cohérentes et à des endroits prévisibles, ce qui aide les utilisateurs à se sentir plus en contrôle.

• Créant une hiérarchie visuelle claire pour diviser le contenu en sections digestes, permettant aux utilisateurs de repérer les informations clés au lieu de se perdre dans un mur de texte.

• Découpant le contenu complexe en étapes ou sections logiques pour en faciliter la compréhension.

• Utilisant des repères et des étiquettes pour aider les utilisateurs à comprendre la fonction de chaque élément, réduisant ainsi les tâtonnements et la frustration.

Homme assis à un bureau écrivant du code ; un grand symbole d’accessibilité à sa gauche.

Étapes pratiques pour appliquer WCAG 1.3.1 et améliorer l’accessibilité

Appliquer WCAG 1.3.1 ne consiste pas seulement à rédiger un bon contenu — il s’agit de le structurer de manière logique, à la fois visuellement et de façon programmatique. Organiser le contenu ainsi améliore la navigation pour tout le monde, y compris les personnes ayant des troubles cognitifs et celles utilisant des technologies d’assistance.

Pour appliquer WCAG 1.3.1 lors de la création de contenu, suivez ces quatre bonnes pratiques :

1. Utilisez une structure HTML appropriée

Considérez le HTML comme la base du contenu accessible. Son utilisation, en particulier le HTML sémantique, garantit que votre contenu est structuré logiquement, ce qui le rend plus facile à lire, à naviguer et à utiliser. Voici quelques exemples de balisage sémantique à utiliser lors de la création de votre contenu :

• Titres (<h1> à <h6> définissent la hiérarchie du contenu. Sans eux, les utilisateurs de lecteurs d’écran doivent écouter tout le contenu d’un seul bloc au lieu de pouvoir naviguer entre les sections.

• Listes (<ul>, <ol>, <li>, etc.) structurent le contenu groupé. Si vous ajoutez manuellement des puces avec des tirets au lieu d’utiliser les listes HTML appropriées, un lecteur d’écran ne reconnaîtra pas ces éléments comme étant liés.

• Tableaux avec balisage approprié (<th>, <caption>) rendent les données compréhensibles. Sans la bonne structure, un utilisateur de lecteur d’écran pourrait entendre « Ligne 3, Colonne 2 : 42 » sans comprendre à quoi correspond ce chiffre. Assurez-vous que vos tableaux de données et cellules comportent le bon balisage pour éviter la confusion et garantir une bonne expérience utilisateur.

• Éléments de formulaire avec étiquettes (<label> pour <input>) clarifient la fonction. Une barre de recherche correctement étiquetée indiquera à l’utilisateur d’un lecteur d’écran : « Rechercher des produits » au lieu de simplement lire « Champ de texte à éditer ».

2. Assurez-vous que les étiquettes et associations sont pertinentes

Les formulaires peuvent représenter un défi majeur en matière d’accessibilité, mais quelques règles simples permettent de les rendre bien plus conviviaux.

• Utilisez des étiquettes de formulaire descriptives : Utilisez <label> pour <input> au lieu de vous fier au texte d’exemple (qui disparaît quand l’utilisateur commence à taper), car les éléments <label> indiquent clairement la fonction de chaque champ. Les étiquettes doivent être concises mais explicites, comme « Adresse e-mail » plutôt que simplement « E-mail ». Tous les champs obligatoires doivent également être indiqués comme tels.

• Groupez les éléments de formulaire liés : Si un formulaire comporte plusieurs sections (par exemple facturation vs livraison), regrouper les champs associés dans un <fieldset> avec une <legend> apporte du contexte. Cela facilite la compréhension des relations entre les champs.

3. Maintenez un ordre de lecture logique

La structure de votre code doit correspondre à la façon dont il est lu visuellement. Si l’ordre de lecture n’a pas de sens, les utilisateurs — surtout ceux utilisant un lecteur d’écran — risquent de se perdre ou de manquer des informations importantes.

• Gardez le contenu dans un ordre naturel : Les titres doivent précéder les paragraphes qu’ils introduisent, et les boutons doivent suivre les instructions qui les expliquent. Un contenu inattendu peut perturber les utilisateurs.

• Évitez d’utiliser des tableaux de mise en page : Les tableaux doivent uniquement servir à présenter des données, pas à organiser la mise en page. Utilisez plutôt des titres, listes et sections pour structurer clairement le contenu.

• Vérifiez que le CSS ne modifie pas l’ordre de lecture : Certaines décisions de design, comme déplacer des éléments avec du CSS, peuvent amener les lecteurs d’écran à lire le contenu dans le désordre. Testez toujours votre contenu pour vous assurer qu’il s’enchaîne logiquement à la lecture.

Une page bien structurée permet à tous les utilisateurs de suivre facilement l’information, quel que soit leur mode d’interaction avec votre contenu.

4. Prévoyez des méthodes de navigation alternatives

Les utilisateurs n’interagissent pas toujours avec le contenu de la même façon. Certains utilisent des lecteurs d’écran, d’autres naviguent uniquement au clavier. S’assurer que votre contenu fonctionne avec différents modes d’entrée est essentiel pour l’accessibilité.

• Implémentez des repères ARIA : Les repères ARIA (Applications Internet Riches et Accessibles), comme <nav>, <main> et <aside>, aident les technologies d’assistance à identifier les sections clés d’une page. Si ces éléments HTML5 ne sont pas disponibles, utilisez ‘role="navigation"’ ou ‘role="main"’ pour offrir une fonctionnalité similaire.

• Activez l’accessibilité clavier : Assurez-vous que tous les éléments interactifs (boutons, liens, champs de formulaire, etc.) sont accessibles uniquement au clavier. Les utilisateurs doivent pouvoir naviguer entre les éléments avec la touche Tab et utiliser Entrée ou Espace pour les activer.

Erreurs courantes à éviter

Même avec la meilleure volonté, il est facile d’oublier certains aspects d’une bonne structure de contenu. Voici quelques erreurs courantes à éviter pour garantir une bonne expérience utilisateur.

• Utiliser le style visuel au lieu de la structure sémantique : Mettre du texte en gras au lieu d’utiliser de vrais titres (<h1>, <h2>, etc.) peut sembler suffisant, mais cela ne donne pas aux lecteurs d’écran ou aux utilisateurs une structure claire. De vrais titres sont nécessaires pour permettre une navigation efficace dans le contenu.

• Surcharger les pages avec trop de contenu non structuré : De longs blocs de texte sans titres, listes ou sections claires peuvent être accablants, surtout pour les personnes avec un TDAH ou une dyslexie. Découper le contenu en sections plus petites et structurées le rend plus facile à assimiler.

• Oublier de tester avec des technologies d’assistance et des personnes en situation de handicap : Si vous ne testez pas votre contenu numérique avec des lecteurs d’écran, des utilisateurs clavier ou de vraies personnes ayant des troubles cognitifs, vous risquez de passer à côté de problèmes d’accessibilité. Testez votre contenu tôt et régulièrement pour garantir son accessibilité à tous.

Symbole d’accessibilité à côté d’une série d’icônes de design et de développement.

Meilleure structure, meilleure accessibilité

WCAG 1.3.1 fournit la base nécessaire pour créer un contenu bien structuré et facile à naviguer — en particulier pour les personnes ayant des troubles cognitifs, dont le TSA, le TDAH et la dyslexie. Structurer votre contenu avec des titres, des listes, des étiquettes et un ordre de lecture logique permet d’offrir une meilleure expérience à tous les utilisateurs, en les aidant à naviguer, comprendre et interagir plus facilement avec votre contenu.

Pour vous accompagner dans la création de contenus mieux structurés, accessibles et conformes, il y a AudioEye. De notre Scanner d’accessibilité Web gratuit qui identifie 30 violations WCAG à notre Plateforme d’accessibilité automatisée qui les corrige automatiquement, AudioEye facilite la détection et la correction des problèmes de structure dans votre contenu. Nous complétons également nos tests logiciels par des Audits d’experts réalisés par des spécialistes de l’accessibilité et des membres de la communauté en situation de handicap. Grâce à notre approche en trois volets, vous répondrez facilement aux exigences du critère WCAG 1.3.1 et de tous les autres critères de succès.

Prêt à vous lancer ? Analysez votre contenu ci-dessous ou planifiez une démo pour voir AudioEye en action.