10 conseils pour rendre un site Web accessible

10 conseils pour rendre son site Web accessible

Que vous dirigiez un site de e-commerce ou un site vitrine, vous souhaitez attirer le plus grand nombre possible de visiteurs sur vos pages web. Cependant, cela peut être difficile si vous ne donnez pas la priorité à la conception de sites Web accessibles.

L’accessibilité des sites Web consiste à s’assurer que votre site est utilisable par tous, y compris par les personnes souffrant de handicaps ou de déficiences. Heureusement, il existe une variété de ressources, d’outils et de conseils que vous pouvez exploiter pour faciliter la création d’un site Web inclusif.

Voici 10 conseils pour rendre votre site Web accessible.

1. Choisissez un système de gestion de contenu (CMS) pour votre site Web accessible

Rendre son site Web accessible avec un système de gestion

Il existe de nombreux systèmes de gestion de contenu (CMS) pour vous aider à créer un site Web accessible. Les exemples les plus courants sont WordPress et Drupal, mais il existe de nombreuses autres options, principalement pour les ecommerce comme Magento ou Shopify.

Une fois que vous avez choisi un système de gestion de contenu adapté à vos besoins, veillez à choisir un thème ou un design accessible. Consultez la documentation du thème pour obtenir des notes sur l’accessibilité et des conseils pour créer du contenu et des mises en page accessibles pour ce thème. Veillez à suivre les mêmes directives lorsque vous sélectionnez des modules, des plugins ou des widgets.

Pour les éléments tels que les barres d’outils d’édition et les lecteurs vidéo, assurez-vous qu’ils permettent de créer du contenu accessible. Par exemple, les barres d’outils d’édition doivent inclure des options pour les titres et les tableaux, et les lecteurs vidéo doivent inclure le sous-titrage. Les options d’administration du CMS (comme 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 correctement et stratégiquement les titres (H1, H2, etc.), le contenu de votre site web sera bien organisé et cela rendra votre site Web accessible.

Veillez à respecter l’ordre correct des en-têtes et à séparer la présentation de la structure en utilisant les CSS (feuilles de style en cascade). 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) ; créez plutôt une nouvelle classe CSS pour styliser votre texte.

Exemples d’utilisation correcte des en-têtes :

  • Utilisez un H1 pour le titre principal de la page. Évitez d’utiliser un H1 pour tout autre chose que le titre des pages individuelles

  • Utilisez les titres pour indiquer et organiser la structure de votre contenu

  • Ne sautez pas de niveaux d’en-tête (par exemple, passez d’un H1 à un H3), car les utilisateurs de lecteurs d’écran se demanderont s’il manque du contenu.

3. Incluez un texte Alt approprié pour les images

Un texte Alt doit être fourni pour les images, afin que les utilisateurs de lecteurs d’écran puissent comprendre le message véhiculé par l’utilisation des images sur la page. Cela est particulièrement important pour les images informatives (telles que les infographies). Lors de la création du texte alternatif, celui-ci doit contenir le message que vous souhaitez transmettre par le biais de l’image. Si l’image contient du texte, celui-ci doit également être inclus dans le texte alternatif pour rendre votre site Web accessible à tous.

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

4. Donnez à vos liens des noms uniques et descriptifs

Pour un site web accessible insérer des liens dans votre contenu en utilisant un texte qui décrit correctement l’emplacement 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.

De la même manière que les utilisateurs voyants parcourent la page à la recherche d’un texte lié, les utilisateurs malvoyants peuvent utiliser leur lecteur d’écran pour rechercher les 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 à l’utilisateur du lecteur d’écran.

Le contenu 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 la première lettre.

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

Essayez de ne pas dire : « Cliquez ici pour en savoir plus sur notre entreprise ». Dites plutôt : « 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 des couleurs, la déficience des couleurs rouge-vert, touche environ 8 % de la population. L’utilisation de couleurs UNIQUES comme celles-ci (notamment pour indiquer les champs obligatoires d’un formulaire) empêchera ces personnes de comprendre votre message.

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

Pour satisfaire ces deux groupes et rendre votre site Web accessible, utilisez la couleur, mais veillez également à utiliser d’autres indicateurs visuels, tels qu’un astérisque ou un point d’interrogation. Veillez également à distinguer les blocs de contenu les uns des autres à l’aide d’une séparation visuelle (espaces blancs ou bordures, par exemple).

Il existe plusieurs outils que vous pouvez utiliser pour évaluer le contraste des couleurs comme Color Contrast Checker, ce qui vous aidera à rendre votre page aussi facile à utiliser que possible pour les personnes atteintes de basse vision ou de différents niveaux de daltonisme.

Pour plus de détails, consultez notre article pour avoir une meilleure police pour site Web accessible.

6. Concevez vos formulaires pour un site Web accessible

Formulaire pour site Web accessible

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 repères que l’utilisateur voyant. Il peut être impossible de savoir quel type de contenu doit être saisi dans un champ de formulaire.

Pour un site Web accessible à tous, chaque champ de votre formulaire doit avoir une étiquette descriptive bien placée. Par exemple, si le champ concerne le nom d’une personne, il doit être étiqueté de manière appropriée comme « Nom complet » ou comporter deux champs distincts étiquetés « Prénom » et « Nom de famille ». Utilisez la balise ou une propriété ARIA (voir le conseil n° 9) pour associer le texte de l’étiquette au champ du formulaire.

Lorsqu’une personne parcourt un champ de formulaire, elle doit être en mesure de tabuler et de remplir tous les champs avant d’arriver au bouton « Envoyer », sinon elle risque de ne pas se rendre compte de l’existence de champs supplémentaires. En fait, l’ordre de tabulation doit suivre l’ordre visuel.

Si certains champs du formulaire sont obligatoires, ils doivent être étiquetés en conséquence et configurés pour alerter l’utilisateur de lecteur d’écran. En général, les champs obligatoires sont signalés par un astérisque, qui ne sera pas prononcé par certains lecteurs d’écran. Les astérisques (ou des indications visuelles similaires) doivent néanmoins être utilisés pour les utilisateurs voyants, les personnes ayant des difficultés d’apprentissage ou les personnes dont le français est la deuxième langue.

Pour indiquer à un lecteur d’écran qu’un champ est obligatoire, on peut ajouter ARIA required= »true » et ARIA required= »false » pour les champs facultatifs. Après avoir soumis le formulaire, l’utilisateur devra être averti de la confirmation de la soumission et de toute erreur de soumission. Nous recommandons d’inclure le nombre d’erreurs éventuelles dans le titre de la page (après la soumission par l’utilisateur), afin que l’utilisateur soit immédiatement informé de la présence d’erreurs sur la page. Si un utilisateur soumet un formulaire comportant des erreurs, il doit être amené à une page de soumission qui indique quelles sont les erreurs et fournit un moyen facile de naviguer vers ces erreurs.

Enfin, l’utilisation de CAPTCHA est inaccessible et ne devrait pas être utilisée pour valider les soumissions. WebAIM propose un résumé utile des alternatives pour un site Web accessible (lien externe) au CAPTCHA pour éviter que les formulaires ne soient soumis à des spams.

7. Utilisez les tableaux pour les données tabulaires et non pour la mise en page

L’utilisation de tableaux pour la mise en page ajoute une verbosité supplémentaire pour les utilisateurs de lecteurs d’écran. Chaque fois qu’un lecteur d’écran rencontre un tableau, l’utilisateur est informé de la présence d’un tableau comportant un nombre « x » de colonnes et de lignes, ce qui détourne l’attention du contenu. En outre, 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 le 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 qui s’interprètent mieux dans un format de tableau, comme un relevé bancaire), utilisez des en-têtes pour les lignes et les colonnes, ce qui permet d’expliquer les relations entre les cellules. Les tableaux complexes peuvent comporter plusieurs cellules ayant une relation unique entre elles, et celles-ci doivent être identifiées à l’aide de l’attribut « scope » en HTML. Les légendes des tableaux (HTML5) peuvent être utilisées pour fournir des informations supplémentaires aux utilisateurs sur la meilleure façon de lire et de comprendre les relations entre les tableaux et donc rendre votre site Web accessible.

8. Veillez à ce que tout le contenu soit accessible avec le clavier de manière logique

Les utilisateurs souffrant d’un handicap moteur, y compris les lésions dues à des mouvements répétitifs, peuvent ne pas être en mesure d’utiliser une souris ou un trackpad. Ces personnes peuvent accéder au contenu à l’aide d’un clavier en appuyant sur les touches « tabulation » ou « flèche », ou à l’aide de dispositifs de saisie alternatifs tels que la saisie à bouton unique ou le stick buccal. Par conséquent, l’ordre des tabulations doit correspondre à l’ordre visuel, afin que les utilisateurs du clavier puissent naviguer logiquement dans le contenu du site.

Les longues pages contenant beaucoup de contenu doivent être séparées par des liens d’ancrage, ce qui permet aux utilisateurs de clavier de passer directement aux parties pertinentes de la page sans avoir à naviguer dans le reste du contenu. L’option « Skip to main content » (passer au contenu principal) doit figurer en haut de chaque page, de sorte que les utilisateurs ne possédant qu’un clavier ne soient pas obligés de passer par la navigation de la page pour atteindre le contenu principal.

Pour les pages comportant des menus locaux et plusieurs niveaux et sous-éléments, les menus doivent être configurés de manière à ce que tous les éléments du menu soient accessibles depuis le clavier. N’utilisez pas d’éléments qui ne s’activent que lorsque l’utilisateur les survole avec la souris, car les utilisateurs qui n’utilisent que le clavier ou les lecteurs d’écran ne pourront pas les activer.

9. Utilisez les rôles et les points de repère ARIA (mais seulement lorsque cela est nécessaire)

ARIA (Accessible Rich Internet Applications) est une spécification technique complexe et puissante permettant d’ajouter des informations sur l’accessibilité à des éléments qui ne sont pas nativement accessibles. Vous devez toujours utiliser les éléments HTML natifs lorsqu’ils sont disponibles.

De nombreuses fonctions qui nécessitaient des attributs ARIA sont désormais implémentées en HTML5.

Par exemple :

  • Utilisez la balise native HTML <button> au lieu du rôle ARIA de button.
  • 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 à partir de CSS.

Veuillez noter que le simple ajout d’attributs ARIA ne suffit pas à rendre accessibles la plupart des widgets complexes. ARIA ne fait rien pour les utilisateurs de clavier uniquement (voir le conseil n° 8) ; il ne concerne que les personnes utilisant des technologies d’assistance. Vous devez toujours configurer vos interactions à l’aide de Javascript pour rendre votre site Web accessible à tous.

Voici quelques exemples d’utilisation appropriée d’ARIA :

  • L’ajout d’alertes pour avertir les utilisateurs de lecteurs d’écran des modifications dynamiques de la page, comme les tickers boursiers et les filtres de recherche.

  • Rendre les widgets interactifs complexes, tels que les sélecteurs de date, accessibles aux utilisateurs de lecteurs d’écran.

10. Rendez le contenu dynamique pour votre site Web accessible

Contenu dynamique site web accessible

Lorsque le contenu est mis à jour de manière dynamique (c’est-à-dire sans rafraîchissement de la page), les lecteurs d’écran peuvent ne pas en être conscients. Cela inclut les superpositions d’écran, les mises à jour dans la page et les fenêtres contextuelles. Les utilisateurs dont le clavier est seul peuvent être piégés dans des superpositions de pages. Les utilisateurs de logiciels d’agrandissement peuvent faire un zoom sur la mauvaise section de la page.

Ces fonctions peuvent facilement être rendues accessibles. Les options comprennent les rôles et les alertes ARIA, ainsi que le cadre de développement frontal qui rendent votre site Web accessible

Veillez à ce que les lecteurs vidéo ne soient pas en lecture automatique (son non consensuel), et à ce que les lecteurs puissent être utilisés avec un clavier. En outre, toutes les vidéos doivent comporter des options de sous-titrage et de transcription pour les malentendants.

Si votre site contient un diaporama, assurez-vous que chaque photo dispose d’un texte alt et qu’il est possible de naviguer à l’aide du clavier. Si vous utilisez des widgets uniques (tels qu’un sélecteur de calendrier ou un système de drag & drop), veillez à tester leur accessibilité pour rendre votre site Web accessible.

Nos services de création de sites Internet respectent les bonnes pratiques pour rendre votre site Web accessible, n’hésitez pas à nous contacter.

Partager :

LinkedIn
Facebook
Twitter
Email
Dernières actualités

Newsletter mensuelle

Pas de spam, uniquement des astuces Webmarketing !

Social Media

Les plus lus

Catégories

[Hello Code]

Articles récents

11 astuces pour optimiser son contenu réseaux sociaux
11 conseils pour optimiser votre contenu réseaux sociaux
Comment créer un contenu réseaux sociaux de qualité qui serve les utilisateurs et soit bien classé dans...
Lire plus
3 façon d'optimiser son budget campagne digitale
3 astuces pour optimiser votre budget campagne digitale
Avec la technologie et les données disponibles aujourd’hui, nous pouvons faire bien plus qu’identifier...
Lire plus
Header Campagne de marketing digital
Mettre en place une campagne de marketing digital disruptive
En tant que clients, nous sommes tous accablés de messages marketing partout où nous allons. Et si le...
Lire plus
1 2 9