Accessibilité

Comment créer du contenu web accessible ?

Dans un contexte de digitalisation, la création de contenu accessible devient essentielle pour garantir une expérience inclusive et équitable à tous les utilisateurs.

Le WCAG (Web Content Accessibility Guidelines) définit les directives internationales pour l’accessibilité du contenu web. Sa version courante est le WCAG2.2.

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) a été édité par la direction interministérielle du numérique (DINUM) afin d’établir les règles d’accessibilité web en France. Sa version courante est la 4.1.2.

Il est essentiel de noter que le contenu web doit répondre à certaines exigences de conformité qui sont catégorisées en 3 niveaux (niveau A, niveau AA et niveau AAA).

 
Cet article propose des recommandations pour avoir un contenu accessible et inclusif.

Norme 1 : Perceptible

Cette norme préconise que l’information et les éléments de l’interface utilisateur soient formulés de façon claire pour rendre le contenu accessible.

Contenu textuel

Le contenu textuel doit être hiérarchisé et offrir une compréhension facile pour un utilisateur ayant un niveau d’études secondaire, sauf pour des termes techniques ou spécifiques du contexte. Par exemple, on ne peut pas interdire dans un article de médecine d’utiliser des termes spécialisés (Laryngite ou Anémie), mais on préconise que les phrases puissent être simples et compréhensibles (sujet, verbe et complément).

Contenu non textuel

Tout contenu non textuel doit avoir une description alternative textuelle, permettant de déterminer son objectif. Nous utilisons couramment des formulaires dans nos pages. Pour ces derniers, les composants qui attendent une entrée de l’utilisateur tels que (champs textes, champs de sélection) doivent avoir un nom ou une description textuelle et explicite de ce qui est attendu par ce composant. Il en est de même pour les éléments de contrôle, tels que les boutons d’action.

Les médias

Les médias audios et vidéos doivent être accompagnés du fichier son synchronisé décrivant la séquence. Aussi pour inclure une plus large audience, un média temporel doit être accompagné d’une description alternative textuelle.

Les images également doivent être accompagnées de description alternative textuelle décrivant leur objectif. Cette recommandation est aussi valable pour les captchas, et il existe d’autres techniques plus élaborées pour ces derniers.

Le contenu web

Le contenu web doit s’adapter à différents agents sans perte d’information. Idéalement, l’affichage ne doit pas imposer l’orientation paysage ou portrait, sauf pour des cas exceptionnels comme des jeux vidéo ou lecteur de chèques.

Informations importantes

Les informations importantes du contenu web ne doivent pas être mises en avant par des couleurs, étant donné que certains utilisateurs ne les perçoivent pas de la même façon, comme par exemple les daltoniens ou les malvoyants. Il est plutôt recommandé de mettre l’information en gras avec une police lisible, tout en respectant les contrastes de couleurs. Un contenu accessible doit avoir un contraste adapté, c’est-à-dire que la différence de luminosité entre le contenu et son arrière-plan doit être suffisante.

Illustration identité 5 Degrés

Norme 2 : Utilisable

La norme utilisable préconise de rendre toutes les fonctionnalités disponibles via le clavier, par utilisation des touches classiques (tabulation, touches directionnelles). Ainsi le premier élément d’un formulaire a le focus par exemple, et les champs suivants sont séquentiellement atteignables par usage de la touche tabulation.

Si le contenu web nécessite des raccourcis claviers particuliers ou des combinaisons de touches spécifiques, cela doit être mentionné sur la page à l’intention de l’utilisateur.  Exemple : s’il y a une autre manière de monter ou de descendre sur une page qu’en utilisant uniquement les touches directionnelles (flèches), cela doit être mentionné.

Si le contenu web contient des composants chronométrés, il est recommandé de donner la possibilité à l’utilisateur de les activer, les désactiver et même d’étendre le temps avant leur expiration. Exemple : dans un questionnaire, des champs à remplir avec une temporalité définie.

Il est également conseillé de ne pas utiliser de composants clignotants pour éviter des réactions indésirables chez certains utilisateurs (convulsion ou autres réactions physiques). Exemple : certains codes couleurs peuvent provoquer des crises d’épilepsie. Ne pas dépasser trois clignotants.

Enfin, le contenu web devrait, lorsque cela est nécessaire, avoir un marqueur afin de situer l’utilisateur sur la page ou sur l’étape où il se situe, afin de le rendre plus accessible.  Par exemple dans le cas d’un contenu multi pages ou multi-étapes.

Norme 3 : Compréhensible

Il est recommandé d’avoir un contenu web lisible et facilement compréhensible pour un niveau d’études secondaire. Si le contenu contient des abréviations ou des termes spécialisés et/ou difficilement compréhensibles, il est conseillé de faire des renvois vers une section qui définit ces derniers, ou encore des bulles d’information au survol de ces termes. 

Les différentes pages d’un site avec des contenus similaires doivent être prévisibles, c’est-à-dire se ressembler au niveau de leur mise en page. Il est conseillé d’éviter des variations dans l’affichage de ces pages quasi-identiques dans leur structure.  

Par exemple, les pages de type article devraient avoir un titre en H1, chaque sous- titre en H2 et les paragraphes selon la même police. 

Aussi, il est recommandé d’éviter tout changement de la mise en page lorsqu’un élément reçoit le focus ou change de valeur. Par exemple, dans un formulaire de recherche, la sélection d’une catégorie de produits ne devrait pas redessiner les sous composants de ce dernier, soit changer la mise en page.  

Enfin, cette norme suggère de fournir une aide à la saisie des formulaires. Si un format particulier est attendu pour une entrée, il est recommandé d’indiquer l’information à l’utilisateur. Il est même recommandé de lui afficher un message d’erreur indiquant explicitement ce qui est attendu, et lorsque cela est possible, de lui suggérer une correction. 

Norme 4 : Robuste

Cette norme préconise que le contenu web soit compatible avec différents navigateurs et autres terminaux d’affichage, sans perte d’information. Par exemple, certains sites s’affichent correctement sur Google Chrome, mais ne s’adaptent pas à Mozilla FireFox. Lorsqu’un site n’est pas supporté par un navigateur, il est fortement recommandé de mettre en place un message automatique pour en informer l’utilisateur et lui conseiller de changer de navigateur.

Norme 5 : Conformité

Pour un site web, il est très difficile de satisfaire toutes les exigences de conformité et créer du contenu accessible. Certaines pages du site peuvent satisfaire des exigences de niveau A, d’autres de niveau AA et d’autres encore de niveau AAA. 

On peut retenir que le niveau A exige de respecter les points de contrôle de niveau 1 sur l’accessibilité web. Par exemple :  

  • La description alternative textuelle pour le contenu non textuel,  
  • La navigation au clavier avec les touches classiques (tabulation et directionnelles),  
  • Un contenu structuré et compréhensible.  

Le niveau AA exige de respecter les points de contrôle de niveau 1 et ceux de niveau 2.  Comme exemple : 

  • Une navigation cohérente sur l’ensemble des pages web de même structure,  

  • Le contenu web peut être affiché sur différents terminaux ou agents (différents navigateurs ou écrans), sans perte d’information, 
  • Les composants chronométrés peuvent être activés et désactivés par l’utilisateur.  

Enfin le niveau AAA exige l’ensemble de niveau 3 et cela doit prendre en compte les niveaux 1 et 2. Par exemple :  

  • L’organisation de contenu cohérent et prévisible,  
  • Les contrastes de couleurs entre l’arrière-plan et le contenu web sont satisfaisants,  
  • La prévention active des erreurs de saisie et/ou la suggestion de correction.  

Avec l’évolution constante des normes d’accessibilité, nos efforts doivent également être continus.

Et pour conclure

En conclusion, la mise en place d’un contenu web aux normes d’accessibilité est importante dans notre monde de plus en plus digital. En adoptant les directives du WCAG et du RGAA, les créateurs de contenu contribuent à garantir une expérience inclusive et équitable pour tous les utilisateurs. Les normes de priorité, du niveau A au niveau AAA, fournissent un cadre clair pour évaluer la conformité et améliorer progressivement l’accessibilité. 

Chez 5 Degrés, nous sommes conscients de l’importance du respect des normes d’accessibilité dans la création de contenu accessible, compréhensible et inclusif. 

Dans le cadre de la refonte imminente de notre site web, nous avons prévu d’intégrer un maximum de normes selon le WCAG et le RGAA pour permettre à un public diversifié de lire et de profiter de nos contenus.

Outil d'évalution de conformité

Sources :

Picture of Darine Nganga

Darine Nganga

Consultante Product Owner Practice Product Management

Partager l'article

Partager l'article

Sommaire

À lire aussi

Casser les stéréotypes
Lire l'article
Idnentité 5 Degrés
Lire l'article
Data Storytelling
Lire l'article