10 astuces pour rendre votre site accessible
Rendre votre site web accessible permet à tous les internautes d’utiliser et de naviguer sur votre site, indépendamment de leurs capacités physiques ou cognitives. C’est un excellent moyen pour élargir votre audience et pour permettre à plus de personnes d’accéder à votre contenu.
Plusieurs pays ont mis en place des réglementations et des lois d’accessibilité des sites web, dans le but de garantir l’accès aux informations et aux services en ligne à toutes les personnes, sans discrimination.
Dans cet article, nous proposons top 10 astuces permettant de rendre votre site accessible.
Tout ce qu’il faut savoir sur l’accessibilité du site web
C’est quoi ?
L’accessibilité d’un site web fait référence à la mesure dans laquelle un site peut être utilisé par des personnes souffrant de handicap. Il peut s’agir :
- des personnes malvoyantes ou ayant la cécité
- des personnes malentendantes ou ayant une perte auditive
- des personnes à mobilité réduite
- des personnes qui ont des troubles cognitifs
Il s’agit donc de la pratique de la conception et du développement des sites web, pour qu’il puisse être utilisé par tous.
Les normes d’accessibilité web aident les designers et les développeurs à rendre leurs sites web accessibles à tous.
Pourquoi l’accessibilité du site web devrait être une priorité ?
Les propriétaires des sites web doivent s’assurer de ne pas exclure n’importe quel groupe d’utilisateur. Ainsi, elle permet aux personnes ayant des handicaps ou des besoins particuliers d’accéder aux informations et aux services en ligne comme tous les autres utilisateurs.
De même, rendre votre site web accessible améliore l’expérience utilisateur pour tous les visiteurs de votre site web.
Astuces permettant de rendre un site accessible
1. Choisir un système de gestion de contenu qui prend en charge l’accessibilité
Il existe de nombreux systèmes de gestion de contenu disponibles, pour aider à créer un site web. Les systèmes les plus courants sont Drupal et WordPress, mais il existe de nombreuses autres options disponibles.
Une fois que vous avez choisi un système de gestion de contenu adapté à vos besoins, il faut s’assurer de choisir un thème/ template accessible. Pour ce faire, consultez la documentation du thème pour voir les notes concernant l’accessibilité et les conseils pour créer un contenu et des mises en page accessibles pour ce thème. Il faut être sûr d’utiliser les mêmes directives lors de la sélection des modules, des plugins ou des widgets.
Pour des éléments tels que les barres d’outils d’édition et les lecteurs vidéos, il faut s’assurer qu’ils prennent en charge la création de contenu accessible. Par exemple :
- Les barres d’outils d’édition doivent inclure des options pour les titres
- Les tableaux accessibles et les lecteurs vidéos doivent inclure des options pour les titres et les tableaux accessibles.
2. L’utilisation correcte des headings
Utiliser les titres correctement permet d’organiser la structure du contenu. En effet, les utilisateurs de lecteurs d’écran peuvent utiliser la structure des titres pour naviguer dans le contenu. Grâce aux titres (<h1>, <h2>, <h3> etc.) le contenu du site sera bien organisé et facilement interprété par les lecteurs d’écran.
Il faut s’assurer de respecter le bon ordre des titres et de séparer la présentation de la structure en utilisant CSS (Cascading Style Sheets). Il ne faut pas choisir un en-tête simplement parce qu’il est beau visuellement, cela risque de dérouter les utilisateurs de lecteurs d’écran. Par contre, il est recommandé de créer une nouvelle classe CSS pour styliser votre texte.
Exemples d’utilisations appropriées des titres :
- Utilisez <h1> pour le titre principal de la page. Éviter d’utiliser un <h1> pour autre chose que le titre du site web et le titre des pages individuelles.
- Utiliser des headings pour indiquer et organiser la structure de votre contenu.
- Ne sautez pas les niveaux de titres, par exemple ne passez pas d’un <h1> à un <h3>, car les utilisateurs de lecteurs d’écran se demanderont s’il manque du contenu.
3. Utiliser le texte alternatif pour les images
Le texte alternatif doit être fourni pour les images. Il permet aux utilisateurs de lecteurs d’écrans, ayant des problèmes de vision, de comprendre les messages véhiculés par les images sur la page. Ils sont extrêmement importants pour les images informatives comme les infographies.
L’objectif de l’utilisation du texte alternatif est de proposer un texte qui contient le message à transmettre via l’image. D’ailleurs, quand l’image comprend du texte, ce dernier doit également être inclus dans l’alt.
Il existe une seule exception à cette règle. Lorsqu’une image est utilisée uniquement pour la décoration, le texte alternatif peut être laissé vide.
4. Donner à vos liens des noms uniques et descriptifs
Lorsque vous incluez des liens dans votre contenu, utilisez un texte décrivant correctement la destination de ce lien. L’utilisation de “cliquer ici” n’est pas considérée comme descriptive. Elle est inefficace pour un utilisateur de lecteur d’écran.
Les internautes souffrant de malvoyance utilisent souvent des lecteurs d’écran pour rechercher des liens. Mais, ils ne lisent pas le lien dans le contexte du reste de la page. Dans ce cas, l’utilisation d’un texte descriptif, expliquant correctement le contexte des liens, est obligatoire.
5. Savoir comment utiliser les couleurs
- La forme la plus courante de déficience de couleur est la déficience de la couleur rouge-vert. Elle touche environ 8% de la population. Utiliser seulement des couleurs comme celles-ci, surtout dans les champs obligatoires dans un formulaire, empêchera les utilisateurs ayant des troubles de déficience de couleur de comprendre votre message.
- Par contre, les personnes ayant des troubles d’apprentissage profitent de la couleur, lorsqu’elle est utilisée pour organiser votre contenu.
Pour satisfaire ces deux groupes, vous pouvez utiliser d’autres indicateurs visuels, comme un astérisque ou un point d’interrogation. Il est également conseillé de bien distinguer les blocs de contenu les uns des autres, en utilisant une séparation visuelle. Par exemple, des espaces ou des bordures.
Il existe plusieurs outils que vous pouvez utiliser pour évaluer le contraste des couleurs. Ces outils vous aident à rendre votre page utilisable pour les personnes malvoyantes ou ayant les différents niveaux de daltonisme.
6. Concevoir des formulaires accessibles
Lorsque les champs de formulaire ne sont pas étiquetés de manière appropriée, l’utilisateur du lecteur d’écran ne dispose pas des mêmes indices que l’utilisateur voyant. Pour lui, il serait impossible de connaître quel type de conte doit être saisi dans un champ de formulaire.
Les champs du formulaire doivent avoir une étiquette descriptive. Par exemple, si le champ est destiné au nom d’une personne, il doit être étiqueté ainsi “Nom complet” ou avoir deux champs distincts étiquetés comme suit “Prénom” et “Nom de famille”. L’internaute doit être capable de parcourir le formulaire et de remplir tous les champs avant d’accéder au bouton “soumettre”. Autrement, il risque de négliger certains champs.
Pour les champs similaires, il est conseillé de les regrouper dans un grand champ. Par exemple, les champs comme “Nom complet”, et “Date de naissance” peuvent être regroupés sous le grand champ “Informations personnelles”. Ce type d’organisation de formulaire aide l’utilisateur de lecteur d’écran à suivre la progression. Il fournit un contexte.
7. Utiliser les tableaux pour les données tabulaires
Il faut utiliser les tableaux pour les données tabulaires, et non pas pour la mise en page. En effet, l’utilisation de tableaux pour la mise en page ajoute une verbosité supplémentaire aux utilisateurs de lecteurs d’écran. Chaque fois qu’un lecteur d’écran rencontre un tableau, l’utilisateur est informé qu’il existe un tableau avec un nombre “x” de colonnes et de lignes. Dans ce cas, la succession tableaux risque de détourner son attention.
De même, le contenu peut être lu dans un ordre qui ne correspond pas à l’ordre visuel de la page. Alors, il est déconseillé de créer la mise en page d’un site web à l’aide d’un tableau. Il faut utiliser plutôt CSS pour la présentation.
Lorsqu’un tableau de données est nécessaire, par exemple, vous disposez d’un ensemble de données comme un relevé qu’il est préférable d’interpréter dans une forme de tableau, vous pouvez utiliser des en-têtes pour les lignes et les colonnes. En effet, ils aident à expliquer les relations entre les cellules.
Les tableaux complexes peuvent avoir plusieurs cellules dans le tableau qui ont une relation unique les unes avec les autres, et celles-ci doivent être identifiées à l’aide de l’attribut “scope” en HTML. Les légendes de tableau (HTML5) peuvent être utilisées pour donner des informations supplémentaires aux utilisateurs sur la meilleure façon de lire et de comprendre les relations entre les tableaux.
8. Le clavier seul
Les utilisateurs à mobilité réduite peuvent ne pas être en mesure d’utiliser une souris ou un pavé tactile. Ces personnes peuvent accéder au contenu via un clavier en appuyant sur les touches “tabulation” ou “flèches” ou en utilisant des périphériques d’entrée alternatifs tels qu’une entrée à interrupteur unique. Par conséquent, l’ordre de tabulation doit correspondre à l’ordre visuel, pour que les utilisateurs utilisant uniquement le clavier puissent naviguer logiquement dans le contenu du site.
Pour les pages avec des menus locaux et plusieurs niveaux et sous-éléments, les menus doivent être configurés de sorte que tous les éléments de menu sont accessibles avec le clavier. N’utilisez pas d’éléments qui ne s’activent que lorsque l’utilisateur survole des éléments avec une souris, car les utilisateurs de clavier seulement ou de lecteurs d’écran ne pourront pas les activer.
9. Utiliser les rôles et repères ARIA
ARIA (accessible Rich Internet Applications) est une spécification technique complexe et puissante, permettant d’ajouter des informations d’accessibilité à des éléments qui ne sont pas accessibles en mode natif. Il faut toujours utiliser des éléments HTML natifs, quand ils sont disponibles.
De nombreuses fonctions qui nécessitent auparavant des attributs ARIA sont désormais implémentés dans HTML5. Par exemple :
- Remplacez ARIA role of button par la balise de bouton HTML native.
- Utilisez la balise HTML label au lieu d’aria-label ou arial-labeledby.
- Utilisez la balise HTML 5 nav au lieu ARIA role of navigation.
Les attributs ARIA peuvent être ajoutés à votre HTML, de la même manière que vous ajoutez des classes au HTML afin de charger des attributs depuis CSS. Mais, le simple fait d’ajouter des attributs ARIA n’est pas suffisant pour rendre accessibles les widgets les plus complexes. ARIA ne fait rien pour les internautes utilisant uniquement le clavier (voir l’astuce n° 8) ; elle n’affecte que les personnes utilisant une technologie d’assistance. Vous devez encore configurer vos interactions et comportements à l’aide de Javascript.
Voici des exemples d’utilisation appropriée d’ARIA :
- Mettre des alertes afin d’informer les utilisateurs de lecteurs d’écran des changements de page dynamiques.
- Rendre des widgets complexes et interactifs tels que des sélecteurs de dates accessibles aux utilisateurs de lecteurs d’écran.
10. Rendez le contenu dynamique accessible
Lorsque le contenu est mis à jour de manière dynamique, c’est-à-dire la page peut être actualisée, les lecteurs d’écran peuvent ne pas en être conscients. Cela inclut :
- Les superpositions d’écran
- Les lightboxes
- Les mises à jour sur la page
- Les popuis
- Les boîtes de dialogue modales.
Les internautes qui utilisent uniquement le clavier risquent d’être piégés dans les superpositions de pages. Les utilisateurs de logiciels de grossissement peuvent zoomer sur la mauvaise section de la page.
Ces fonctions peuvent facilement être rendues accessibles. Les options incluent les rôles et les alertes Aria, ainsi que les frameworks de développement frontaux qui prennent spécifiquement en charge l’accessibilité.
Il faut s’assurer que les lecteurs vidéo ne sont pas en lecture automatique et que les lecteurs peuvent être utilisés avec un clavier. De plus, toutes les vidéos doivent avoir des options de sous-titrage et de transcription pour les malentendants.
Si votre site contient un diaporama, il faut s’assurer que chaque photo comporte un texte alternatif et peut être parcourue via le clavier. Si vous utilisez des widgets uniques, il faut tester l’accessibilité.
Mot de la fin
Il existe plusieurs astuces pour rendre un site web accessible, par exemple l’utilisation des textes et descriptions alternatives pour les images et les vidéos, le contraste pour les couleurs, le recours à un code HTML valide, l’ajout des fonctionnalités pour les lecteurs d’écran etc.
En améliorant l’accessibilité de votre site web, vous créez un espace numérique inclusif pour tous les internautes et vous améliorez l’expérience utilisateur.
by 
