Les 10 meilleurs conseils pour rendre votre site Web accessible

1. Choisissez 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 vous aider à créer votre site Web. Les exemples courants incluent Drupal et WordPress, mais il existe de nombreuses autres options disponibles.

Une fois que vous avez choisi un CMS adapté à vos besoins, assurez-vous de choisir un thème/modèle accessible. Consultez la documentation du thème pour des notes sur l’accessibilité et des conseils pour créer du contenu et des mises en page accessibles pour ce thème. Assurez-vous de suivre 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éo, assurez-vous 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 et les tableaux accessibles, et les lecteurs vidéo doivent inclure des sous-titres codés. Les options d’administration du CMS (telles que la création d’un article de blog ou la publication d’un commentaire) doivent également être accessibles.

2. Utilisez correctement les titres pour organiser la structure de votre contenu.

Les utilisateurs de lecteurs d’écran peuvent utiliser la structure des titres pour naviguer dans le contenu. En utilisant les titres (<h1>, <h2>, etc.) correctement et stratégiquement, le contenu de votre site Web sera bien organisé et facilement interprété par les lecteurs d’écran.

Assurez-vous de respecter le bon ordre des titres et séparez la présentation de la structure en utilisant CSS (Cascading Style Sheets). Ne choisissez pas un en-tête simplement parce qu’il est beau visuellement (ce qui peut dérouter les utilisateurs de lecteurs d’écran) ; à la place, créez une nouvelle classe CSS pour styliser votre texte.

Exemples d’utilisation appropriée des titres :

Utilisez <h1> pour le titre principal de la page. Évitez d’utiliser un <h1> pour autre chose que le titre du site Web et le titre des pages individuelles.
Utilisez des en-têtes pour indiquer et organiser la structure de votre contenu.
Ne sautez pas les niveaux de titre (par exemple, passez d’un <h1> à un <h3>), car les utilisateurs de lecteurs d’écran se demanderont s’il manque du contenu.

3. Incluez le texte alternatif approprié pour les images.

Un texte alternatif doit être fourni pour les images, afin que les utilisateurs de lecteurs d’écran puissent comprendre le message véhiculé par l’utilisation d’images sur la page. Ceci est particulièrement important pour les images informatives (telles que les infographies). Lors de la création du texte alternatif, le texte doit contenir le message que vous souhaitez transmettre à travers cette image, et si l’image comprend du texte, ce texte doit également être inclus dans l’alt.

L’exception à cette règle est lorsqu’une image est utilisée uniquement pour la décoration; dans ce cas, le texte alternatif peut être laissé vide(le lien est externe)afin que l’utilisateur du lecteur d’écran ne soit pas distrait du contenu le plus important de la page.

Si une image est le seul contenu d’un lien, le lecteur d’écran lira le nom du fichier si le texte alternatif n’est pas fourni. Fournissez toujours un texte alternatif pour les images utilisées comme liens.

4. Donnez à vos liens des noms uniques et descriptifs.

Lorsque vous incluez des liens dans votre contenu, utilisez un texte décrivant correctement la destination du lien. L’utilisation de « cliquez ici » n’est pas considérée comme descriptive et est inefficace pour un utilisateur de lecteur d’écran.

Tout comme les utilisateurs voyants parcourent la page à la recherche de texte lié, les utilisateurs malvoyants peuvent utiliser leurs lecteurs d’écran pour rechercher des liens. Par conséquent, les utilisateurs de lecteurs d’écran ne lisent souvent pas le lien dans le contexte du reste de la page. L’utilisation d’un texte descriptif explique correctement le contexte des liens vers l’utilisateur du lecteur d’écran.

Le contenu le plus unique du lien doit être présenté en premier, car les utilisateurs de lecteurs d’écran naviguent souvent dans la liste des liens en recherchant par la première lettre.

Par exemple, si vous redirigez les visiteurs vers une page intitulée « À propos de nous » :

Essayez de ne pas dire : » Cliquez ici pour en savoir plus sur notre entreprise. »
Au lieu de cela, dites : « Pour en savoir plus sur notre entreprise, lisez À propos de nous ».

5. Utilisez la couleur avec précaution.

La forme la plus courante de déficience de couleur, la déficience de couleur rouge-vert, touche environ 8 % de la population. Utiliser UNIQUEMENT des couleurs comme celles-ci (en particulier pour indiquer les champs obligatoires dans un formulaire) empêchera ces personnes de comprendre votre message.

D’autres groupes de personnes handicapées, en particulier les utilisateurs ayant des troubles d’apprentissage, bénéficient grandement de la couleur lorsqu’elle est utilisée pour distinguer et organiser votre contenu.

Pour satisfaire les deux groupes, utilisez la couleur, mais assurez-vous également d’utiliser d’autres indicateurs visuels, comme un astérisque ou un point d’interrogation. Assurez-vous également de distinguer les blocs de contenu les uns des autres en utilisant une séparation visuelle (telle que des espaces ou des bordures).

Il existe plusieurs outils que vous pouvez utiliser pour évaluer le contraste des couleurs , ce qui vous aidera à rendre votre page aussi visuellement utilisable que possible pour les personnes malvoyantes ou à différents niveaux de daltonisme.

6. Concevez vos formulaires pour l’accessibilité.

Lorsque les champs du 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. Il peut être impossible de dire quel type de contenu doit être saisi dans un champ de formulaire.

Chaque champ de votre formulaire doit avoir une étiquette descriptive bien positionnée. Par exemple, si le champ est destiné au nom d’une personne, il doit être étiqueté de manière appropriée comme « Nom complet » ou avoir deux champs distincts étiquetés comme « Prénom » et « Nom de famille ». Utilisez la balise <label> ou une propriété ARIA (voir astuce n°9) pour associer le texte de l’étiquette au champ du formulaire.

Lorsque vous parcourez un champ de formulaire, une personne devrait pouvoir parcourir le formulaire et remplir tous les champs avant d’accéder au bouton « Soumettre », ou elle peut même ne pas se rendre compte que des champs supplémentaires existent. Essentiellement, l’ordre de tabulation doit suivre l’ordre visuel.

Si vous avez des champs liés ou similaires, envisagez de les regrouper à l’aide d’ensembles de champs. Par exemple, des champs tels que « Nom complet » et « Date de naissance » peuvent être regroupés sous « Informations personnelles ». Ce type d’organisation de formulaire peut aider un utilisateur de lecteur d’écran à suivre la progression et peut fournir le contexte qui pourrait être perdu lors du remplissage du formulaire.

Si certains champs de formulaire sont obligatoires, le champ doit être étiqueté en conséquence et configuré pour alerter l’utilisateur du lecteur d’écran. Généralement, les champs obligatoires sont signalés comme tels par un astérisque, qui ne sera pas prononcé par certains lecteurs d’écran. Les astérisques (ou indications visuelles similaires) doivent toujours être utilisés pour les utilisateurs voyants, les personnes ayant des troubles d’apprentissage ou les personnes qui parlent l’anglais comme langue seconde. L’indication qu’un champ est obligatoire pour un lecteur d’écran peut être accomplie en ajoutant ARIA required= »true » et ARIA required= »false » pour les champs facultatifs. Après avoir soumis le formulaire, l’utilisateur devra être alerté de la confirmation de soumission et de toute erreur de soumission. Nous vous recommandons d’inclure tout nombre d’erreurs dans le titre de la page (après que l’utilisateur a soumis), afin que l’utilisateur soit immédiatement informé qu’il y a des erreurs sur la page.

Enfin, l’utilisation de CAPTCHA est inaccessible et ne doit pas être utilisée pour valider les soumissions. WebAIM propose un résumé utile des alternatives accessibles(le lien est externe)à CAPTCHA pour garder les formulaires exempts de soumissions de spam.

7. Utilisez des tableaux pour les données tabulaires, pas pour la mise en page.

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, ce qui détourne l’attention du contenu. De plus, le contenu peut être lu dans un ordre qui ne correspond pas à l’ordre visuel de la page. Ne créez pas la mise en page d’un site Web à l’aide d’un tableau ; utilisez plutôt CSS pour la présentation.

Lorsqu’un tableau de données est nécessaire (c’est-à-dire que vous disposez d’un ensemble de données qu’il est préférable d’interpréter dans un format de tableau, tel qu’un relevé bancaire), utilisez des en-têtes pour les lignes et les colonnes, ce qui aide à 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. Assurez-vous que tout le contenu est accessible avec le clavier seul de manière logique.

Les utilisateurs à mobilité réduite, y compris les microtraumatismes répétés, peuvent ne pas être en mesure d’utiliser une souris ou un pavé tactile. Ces personnes peuvent accéder au contenu via l’utilisation d’un clavier en appuyant sur les touches « tabulation » ou « flèches », ou via l’utilisation de périphériques d’entrée alternatifs tels qu’une entrée à interrupteur unique ou un stick buccal. Par conséquent, l’ordre de tabulation doit correspondre à l’ordre visuel, afin que les utilisateurs utilisant uniquement le clavier puissent naviguer logiquement dans le contenu du site.

Les pages longues avec beaucoup de contenu doivent être séparées par des liens d’ancrage (listes de raccourcis), permettant aux utilisateurs de clavier uniquement de passer aux parties pertinentes de la page sans avoir à négocier à travers d’autres contenus. « Passer au contenu principal » doit être fourni en haut de chaque page, afin que les utilisateurs utilisant uniquement le clavier n’aient pas à parcourir la page de navigation pour accéder au contenu principal.

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 soient accessibles avec le clavier. N’utilisez pas d’éléments qui ne s’activent que lorsqu’un utilisateur survole des éléments avec une souris, car les utilisateurs de clavier uniquement ou de lecteurs d’écran ne pourront pas les activer.

9. Utilisez les rôles et repères ARIA (mais seulement si nécessaire).

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. Vous devez toujours utiliser des éléments HTML natifs lorsqu’ils sont disponibles. N’oubliez pas que la première règle d’ARIA est « N’utilisez pas ARIA ». De nombreuses fonctions qui nécessitaient auparavant des attributs ARIA sont désormais implémentées dans HTML5.

Par exemple:

Utilisez la balise de bouton HTML native au lieu du rôle ARIA de bouton.
Utilisez la balise HTML label au lieu de aria-label ou arial-labeledby.
Utilisez la balise HTML 5 nav au lieu du rôle ARIA de 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.

Veuillez noter que le simple fait d’ajouter des attributs ARIA n’est pas suffisant pour rendre la plupart des widgets complexes accessibles. ARIA ne fait rien pour les utilisateurs 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 :

Ajout d’alertes pour informer les utilisateurs de lecteurs d’écran des changements de page dynamiques, tels que les tickers boursiers et les filtres de recherche.
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 dynamiquement (c’est-à-dire sans actualisation de la page), 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 popups et les boîtes de dialogue modales. Les utilisateurs utilisant uniquement le clavier peuvent être piégés dans les superpositions de page. 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 cadres de développement frontaux qui prennent spécifiquement en charge l’accessibilité.

Assurez-vous que les lecteurs vidéo ne sont pas en lecture automatique (son non consensuel) 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, assurez-vous que chaque photo comporte un texte alternatif et peut être parcourue via le clavier. Si vous utilisez des widgets uniques (tels qu’un sélecteur de calendrier ou des glisser-déposer), assurez-vous de tester l’accessibilité.

Source en anglais