Accessibilité des contenus web : 9 bonnes pratiques que les rédacteurs web doivent connaître

Permettre un accès numérique universel sans aucune forme de discrimination fait consensus dans la communauté internationale. Pourtant, nombreux sont les freins qui empêchent ce vœu pieux d’être exaucé. Le handicap en fait partie, qu’il s’agisse d’une déficience visuelle, auditive ou cognitive. Dès 1999, le World Wide Web Consortium a édicté ses Web Content Accessibility Guidelines, des recommandations visant à rendre les contenus plus accessibles aux personnes handicapées. En France, alors que ce sujet touche plus de 10 % de la population, l’État impose déjà l’accessibilité des contenus web aux sites publics. Il a aussi défini les modalités d’application des standards internationaux dans le RGAA, le Référentiel général d’accessibilité des administrations. Une version pédagogique de ce document a été créée : le guide Contribuer sur le Web de manière accessible. Il s’adresse à toute personne amenée à produire des contenus web via un logiciel de gestion de contenu (CMS). Pour un Web plus inclusif, tous les rédacteurs web devraient avoir feuilleté ses 39 pages. Ce n’est pas votre cas ? Petite session de rattrapage, mais d’abord, une mise en garde : vous allez le voir, les enjeux d’e-inclusion et de SEO se heurtent parfois…

Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.

Définition de l’accessibilité web selon Tim Berners-Lee, le créateur du Web

1. Les images, un enjeu de taille pour favoriser l’accessibilité numérique

Les images ne sont pas que décoratives. Souvent, elles sont aussi porteuses d’informations. Or, celles-ci ne sont pas accessibles aux personnes souffrant de déficience visuelle. Alors, pour que leur lecteur d’écran restitue les données présentes dans les images, une traduction textuelle est primordiale. Il en va de même pour les personnes rencontrant des difficultés d’interprétation de certaines représentations (comme les graphiques), qui ont besoin d’une aide pour en comprendre le sens. Lorsque les images sont cliquables, c’est plus la fonction du lien qui importe que la description à proprement parler.

Dans ces conditions, comment bien faire les choses ? Si l’information à apporter est courte, il suffit de remplir l’attribut alt de la balise image à partir du CMS (aussi appelé, selon les éditeurs, alt text, texte alternatif ou encore texte de remplacement), comme vous le faites déjà sans doute. Il sera lu par le logiciel d’assistance technique.

Si l’information est complexe (comme un plan de quartier) et ne se résume pas à une phrase, il faut rédiger une description détaillée sous l’image (qui explique, par exemple, comment se rendre sur le lieu). Mais pour qu’un lecteur d’écran puisse faire le lien entre l’image et la description détaillée, la bonne pratique pour l’accessibilité web est la suivante :

• dans le texte alternatif, titrer l’image sans la décrire, mais en indiquant qu’une description suit (par exemple, « Plan d’accès (voir description ci-après) ») ;
• dans la description détaillée, sous l’image, reprendre ce titre et le compléter par les informations importantes (« Plan d’accès (description détaillée) : pour accéder à… »)

????Le guide déconseille d’utiliser l’attribut alt aux seules fins de référencement naturel (en y plaçant, par exemple, une liste de mots-clés ou une phrase destinée à améliorer le SEO). C’est en effet un frein à l’accessibilité.

⏩ À lire aussi sur le blog : Le référencement des images

2. Les couleurs ou comment améliorer l’accessibilité des contenus web par des pratiques simples

Contrastes insuffisants ; illustrations reposant uniquement sur la couleur ; mots importants mis en relief à l’aide d’une couleur de police particulière… On n’y pense pas, mais certains procédés ou réglages sont problématiques pour les personnes aveugles, malvoyantes ou présentant une déficience de la perception (daltonisme).

Pour s’assurer que les contrastes entre une couleur d’écriture et celle du fond de page (ou de l’image) sont suffisants, il existe des extensions, comme WCAG Color contrast checker. Elles permettent de procéder aux ajustements nécessaires le cas échéant.

Lorsqu’une image véhicule une information grâce à la couleur (un diagramme circulaire par exemple), il suffit de rédiger une description détaillée, en procédant de la même manière que pour les images complexes (cf. partie précédente).

La tentation serait sans doute grande d’utiliser l’attribut alt à cette fin. Or, il faut éviter. Eh oui, car le texte alternatif n’est accessible qu’aux lecteurs d’écran. Les personnes présentant des difficultés de perception des couleurs, qui n’utilisent donc pas d’assistant technique, n’auraient pas accès à cette information.

Pour le reste, certaines pratiques sont à bannir, comme appliquer une couleur différente aux mots importants d’un texte. Dans un tel cas, l’information, qui se veut pourtant essentielle, passerait totalement inaperçue pour une personne en situation de handicap visuel.

3. Les cadres, ces contenus provenant d’autres sites web : discriminants ?

Les cadres permettent de faire apparaître un contenu en provenance d’un site tiers : vidéo, tweet… Par essence, il est impossible de les modifier. L’enjeu pour la personne handicapée est d’être prévenue qu’elle arrive sur ce type de média et de pouvoir choisir si elle veut l’explorer ou non.

A minima, le titre doit être rempli : il suffit pour cela d’insérer l’attribut title dans le code HTML. Il résume alors le contenu (par exemple « vidéo de Lucie Rondelet sur comment structurer un article de blog »).

4. Les contenus multimédias : comment les rendre plus inclusifs ?

Vidéos ou podcasts, ces contenus multimédias sont vecteurs d’exclusion pour les personnes souffrant de déficience visuelle ou auditive. Nombre de vidéos, par exemple, font apparaître des informations (incrustées ou non) qui ne sont pas apportées par l’intervenant. L’utilisateur en situation de handicap a donc besoin qu’on les lui restitue autrement.

La première étape est de faire précéder le contenu multimédia d’un titre. Il permet à l’utilisateur de comprendre de quoi parle un contenu. Ensuite, il y a plusieurs possibilités :

• Les sous-titres pour les sourds et malentendants : ils ne concernent que les vidéos et doivent transcrire tous les éléments sonores, du script de l’orateur au bruitage. Il est important qu’ils soient bien synchronisés avec l’image. Ils doivent être activables ou désactivables depuis le lecteur multimédia. Et si ce n’est pas possible, il faut alors proposer 2 vidéos : une avec sous-titres et une sans.
• Audiodescription : elle ne concerne, elle aussi, que les vidéos. Il s’agit d’une narration ajoutée à la piste sonore, qui décrit les détails visuels importants, que la bande-son principale ne permet pas de comprendre à elle seule. Elle n’est pas toujours utile, notamment lors d’interviews.
• La transcription textuelle : il s’agit de la retranscription au format texte de tout le contenu audible, mais aussi informatif d’une vidéo ou d’un fichier audio. Elle doit être structurée, à l’instar de tout autre contenu texte sur le Web, et accessible directement sous le fichier ou bien sur une autre page web.

Fichier vidéo ou audio, il est important qu’il ne se lance pas en automatique au chargement de la page. De plus, les contrôles minimum requis (lecture, pause, arrêt, volume, activation ou désactivation des sous-titres ou de l’audiodescription) doivent être accessibles au clavier et à la souris, en utilisant la touche tabulation.

5. Les tableaux : à éviter autant que possible pour favoriser l’accès numérique universel

En raison de leur complexité à appréhender pour une personne déficiente visuelle munie d’un lecteur d’écran, les tableaux sont à proscrire. Vous êtes obligé d’en insérer dans une page web ? En plus d’un titre, renseignez les en-têtes de colonne ou de ligne dans la fenêtre des propriétés. Ainsi, l’utilisateur peut se repérer plus rapidement dans chacune des cases qui composent le tableau.

6. Les liens : essentiels pour l’accessibilité web

Un internaute atteint de cécité n’a pas de vision globale d’une page web. Il lui faut alors pouvoir comprendre facilement la fonction des liens qu’il rencontre, et surtout, où ils mènent. Cet impératif de clarté concerne aussi les personnes présentant des déficiences cognitives. Les liens doivent donc s’appuyer sur des ancres pertinentes (pas de « cliquez ici » par exemple).

Si vous définissez une ouverture de la page dans un nouvel onglet, l’utilisateur doit en être informé. Comment ? Au moyen d’une infobulle, qui reprend l’intitulé du lien, suivi de la mention « nouvel onglet », comme ici, avec ce lien renvoyant vers l’article sur les bonnes pratiques en rédaction web (passez votre souris sur le lien sans cliquer pour visualiser). Il suffit pour cela de renseigner le titre du lien dans la fenêtre d’insertion dédiée du CMS ou, si l’éditeur n’offre pas cette possibilité, d’intégrer la balise title directement dans le code HTML.

Lorsque le lien est constitué d’une image, le texte alternatif de celle-ci en constitue alors l’intitulé. Il ne faut plus remplir la description, mais plutôt indiquer la destination du lien.

7. La structure du texte et sa mise en forme : des points de vigilance pour améliorer l’utilisabilité d’un site par tous

Si vous exercez la profession de rédacteur web, vous le savez, vos contenus doivent être structurés avec des titres (h1) et des intertitres (h2, h3 et suivants). Ce que vous savez moins, c’est que c’est aussi un bon point pour l’accessibilité numérique ! Pour tous, la présence de ces jalons a la même vertu : permettre de se repérer facilement dans une page web. Pour les déficients visuels, ils facilitent aussi la navigation, qui peut s’effectuer de titre en titre au moyen de raccourcis clavier.

Par ailleurs, en rédaction web, les listes à puces sont les bienvenues. Elles offrent également une expérience de navigation enrichie aux personnes utilisant un lecteur d’écran. En plus, celui-ci leur indique la longueur de l’énumération ! Ils peuvent donc choisir de la parcourir (ou pas !).

Veillez aussi à ne pas justifier vos textes (alignez-les à gauche) et à opter, si vous le pouvez, pour un interlignage assez large (l’idéal étant 1,5). Cela facilite la lecture aux personnes atteintes de troubles cognitifs.

Pour finir sur la structuration d’un article, n’oubliez pas d’utiliser la balise paragraphe, qui rend la lecture par un assistant technique bien plus agréable.

⏩ Pour en savoir plus : HTML sémantique : le balisage HTML parle à l’humain

8. Les mots étrangers, complexes et les abréviations dans un texte : des grains de sable qui nuisent à l’expérience utilisateur

Les utilisateurs de synthèse vocale sont dépendants de la prononciation pour déchiffrer le sens d’une phrase. Mais pour être compris, certains mots ou expressions nécessitent d’être lus dans leur langue d’origine. Sinon, « la mise à jour Hummingbird de Google » deviendrait « la mise à jour “Umaingbirde” de Google »…

Toute page web est dotée d’une langue principale, qui permet au lecteur d’écran de lire les mots avec la bonne prononciation. Mais il est possible, ponctuellement dans un texte, de changer la langue de référence. Toutefois, le plus souvent il faut en passer par un changement de code source.

Par ailleurs, certaines formulations peuvent poser des problèmes de prononciation par les synthèses vocales et, au-delà, de compréhension pour l’utilisateur. C’est le cas des mots dont la terminaison en « ent » peut se prononcer « e » ou « an ». Ainsi, la phrase « les poules du couvent couvent » sera lue « les poules du couve couve ». Incompréhensible pour un non voyant ou même une personne atteinte de troubles cognitifs. La solution préconisée est alors d’essayer de reformuler différemment, et si ce n’est pas possible, de placer la bonne prononciation entre crochets, juste après le mot qui représente une difficulté.

Quant aux sigles et acronymes, l’idéal est de les faire suivre de leur signification entre parenthèses, ce que vous faites sans doute déjà puisqu’il s’agit d’une bonne pratique en rédaction web.

9. Les citations, ces phrases innocentes qui sèment pourtant la confusion chez les personnes malvoyantes

Selon les règles habituelles de typographie, les citations se placent entre guillemets. Or, en pratique, ceux-ci sont utilisés aussi bien pour citer un auteur que pour mettre un mot ou une expression en emphase, créant de la confusion pour les personnes déficientes visuelles. Il est donc important de marquer correctement les citations en utilisant le bloc de citation du CMS, représenté le plus souvent par une icône de guillemets.

Pour finir, sachez que les principes d’accessibilité numérique listés dans cet article s’appliquent aux pages web, mais également aux documents téléchargeables à partir de ces pages. Un site web accessible, mais qui transmet des informations à ses visiteurs au travers de documents non inclusifs n’est en réalité pas considéré comme étant accessible. Dans l’idéal, le site doit rester le vecteur principal d’information, et les documents à télécharger utilisés à de seules fins d’impression.

Vous le voyez, les bonnes pratiques pour l’accessibilité d’un contenu web ne vont pas toujours dans le sens de celles préconisées pour l’optimisation des sites internet. Pourtant, pour un site, elles sont indispensables afin de satisfaire et fidéliser l’internaute porteur de handicap.

⏩ Aviez-vous connaissance de ce référentiel ? Comment conciliez-vous SEO et inclusion numérique ? Faites-nous part de votre expérience en commentaire.

Stéphanie Soulier – Chargée éditoriale FRW et ancienne élève Origami 4

Sources :
https://disic.github.io/guide-contribuer_accessible/export/guide-contribuer-accessible.pdf
https://blog.insee.fr/handicap-et-autonomie-des-enjeux-dinclusion-y-compris-dans-les-statistiques/