Accessibilité numérique : 5 conseils pour optimiser son site

Malgré son caractère obligatoire depuis plusieurs années, encore trop peu de collectivités se penchent sur l'accessibilité de leur site web, freinées par la complexité de la mise en conformité. Pourtant, au côté des gros chantiers d’audit ou de refonte, travailler ou revoir son contenu en mettant en pratique quelques principes simples contribue déjà à améliorer l’accès des personnes en situation de handicap aux informations disponibles sur les outils numériques. Lors des dernières Rencontres de la communication numérique, Patrice Razet, ancien responsable numérique du département du Maine-et-Loire et consultant en communication chez Canévet et associés a donné plusieurs conseils à appliquer pour concevoir des contenus numériques plus accessibles.

Hiérarchiser ses contenus en utilisant les différents niveaux de titres, les sous-titres et les puces, un principe de l’écriture pour le web aux multiples vertus pour tous :

• il facilite la lecture et la compréhension du texte ;
• il donne du rythme pour relancer l’attention du lecteur ;
• il génère des balises dans le code du site qui seront identifiées par les technologies d’assistance.

Les personnes non voyantes pourront ainsi naviguer de manière fluide et cohérente dans le texte, y compris un utilisateur non voyant que tout le monde connaît : Google. Les robots du moteur de recherche sont friands des balises. Un texte ainsi structuré sera à la fois plus accessible et mieux référencé.

Il en va de même pour les images. Le célèbre moteur de recherche sera également sensible aux balises « alt », cette description textuelle qui indique ce que contient l’ image. Ce « texte alternatif » s’affiche lorsque les images ne se chargent pas sur la page et est lu par les lecteurs d’écran (synthèses vocales ou plages en braille) pour que les mal-voyants accèdent aux informations véhiculées par l’image. Dans la plupart des systèmes de gestion de contenu utilisés pour mettre à jour les pages d'un site web, un champ « alt » permet de saisir ce texte descriptif lors de l’insertion d’une image.

Faut-il pour autant renseigner ce champ pour chaque image ?
Si l’image est purement illustrative et n’apporte aucune information aidant à la compréhension globale, c’est inutile.
À l’inverse, cela sera nécessaire pour toute image porteuse d’information :

• affiche (si le texte d’accompagnement ne mentionne pas tous les éléments) ;
• infographie, tableau, camembert en format image ;
• toute image comprenant du texte ;
• image d’archives, œuvre d’art, plan, photo de situation, etc.

Penser aussi à compléter la balise « alt » – quand celle-ci ne suffit pas à retranscrire la masse d’information contenue par certaines images (infographies, graphiques, carte) – d'une description détaillée au format texte mise à disposition sur une autre page accessible depuis un lien.

Le texte de ce lien, comme celui des autres liens présents, doit être signifiant. Lu par l’outil de transcription, il doit fournir une information claire sur le contenu auquel accède l’internaute après avoir cliqué. Pour rédiger des liens accessibles :

• éviter de faire des liens depuis des segments de texte du type « Cliquez ici », ou « En savoir plus », au profit de liens plus descriptifs comme « Découvrir le projet de médiathèque » ou « En savoir plus sur l’inscription sur les listes électorales » ;
• en cas de lien externe s’ouvrant dans une nouvelle fenêtre, signaler l’ouverture dans une nouvelle fenêtre à la fin du titre du lien (par exemple « En savoir plus sur l’inscription sur les listes électorales (nouvelle fenêtre) ») ;
• en cas d’ouverture de document, signaler le poids et le type du document (« En savoir plus sur l’inscription sur les listes électorales (pdf, 100 ko) »).

Mettre à disposition à côté de la vidéo intégrée sur une page sa transcription textuelle qui restitue les informations véhiculées par le média. Cela favorisera également votre référencement, comme bon nombre d’autres pratiques accessibles.

Ne pas faire passer une information uniquement par la couleur. Un autre moyen, de préférence textuel, doit permettre à un utilisateur qui ne perçoit pas correctement les couleurs d’accéder à cette information.

Veiller également à choisir des couleurs suffisamment contrastées par rapport à leur arrière-plan pour que le texte soit lisible pour les utilisateurs souffrant de troubles visuels. Des outils comme Color Oracle ou WebAIM Contrast Checker vous y aideront.