Comment rendre le contenu de votre site WordPress accessible

Résumé:

Lorsque vous saisissez le contenu d’un site WordPress, vous avez un impact important sur son accessibilité. Voici quelques conseils pratiques pour rendre le contenu de votre site inclusif et accessible pour les personnes handicapées.

Une partie conséquente de l’accessibilité d’un site WordPress provient du thème utilisé. L’accessibilité devrait être une des priorités des entreprises qui développent des thèmes, et un critère essentiel pris en compte quand on choisit un thème existant pour son propre site – ou celui de ses client·es ¹.

Mais si vous rédigez ou saisissez le contenu d’un site, votre rôle en matière d’accessibilité est tout aussi primordial. En effet, parmi les problèmes d’accessibilité les plus courants sur le web, la plupart concernent directement le contenu.

Dans cet article, je partage quelques bonnes habitudes à prendre pour permettre aux personnes qui ont un handicap – aussi bien visuel que moteur – d’accéder plus facilement au contenu de votre site.

Sommaire

1. Choisir des combinaisons de couleurs assez contrastées
2. Respecter la hiérarchie des titres
3. Bien utiliser le texte alternatif et la légende des images
4. Définir des intitulés de liens pertinents et explicites
5. Indiquer les changements de langue
6. Conclusion: rendre un site accessible, c’est pas si compliqué !
7. Ressources

---

Choisir des combinaisons de couleurs assez contrastées

L’erreur d’accessibilité la plus fréquente sur le web est un manque de contraste entre la couleur d’un texte et celle de son arrière-plan, ce qui rend le texte difficile à lire. Il s’agit d’un problème majeur pour certaines personnes qui ont un handicap visuel – mais aussi un des points sur lesquels vous pouvez agir le plus facilement.

Des normes précises existent concernant le contraste pour les combinaisons de couleurs, qui peut être calculé au moyen d’outils en ligne tels que Contrast Ratio. Si votre thème utilise l’éditeur natif de WordPress et vous permet de modifier les couleurs d’arrière plan et du texte de certains blocs, une alerte s’affichera si le contraste entre les couleurs sélectionnées n’est pas suffisant.

Dans cet exemple, le contraste entre le fond turquoise et le texte blanc est trop faible pour répondre aux normes d’accessibilité. L’éditeur de WordPress indique donc que cette combinaison de couleurs est difficilement lisible et invite à utiliser une couleur d’arrière-plan plus sombre et/ou une couleur de texte plus claire.

Lorsque je choisis par exemple une couleur d’arrière-plan plus foncée, l’avertissement disparait.

---

Respecter la hiérarchie des balises de titres

Lorsque vous ajoutez des titres dans un article ou une page, vous avez le choix entre plusieurs niveaux indiqués de H1 à H6. Ces chiffres désignent le niveau hiérarchique du titre, qui permet de structurer le document, et correspondent aux balises HTML <h1> à <h6>. Un titre de niveau H2 sera considéré comme le sous-titre d’un titre H1, un titre H3 le sous-titre d’un titre H2, etc.

Le niveau H1 est utilisé pour le titre principal de la page. Les titres que vous ajoutez dans le contenu d’une page ou d’un article devraient donc commencer au niveau H2.

Le respect de la hiérarchie des titres est primordial pour l’accessibilité, particulièrement pour les personnes aveugles ou malvoyantes qui utilisent un lecteur d’écran ². Ces logiciels identifient les balises de titre, ce qui leur permet de comprendre et de communiquer de manière claire la structure du contenu. Les balises Hn ne doivent donc pas être utilisées pour des raisons esthétiques, par exemple pour modifier la taille d’un texte.

Les balises HTML de titres sont utilisées par les lecteurs d’écran de deux manières:

• Lorsque le lecteur d’écran rencontre une balise de titre, il énonce par exemple: « Niveau d’en-tête 2, Respecter la hiérarchie des titres ». Si le titre suivant est de niveau 3, l’internaute sait ainsi qu’il s’agit d’un sous-titre du titre de niveau 2 précédent.
• Les lecteurs d’écran proposent également un mode de navigation par titres; ils énoncent alors uniquement les titres trouvés dans la page, ce qui permet aux utilisateurs et utilisatrices de « scanner » la page et d’accéder rapidement au contenu qui les intéresse.

L’éditeur natif de WordPress intègre un outil très pratique qui analyse la structure hiérarchique de la page comme le ferait un lecteur d’écran. Pour cela, il suffit de cliquer sur le bouton « Vue d’ensemble du document » présent en haut à gauche de l’éditeur.

Dans l’exemple suivant, le titre « Notes et références » a un niveau H4; il suit le titre « Indiquer les changements de langue », qui a lui un niveau H2. WordPress indique donc que le niveau H4 est erroné.

Si je le changeais pour un niveau H3, WordPress considérerait le niveau hiérarchique comme correct, car d’un point de vue sémantique, une balise <h3> peut effectivement suivre un <h2>. Mais dans la hiérarchie du contenu, ça n’aurait en revanche aucun sens, puisque « Notes et références » serait considéré comme un sous-titre de « Indiquer les changements de langue » – ce qui n’est pas le cas.

Dans cet exemple, le titre « Notes et références » a en réalité la même valeur hiérarchique que « Indiquer les changements de langue », et doit donc avoir un niveau H2.

Si pour des raisons visuelles vous souhaitez quand même afficher ce titre avec une taille plus petite que les autres titres de niveau H2, vous pouvez utiliser les réglages typographiques ³ présents dans les paramètres du bloc (à droite de l’éditeur). Cela modifie uniquement l’apparence du texte, sans avoir d’impact sur le niveau hiérarchique du bloc.

---

Bien utiliser le texte alternatif et la légende des images

Lorsque vous ajoutez une image dans un article ou une page de votre site, vous avez la possibilité de renseigner un texte alternatif et une légende. Les deux ont des fonctions différentes:

• La légende est affichée directement en-dessous de l’image. Elle est visible pour l’ensemble des internautes et lue par les lecteurs d’écran; elle est donc utile pour tout le monde, y compris pour les personnes qui ne peuvent pas voir l’image. La légende peut être ajoutée grâce au bouton « Ajouter une légende » présent dans la barre d’outil du bloc « Image ».
• Le texte alternatif est lu par les lecteurs d’écran, mais n’est pas affiché visuellement. Il sert uniquement pour l’accessibilité et doit absolument figurer sur les images indispensables à la bonne compréhension du contenu. Le texte alternatif peut être ajouté dans les réglages du bloc « Image », dans la colonne à droite de l’éditeur.
• Une image peut avoir un texte alternatif et une légende. On utilisera par exemple le texte alternatif pour une description courte de l’image, et la légende pour apporter des explications supplémentaires pour l’ensemble des utilisateurs et utilisatrices.

Pour rendre les images d’un site accessibles, on conseille habituellement de toujours renseigner le texte alternatif. Il s’agit effectivement d’une bonne habitude à prendre, mais attention, il ne faut pas le faire n’importe comment.

Sur quelles images le texte alternatif est-il nécessaire ?

La règle de base est la suivante: si une image est indispensable à la compréhension du contenu, on doit ajouter un texte alternatif. C’est par exemple le cas d’une image qui contient du texte.

En réalité, c’est souvent un peu plus complexe, et chaque image devrait être analysée au cas par cas pour déterminer si un texte alternatif est nécessaire ou non. Voici quelques exemples concrets:

• Une image est purement décorative. Elle est là pour faire joli et n’apporte aucune information ou contexte supplémentaire au contenu. Dans ce cas, le texte alternatif n’est pas nécessaire, vous pouvez le laisser vide.
• Une image est décorative, mais apporte du contexte au contenu. Par exemple, des photos qui illustrent votre activité de photographe, ou qui montrent le côté convivial de votre restaurant. Dans ce type de situations, la présence d’un texte alternatif peut aider les internautes aveugles ou malvoyants à mieux comprendre votre contenu.
• Une image contient du texte. Si ce texte est présent uniquement sur l’image, le texte alternatif est indispensable et doit contenir le même texte que l’image: sans lui, il manquerait une information pour les personnes qui utilisent un lecteur d’écran.
• Une image contient du texte, qui se trouve aussi dans le corps de la page ou de l’article, à proximité de l’image. Dans ce cas, le texte alternatif sur l’image serait redondant, on évite donc de le renseigner. Cette solution présente un autre avantage: le texte peut être agrandi par les personnes qui en ont besoin, ce qui n’est pas le cas du texte présent sur une image. Il peut également être sélectionné, copié, traduit.
• Une image ne contient pas de texte mais apporte une information qui n’est pas présente sous une autre forme. Par exemple, une petite icône représentant un téléphone, placée avant un numéro de téléphone. Si le mot « téléphone » précède le numéro, l’information est présente, l’icône est donc considérée comme purement décorative. Si en revanche le numéro est indiqué seul, on ajoute « Téléphone » comme texte alternatif sur l’image de l’icône.

Rédiger un bon texte alternatif

Une fois que vous avez déterminé qu’une image a besoin d’un texte alternatif, il est temps de le rédiger.

Un bon texte alternatif n’est pas juste une description du contenu de l’image, il doit tenir compte du contexte dans lequel elle figure. Pour une même image, on pourra avoir des dizaines de textes alternatifs différents; selon le site ou la page sur laquelle elle se trouve, les éléments importants ne sont pas les mêmes.

Voici quelques conseils pour rédiger des textes alternatifs utiles, qui serviront aux personnes qui en ont besoin:

• Soyez concis. On conseille en général de s’en tenir à une ou deux phrases, et à un maximum de 120 caractères.
• Demandez-vous quels sont les éléments clés qui vous ont fait choisir cette photo en particulier.
• Si l’image sert de lien, utilisez le texte alternatif pour indiquer ce qu’il va se passer en cliquant sur le lien.
• Ne commencez pas votre texte alternatif par « image de… », « photo de… » etc. Ça n’a pas d’intérêt, les lecteurs d’écran énoncent de toute façon qu’il s’agit d’une image. Vous pouvez en revanche indiquer qu’il s’agit d’un logo, d’une illustration, d’un portrait.
• Ne dupliquez pas du texte déjà présent avant ou après l’image, cela rendrait le texte alternatif redondant.
• Évitez de renseigner le même texte alternatif sur plusieurs photos.
• N’utilisez jamais le texte alternatif pour renseigner une liste de mots clés.

---

Définir des intitulés de liens pertinents et explicites

Lorsque vous ajoutez un lien ou un bouton dans le contenu d’un article ou d’une page, il est indispensable de bien réfléchir à son intitulé – c’est à dire le texte cliquable visible par les internautes.

Un intitulé de lien doit informer les utilisateurs et utilisatrices de ce qu’il va se passer lorsqu’on cliquera dessus. Par exemple, un lien intitulé « Cliquez ici » ou « En savoir plus » n’est pas assez descriptif, les internautes ne savent pas où ils seront redirigés. Au contraire, si le texte d’un lien indique « Téléchargez notre e-book gratuit », « Consultez nos prestations » ou « Accédez au formulaire de contact », on a une idée beaucoup plus précise de ce qu’il va se passer lorsqu’on cliquera.

Des intitulés de liens clairs aident donc tous les internautes, mais sont particulièrement importants pour les personnes qui ont un handicap visuel et utilisent un lecteur d’écran. Dans ces logiciels, une fonctionnalité permet de lister tous les liens présents sur la page, afin de naviguer plus rapidement sur le site. Les liens sont alors énoncés sans aucun contexte supplémentaire. Si une page ou un article contient plusieurs liens dont les intitulés sont vagues et/ou identiques, les internautes n’ont aucun moyen de savoir à quoi ils correspondent.

---

Indiquer les changements de langue

La langue principale de chaque page d’un site est spécifiée dans la balise <html>, et dépend de la langue indiquée dans les réglages du site. Cela impacte la langue dans laquelle le contenu de la page sera restitué par les lecteurs d’écran. Dans le cas où le texte d’une page majoritairement en français contient un mot ou une phrase dans une autre langue, on peut indiquer ce changement dans le code de la page.

Ainsi, si la deuxième langue est installée dans le logiciel, celui-ci pourra lire correctement le texte concerné.

Pour indiquer un changement de langue dans un bloc de texte, sélectionnez le mot ou la phrase concernée, puis cliquez sur la petite flèche située en avant-dernière position de la barre d’outils. Dans la liste des options de mise en forme, choisissez « Langue ». Une fenêtre s’ouvre alors, dans laquelle vous pouvez préciser la langue en tant que code de langue ISO. Il s’agit en général d’un code de deux lettres (par exemple ‘fr’ pour le français, ‘en’ pour l’anglais, ‘de’ pour l’allemand).

Dans le code HTML de la page, ce changement est indiqué grâce à la balise <bdo> sur laquelle est appliqué l’attribut lang.

<bdo lang="en" dir="ltr">Where is Brian ?</bdo>

Personnellement, j’aime que les mots ou les phrases dans une autre langue que le français soient aussi indiqués visuellement avec de l’italique. Pour cela, on peut simplement ajouter la propriété CSS suivante dans la feuille de style du site.

*[lang] {
  font-style: italic;
}

---

Conclusion: rendre un site accessible, c’est pas si compliqué !

Une idée reçue courante – et fausse – à propos de l’accessibilité web, c’est qu’il s’agit d’une démarche compliquée. On pense aussi souvent que ce n’est pas notre travail: les développeurs et développeuses considèrent que c’est l’affaire des designers, les designers pensent qu’il s’agit uniquement de questions techniques, et les personnes qui s’occupent du contenu croient que tout vient du site en lui-même.

En réalité, toute personne qui contribue à un site web à un rôle à jouer, et se doit de le faire.

L’accessibilité web ne peut se résumer à une liste de cases à cocher, on doit tenir compte des besoins des personnes handicapées, de la manière dont elles utilisent le web. Néanmoins, l’accessibilité d’un site repose en grande partie sur des bonnes pratiques qui ne sont pas du tout compliquées à appliquer.

Chaque décision prise par une équipe a une incidence sur l’accessibilité d’un site. Au même titre que le contenu, la conception de l’interaction ou les performances Web, l’accessibilité est un élément essentiel de la création de sites Web. Et, contrairement à ce que de nombreuses équipes pensent, elle ne peut pas être traitée séparément du reste du processus de conception.

En fait, si vous travaillez sur le Web à quelque titre que ce soit, l’accessibilité fait partie de votre travail.

Laura Kalbag – « Accessibility for everyone »

---

Ressources

• Sur le blog d’Access42, la série d’articles Contenus accessibles dans WordPress propose de nombreux conseils et exemples pratiques.
• Comment rendre votre site WordPress accessible: Allie Nimmons décortique plusieurs mythes relatifs à l’accessibilité web avant de s’intéresser spécifiquement aux problèmes rencontrés sur les sites WordPress et aux bonne pratiques pour les éviter.
• Improve your site’s accessibility (en anglais): recommandations officielles dans la documentation de WordPress.com
• Good Alt Text, Bad Alt Text – Making your content perceivable (en anglais): règles et conseils pour la rédaction de textes alternatifs utiles.
• Writing great alt text – Emotion matters (en anglais): Jake Archibald explique l’importance de tenir compte du contexte pour la rédaction du texte alternatif d’une image, avec des exemples concrets.
• Writing Useful Alt Text (en anglais): Michelle Barker partage des explications plus techniques, et se penche également sur le cas des images qui contiennent beaucoup de texte.
• 50.1% empty links (en anglais): Manuel Matuzović a testé la restitution de liens contenant une image sans texte alternatif avec plusieurs lecteurs d’écran.