Comment rendre votre contenu accessible ? Lorsque vous rédigez un article de blog ou une simple page de contenu il est important de toujours garder en tête qu’il existe différents niveaux de déficiences visuelles. Vos lecteurs peuvent utiliser des technologies d’assistance variées. Certaines personnes aveugles ou malvoyantes utilisent des lecteurs d’écran et d’autres des logiciels d’agrandissement de contenu.
Votre contenu doit être accessible à tout le monde, l’inclusivité est la clé. Voici quelques conseils pour rendre votre contenu accessible.
Conseil #1 : Labelliser les liens et boutons
Si le texte de vos liens et boutons sont suffisamment explicites, comme “Recherche” ou “Accueil” alors il est inutile de rajouter un aria-label. L’utilisateur comprend l’action qu’il y a derrière. Par contre, si votre lien ne contient qu’une icône alors il sera indispensable d’ajouter un aria-label ou un texte en masquage accessible, c’est-à-dire un texte qui n’est pas visible à l’œil sur la page, mais qui est présent dans le DOM et caché en CSS. Voici une classe CSS qui permet de cacher visuellement du contenu texte tout en restant accessible aux lecteurs d’écrans.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
Évitez les labels génériques de type “Cliquez ici” mais plutôt “Découvrez mon nouvel article sur…” afin de fournir des liens et boutons pertinents et compréhensibles aux utilisateurs.
Conseil #2 : Labelliser les champs de formulaire
Si votre article possède un formulaire pour ajouter un commentaire et que vous souhaitez que votre contenu soit accessible, assurez-vous que tous les champs soient compréhensibles afin que les lecteurs d’écran ne lisent pas “bouton radio”, “champs texte” mais plutôt “nom”, “adresse”, “votre commentaire”.
Vous pouvez également aider l’utilisateur à remplir les champs du formulaire avec l’attribut HTML : autocomplete.
<form id="form" method="POST">
<label for="family-name">Votre nom (*) :</label>
<input aria-required="true" type="text" id="family-name" name="family-name" autocomplete="family-name" />
<label for="first-name">Votre prénom :</label>
<input type="text" id="first-name" name="first-name" autocomplete="given-name" />
<label for="email">Votre email (nom@site.com) (*):</label>
<input aria-required="true" type="text" name="email" id="email" autocomplete="email" />
<label for="message">Votre commentaire (*) : </label>
<textarea aria-required="true" name="message" id="message"></textarea>
<!-- l'attribut aria-label reprend l'intitulé visible du bouton -->
<input type="submit" id="submit" value="Envoyer" aria-label="Envoyer - Poster un commentaire" />
</form>
Conseil #3 : Utiliser une bonne police de caractères
Ceci ne sera pas uniquement utile aux personnes malvoyantes mais aussi à celles voyantes. En effet, une police de caractères lisible et de bonne taille simplifie grandement la lecture. Respectez également le contraste de couleur entre le texte et son arrière-plan. Contrast Checker est un outil pour vérifier le contraste ratio entre 2 couleurs.
Également, votre taille de texte ne doit pas être en pixel, mais en unité relative em ou rem ; Ceci afin que le contenu s’adapte en fonction des préférences de l’utilisateur qu’il a enregistré dans son navigateur.
Voici un article expliquant l’importance d’utiliser la bonne unité pour vos fonts : Pixels vs. Relative Units in CSS: why it’s still a big deal
Conseil #4 : Offrir une alternative audio au captcha de vérification
Si vous avez un captcha de vérification sur vos formulaires de commentaire ou de création de compte, assurez-vous que celui-ci ait une option audio. Les lecteurs d’écran ne liront pas l’image et ils sont souvent difficiles à lire même pour les personnes voyantes. L’option audio aide tous les utilisateurs et sécurise votre site.
Les personnes ayant une déficience visuelle sont souvent bloquées à cette étape de validation de formulaire et malheureusement ils n’ont d’autre choix que de quitter le site.
Conseil #5 : Renseigner le alt des images
On pense souvent que le alt des images sert à améliorer le SEO. Même si c’est le cas, le texte contenu dans l’alternative d’une image est une mine d’or pour les utilisateurs de lecteurs d’écran. Mais l’alternative est souvent mal utilisée et elle fait partie des 5 erreurs d’a11y les plus fréquentes.
- Si votre image nécessite qu’elle soit décrite, car celle-ci apporte une information pertinente à votre contenu, alors il faut renseigner une description dans la balise
altde votre image. Ne jamais renseigner uniquement des mots clés pour faire plaisir à Google, cela devient incompréhensible pour les utilisateurs de lecteurs d’écran. - Si votre image est purement décorative, laissez le
altvide.
Conseil #6 : Utiliser les titres
La navigation par les aveugles et malvoyants se fait souvent avec des raccourcis clavier sur desktop ou mobile (oui, une personne avec une déficience visuelle peut très bien utiliser un smartphone). Ils naviguent avec les titres qu’ils trouvent dans votre page et peuvent ainsi sauter de section en section facilement et rapidement.
Il est très important d’utiliser les titres pour améliorer le parcours utilisateur.
Voici une vidéo qui illustre comment utiliser le rotor menu Voice Over avec Safari sur Mac OS :
- Pour ouvrir le rotor menu sur Voice Over :
ctrl + option + U - Naviguez avec les flèches directionnelles dans le rotor Menu
- Touche Entrée pour accéder à un contenu
Conseil #7 : Interdiction d’avoir des vidéos en autoplay
Cela peut rendre très compliqué la compréhension entre le lecteur d’écran et la vidéo qui se lance automatiquement, c’est la cacophonie ! Mais cela perturbe aussi les utilisateurs ayant d’autres troubles cognitifs ou neurologiques.
Vous devez permettre le contrôle total de vos vidéos avec les boutons lecture, pause, niveau du volume etc.
Conseil #8 : Compatibilité navigateurs
N’oubliez pas de parcourir votre contenu sur différents navigateurs, également sur mobile et tablette afin de vérifier que les contenus restent lisibles peu importe la résolution de l’écran.
En mobile, si le sens de lecture est vertical, il ne doit pas y avoir de scroll horizontal.
Les personnes ayant des déficiences visuelles ont le droit d’accéder à l’information de la même façon que tout le monde. En suivant les conseils que nous venons de lister, vos contenus attireront plus de lecteurs et les utilisateurs de technologies d’assistance apprécieront leur visite sur votre site ou blog.
Soyez inclusif dans la rédaction de vos articles.
Découvrez également des outils pour tester l’a11y de votre site.
