Tout comprendre sur l'accessibilité numérique - Blog Ipedis

RGAA 4.1 : Comprendre un audit de site web sur l’accessibilité numérique

Rédigé par Moïse Akbaraly | 12 mars 2021 à 09:52

Rappel sur l’accessibilité numérique

Tout d’abord, avant de comprendre un audit il faut savoir ce qu’est l’accessibilité numérique.

L’accessibilité numérique est la possibilité d’accès à l’information pour tous les utilisateurs, quel que soit leur matériel, leurs logiciels, leur langue, leur localisation ou leurs capacités d’accéder aux contenus numériques et d’utiliser facilement les outils informatiques.

La loi française fait de l’accessibilité une exigence pour les services de communication publique en ligne. 

En application de cette loi, le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) a été élaboré. Ce référentiel est une méthodologie pour vérifier la conformité des critères issus des règles internationales (WCAG).

RGAA 4.1 : les nouveautés

Créé en 2009, le RGAA a été mis à jour le 21 octobre 2019 dans sa version 4.0, puis en février 2021 pour une mise à jour 4.1. La mise à jour du RGAA n’a pas intégré de nouveaux éléments mais a essentiellement modifié 35 critères et la façon de les tester. 

La majeure partie des modifications entre ces deux versions sont liées à :

-        Des changements d’intitulés dans la section Présentation de l’information par exemple ;

-        Des variations dans les tests pour vérifier les critères, les sections impactées sont :

o   Les Intitulés des liens - les ancres ont été supprimées ;

o   La Structuration de l’information,

o   Les Tableaux

o   Les Images

-        Des suppressions de cas particuliers pour :

o   La validité du code source généré et la langue par défaut.

o   La linéarisation du tableau

Ce ne sont donc pas des changements structurels sur les critères d’accessibilité, aucun nouveau critère n’a été ajouté ou supprimé. 

Quelles sont les critères, thématiques et éléments concernés par le RGAA 4.1

La version du RGAA 4.1 est composée de 106 critères qui concernent 13 thématiques différentes à prendre en compte tels que :

  •  Les images

A savoir si elles sont décoratives, informatives ou complexes, elles ne seront pas traitées dans le code html de la même manière ;

-   Une image décorative n’apporte pas d’information complémentaire à l’utilisateur comme une bannière sur un site web.

-   Une image complexe se distingue par l’utilisation de graphique par exemple.

-   Une image informative donne des informations complémentaires utiles à la compréhension.

  • Les cadres

Les cadres (ou frame) permettent d’utiliser une page html d’un site tiers sur la page existante. Cela est utilisé notamment pour marquer la présence d’une vidéo hébergée sur une plateforme en ligne (ex : Youtube). 

Les titres de cadres sont essentiels pour que l’utilisateur puisse comprendre le contexte avant d’accéder au contenu.

  • Les couleurs

Une information ne doit pas être transmise uniquement par la couleur. 

Exemple : Si dans un formulaire, l’encadré change seulement de couleur car le champ est invalide, cela n’est pas conforme. Il faut ajouter, dans ce cas, une information textuelle disant que ce champ est incorrect avec une précision.

Par ailleurs, les couleurs se doivent d’être suffisamment contrastées pour le texte et les icônes.

  • Le multimédia

Les vidéos doivent comporter des sous-titrages, des transcriptions ou audiodescription pertinentes ; le son et les animations doivent être contrôlées via le clavier et la souris.

  • Les tableaux

Ils doivent comporter un titre et être déclaré correctement dans le code html en tant que tel (têtière et cellules) ; ...

  • Les liens

Ils doivent être explicites sur leur destination ; « Voir plus » par exemple, n’est pas explicite pour l’utilisateur.

  • Les scripts

Les scripts permettent d’utiliser un élément d’un site tiers (ou « 3rd party ») qui ajoutent des fonctionnalités dynamiques sur le site.

Il existe différents exemples de scripts :

- Le calendrier pour les réservations en ligne ;

- L’utilisation de lecteurs de vidéos externes qui ne sont pas hébergées sur le site (Youtube, Dailymotion …)

- Les widgets Instagram, Twitter…

- Les cartes en ligne (Google Maps)

 Généralement actionnable à la souris, ils doivent être également accessibles via le clavier et la souris, ainsi qu’être compatibles aux technologies d’assistance ;

  • Les éléments obligatoires

Le type de document et de langage dans le code doivent être définis correctement ; le code source doit être valide et la page doit contenir un titre explicite ; ...

  • La structuration de l’information

La structure du contenu doit pouvoir être cohérente et pertinente. Cela se traduit par une hiérarchie de titres correcte, des listes qui permettent au lecteur d’écran de les lire comme telles, des citations explicitées dans le html…

  • La présentation de l’information

L’information doit être la plus claire possible pour tout type d’utilisateurs et pour tout type de technologies d’assistance. 

Cela se traduit par des critères sur le focus au clavier, une navigation de la page sans défilement horizontal, les composants d’interface contrôlable avec n’importe quelle technologie (souris, clavier, etc..). 

Les éléments doivent également être lisibles lorsque la page est zoomée à 200 %.

  • Les formulaires

Les formulaires doivent être les plus pertinents possibles. Chaque champ doit être associé à son label. Les informations doivent être structurées et regroupées si elles sont de même nature. 

Il faut faciliter le remplissage des champs en suggérant le remplissage automatique, ou en suggérant des recommandations avant le remplissage, par exemple.

  • La navigation

La navigation a une place centrale dans l’expérience utilisateur. Pour faciliter la navigation pour tout type de technologies, il faut déjà que les zones de la page soient bien définies, et que les menus, boutons, soient placés de manière identique entre les pages. 

Aussi, les utilisateurs de lecteurs d’écran et/ou de clavier ne sont pas ignorés. Il faut aider leur navigation en proposant des liens d’évitement et proposer un ordre de tabulation (i.e. : utiliser « tab » pour naviguer entre les éléments du site) qui soit cohérent par rapport au contenu du site.

  • La consultation

Il ne faut jamais laisser l’utilisateur au dépourvu. Il faut prévenir tout changement d’état sur le site. Ainsi, prévenez l’utilisateur avant d’ouvrir une nouvelle fenêtre. Les clignotements sont aussi à éviter ou se doivent d’être contrôlables.

Peu importe l’orientation de la page, le contenu doit être toujours visible. Les PDFs doivent également être accessibles.

A quoi sert un audit ?

L’audit en accessibilité numérique a pour but de respecter ces dits critères (RGAA) et de prévenir l’entreprise, demandeur de l’audit, sur les bonnes pratiques à avoir en vue de répondre au mieux à ces normes. 

Par ailleurs, un bon résultat d’audit en accessibilité permet moins de discrimination pour les personnes en situation de handicap mais aussi d’obtenir un meilleur SEO (optimisation pour les moteurs de recherche).

Comment réaliser un audit ?

Échantillonnage

Suite à la demande du client, le consultant en accessibilité effectue une sélection des pages à auditer, c’est l'échantillonnage. L'échantillonnage se compose de :

-   La page d’accueil,

-   La page de contact,

-   La page accessibilité,

-   Un ensemble de pages représentatives du site. Cette représentativité est basée sur des pages dont la structure, la composition ou l'interaction sont différentes.

Remarque : Dans le cadre d’un processus comme une inscription, l’ensemble des pages doit être audité.

Une fois ces pages validées par le client, le consultant peut commencer son audit.

L’audit

Afin de repérer des critères non conformes, le consultant examine les erreurs par le code et doit réaliser plusieurs types de vérifications : automatique, semi-automatique et manuelle.

  • Automatique : utilisation de logiciels ou extensions permettant de vérifier tous les critères. Cependant, le consultant doit vérifier la pertinence des résultats car les faux-positifs sont très présents avec cette méthode. Un exemple d’extension ; IBM, inspecte et analyse le code sur l'accessibilité numérique.
  • Semi-automatique : Utilisation d’extension pour aider à la vérification telles que : 

o   Accessible Color Picker, qui vérifie le contraste des contenus dans la page et donne une alternative conforme ;

o   Web developper, identifie les hiérarchies de titres et désactive le CSS ;

  • Manuelle : Vérification du code « à la main », vérification des alternatives textuelles, affichage des éléments de style, focus visible, ordre de tabulation cohérent…

Quand le consultant signale un critère non valide, il explique pourquoi ce critère n’a pas été validé et offre une solution au client afin qu’il puisse corriger son site internet.

Voici un exemple

Si le critère 1.1 (Chaque image porteuse d’information a-t-elle une alternative textuelle ?) n’est pas valide.

 - Le consultant signale le problème :

L’image est porteuse d’information, il est donc nécessaire de fournir une alternative textuelle à son contenu, son contexte ou son utilisation possible.

- Le consultant propose une solution :

Ajouter une alternative pertinente à l’image (alt= "xxx") 

- Le consultant reprend le code source du client et lui indique un nouveau code source à appliquer :

<img class="image" src="image.jpg" alt="alternative pertinente">

Les critères non valides et non appliqués sont ainsi notifiés dans un fichier automatisé permettant d’obtenir un résultat précis sur le nombre de critères conformes, ce qui donne un score global d’accessibilité à l’entreprise. 

Plus le score est proche de 100 %, plus le site internet est accessible.

Que faire à l’issue d’un audit réalisé sur son site – La déclaration d’accessibilité

Enfin quand l’audit est terminé, le consultant doit transmettre au client, une déclaration d’accessibilité qui est un condensé de l’audit sur les points rencontrés. Cette déclaration est une page web à intégrer dans le site client. 

Cette déclaration montre le niveau d’accessibilité du site à destination du public en ligne.

Elle comprend :

  1. Le résultat de l’évaluation
  2. Un moyen de contacter le responsable du site
  3. Un lien vers le schéma pluriannuel de mise en accessibilité
  4. La liste des contenus non accessibles 
  5. Un moyen de signalement des difficultés rencontrées liées à l’accessibilité web

Avec le Décret de loi 2019-768, ce ne sont plus seulement les organismes du secteur public et affiliés publics qui doivent rendre e-accessibles leur services et outils de communication en ligne. 

Avec cette nouvelle obligation légale, ce sont aussi les entreprises privées de plus de 250 millions d’euros de chiffres d’affaires annuel qui doivent se mettre en conformité. 

Pour poursuivre votre lecture sur ce sujet passionnant, je vous invite à lire notre FAQ spéciale Décret de loi Accessibilité Numérique.