L'accessibilité web : pourquoi et comment faire

Afin de permettre une inclusion numérique optimale, il est nécessaire de concevoir son site internet en ayant en tête un certain nombre de bonnes pratiques et de règles.

L’accessibilité web c’est quoi ?

Créer un site accessible, c’est prendre en compte des difficultés d’accessibilité de certains utilisateurs (handicaps visuels, moteurs, auditifs, cognitifs...) et concevoir son site internet en fonction de cela, pour permettre un usage optimal à tous.

Le web est important dans tous les moments de la vie (éducation, travail, loisirs, administration, santé...) et il est essentiel pour l’égalité des chances que chacun y ait accès de la même façon, peu importe ses capacités. L’accès à l’information et aux technologies de communication est défini comme un droit humain fondamental dans la convention des Nations Unies concernant les droits des personnes handicapées (CRPD de l’ONU).

Principes de l’accessibilité web, normes et niveaux

Les directives WCAG (Web Content Accessibility Guidelines) établissent les standards les plus reconnus concernant l’accessibilité. Ils sont répartis en 4 grands principes :

- Perceptible : possibilité de voir ou entendre le contenu
- Utilisable : navigation possible au clavier ou à la voix
- Compréhensible : texte facile à lire et comprendre
- Robuste : contenu utilisable et interprétable par un maximum d’agents utilisateurs

Les WCAG 2.0 sont la recommandation officielle depuis 2008, et sont répartis en 3 niveaux :

- Niveau A : critères pour un niveau d’accessibilité minimal
- Niveau AA : critères pour un niveau d’accessibilité amélioré
- Niveau AAA : critères pour un niveau d’accessibilité supérieur, mais non applicables dans tous les contextes

En France, le RGAA (Référentiel Général d'Accessibilité pour les Administrations), basé sur les recommandations WCAG, définit les modalités d’accessibilité des services en ligne de l’État. La dernière version, RGAA 4, est publiée en septembre 2019.

Bonnes pratiques : conception et développement web

Dans le cadre de la conception et du développement de sites internet, les bonnes pratiques principales à mettre en application sont les suivantes :

Images

- Les images informatives : doivent être placées à côté de l’information à laquelle elles font référence, et doivent comporter les balises “alt” et “longdesc” (décrire l’information qu’elle porte)
- Les images de décoration ne doivent pas apporter d’information essentielle à la compréhension de la page / du sujet, la balise “alt” doit être vide
- Les légendes d'images doivent être reliées aux images auxquelles elles sont liées, visuellement et en développement : balise "figure" avec attribut "role="group"
- Dans la mesure du possible, éviter d’utiliser des display:none qui ne sont pas lisibles par les logiciels de lecture pour masquer un alt qui est justement là pour l’accessibilité.

Couleurs

- L’information ne doit pas pas être donnée uniquement par la couleur
- Le contraste entre le texte et l’arrière plan doit être suffisant : utiliser un outil comme Hexnaw
- Dans le cas d’utilisation de couleur, vérifier leur contraste suffisant pour les déficiences visuelles
     - Plugin Sketch pour tester les couleurs  (daltonisme) : Stark
     - App Mac pour tester des zones sur l’écran : Sim
- Distinguer les liens du texte normal en les soulignant
- Graphiques : utiliser des textures en plus des couleurs, ou vérifier leurs contrastes
- Input : les erreurs doivent comporter en plus du contour rouge un icône distinctif
- Différencier les call to action du reste du contenu

Multimédias

- Les iframes doivent avoir une balise "title"
- Les vidéos/fichiers audio doivent avoir une alternative textuelle
- Les sons déclenchés automatiquement doivent être contrôlables par l'utilisateur
- Les vidéos/audio doivent pouvoir être contrôlables par le clavier uniquement ET la souris

Tableaux

- Les tableaux de données doivent comporter un titre décrivant ce qu’il apporte, avoir une balise "caption" pour y mettre un résumé, et une balise "title"
- Les tableaux doivent avoir des balises "th"
- Les graphiques doivent comporter un titre (de quoi il s’agit).

Scripts

- Les scripts nécessaires doivent être compatibles avec les logiciels d’assistance

Éléments obligatoires

- Chaque page doit avoir un "title"
- Affichage de la langue par défaut dans chaque page, changement de langue indiqué dans le code source
- Pas d’utilisation de balises à des fins de présentation

Structuration de l’information

- Respecter la structure Hn : H1, H2…
- Chaque page doit être structurée logiquement avec un "header", "nav", "main", "footer"

Présentation de l’information

- Utilisation de feuilles de style
- Pas de justification de texte
- Utilisation des balises "ul" et "li" pour les listes
- Utilisation des balises "q" (courte) ou "blockquote" (bloc) pour les citations
- Afficher les infos de format et poids sur les fichiers à télécharger
- Laisser de l’espace et aérer les informations : certains utilisateurs grossissent les tailles de textes

Formulaires

- Les champs doivent avoir un titre visible et compréhensible, avec un "title" et l'étiquette "label" associés à chacun
- L’indication d’un champ obligatoire doit être visible et légendée, et disposer d'un attribut "required"
- Mettre en place des contrôleurs de saisie
- Préciser le format, poids max pour les champs “documents”

Navigation

- La navigation doit être possible avec la touche de tabulation
- À chaque ouverture de nouvelle fenêtre, attribut "target"
- Avoir un sitemap toujours atteignable et pertinent
- Avoir un fil d’Ariane
- Intégration de lien d’évitement : ces liens permettent de sauter des groupes de liens pour la navigation au clavier. Ils sont à placer généralement en début de page pour faciliter la navigation.
- Les menus doivent être simples et clairs (oublier les menus trop chargés)

Pop-ups

- Les actions à faire pour les utilisateurs doivent être claires et précises (Pas de Oui / Non seuls).
- Ne pas utiliser uniquement les couleurs pour différencier les boutons d’actions

Les bonnes pratiques dans leur exhaustivité sont disponibles sur ce référentiel sur le site du gouvernement. Vous pouvez également parcourir ici des tutoriels sur l’accessibilité.