Accessibilité : les bonnes pratiques pour améliorer votre site web

L’accessibilité, c’est aussi aider les personnes qui n’ont pas ou ne peuvent pas avoir accès à un bon équipement technologique. Cela ne touche pas exclusivement les personnes souffrant d’un handicap mais aussi les personnes âgées qui sont peu habituées aux nouvelles technologies qu’a apporté internet.

Les attentions doivent se porter aussi bien dans l’utilisabilité, que le design et le code de chaque page web. De plus, la propreté et la structure du code aideront non seulement les personnes qui en ont besoin à visiter votre site, mais également les moteurs de recherche à comprendre le contenu de vos pages.

Afin de bien concevoir votre site web dans tous les aspects de l’accessibilité, nous vous présentons une liste d’éléments importants à considérer. Vous trouverez une liste complète des points à respecter sur le site reconnu de W3C : https://www.w3.org/WAI/roles/

Structure générale et accessibilité

Structure HTML

Utilisez une hiérarchie de titres logique avec les balises <h1> à <h6>.
Renseignez un <title> précis sur chaque page
Renseignez la langue principale de la page avec l’attribut lang sur la balise <html>

Navigation

Structurez les menus de navigation avec des listes si besoin. Adoptez une méthode “entonnoir”. Partez de l’information large vers la plus précise.
Le ou les modes de navigation ne doivent pas varier d’une page à l’autre. On doit pouvoir les repérer et les lire clairement.
Pour faciliter la navigation, placez un fil d’Ariane, un plan du site et si possible un moteur de recherche interne.
Dans le menu, on doit pouvoir voir dans quelle section on se trouve, avec une indication visuelle sur la section par exemple.

Éléments et accessibilité

Boutons et liens

Soyez explicite dans les libellés de boutons et de liens. Au lieu de “Cliquer ici”, préférez “Accédez aux informations de telle page”. Précisez toujours la destination des liens.
Différenciez visuellement les liens présents dans du texte.
Différenciez les boutons des liens, les premiers ont plus un rôle d’appel à l’action que les seconds.

Médias

Il existe l’attribut alternatif, ou attribut alt qui permet de donner un texte alternatif à un support visuel (image, vidéo), quand il ne peut être vu ou chargé sur la page. Il est essentiel à la compréhension de l’information.
Attention cependant : il est nécessaire de le rédiger seulement si l’image a une réelle valeur informative ou si elle est dotée d’une action comme un lien. Si elle n’a qu’une valeur décorative, le texte alternatif n’est pas important.
Soyez court, clair et concis dans la rédaction de ces textes.
L’utilisateur doit pouvoir arrêter les contenus animés (vidéos et sons). Ces derniers ne doivent pas se lancer seuls.

Tableaux

Donnez un intitulé clair à vos tableaux.
Nommez explicitement chaque entrée (colonnes et/ou lignes).

Formulaire

Évitez les CAPTCHA! C’est déjà inconfortable à l’utilisation classique, mieux vaut éviter tout obstacle inutile.
Expliquez les erreurs lorsqu’elles arrivent, ne vous contentez pas de colorer un champ en rouge. Profitez-en pour faire des suggestions de correction pour aider l’utilisateur.
Si la page doit se recharger pour afficher un message de confirmation ou d’erreur, il est conseillé de changer le <title> de la page, pour faciliter la compréhension des lecteurs d’écran.
Nommez explicitement chaque champ du formulaire. Dans une structure HTML, il faudra utiliser la balise <label>.
Prévoyez un message de confirmation pour valider l’envoi du formulaire.

Rédaction et accessibilité

Contenu

Le contenu doit être clair et bien structuré.
Regroupez les informations semblables ou complémentaires.
Utilisez les balises HTML pour structurer le texte. Si vous travaillez sur un CMS (Content Management System) comme WordPress par exemple, ce travail se fera automatiquement pour la plupart des blocs de contenu.
Ne laissez pas une abréviation sans la définir au moins une fois.
L’aspect visuel (forme, couleur) d’un élément de votre page ne doit pas être le seul moyen de référence pour le désigner. (Ex : cliquez sur le bouton vert).

Texte

Les règles de rédaction sur le web ne sont pas les mêmes qu’ailleurs. Les phrases courtes sont préférées.
Vos paragraphes ne doivent pas être justifiés en bloc.
Conservez les accents sur les lettres majuscules.
Les sauts de ligne à répétition ne sont pas conseillés.

Typographie

Les caractères doivent être assez gros. Vous pouvez installer une fonctionnalité de grossissement de police comme sur https://www.lappui.org/
Évitez également les typographies trop fantaisistes, rendant la lecture plus ardue. Préférez les polices classiques, sans sérif.
Veillez à la bonne définition de votre typographie pour la rendre lisible même lorsque l’on zoome à 200%.

Conception graphique et accessibilité

Couleur

Prenez soin de choisir vos couleurs. Certaines personnes atteintes de daltonisme peuvent ne pas les percevoir comme vous. Pour faire des simulations, vous pouvez ajouter l’extension Google Chrome Colorblind.
En l’absence de couleur, l’information transmise doit être compréhensible. Évitez par exemple les codes couleurs.
Le contenu doit être séparé du style pour pouvoir être lu à part, par un lecteur d’écran.
Gérez les contrastes pour garder une distinction claire entre les textes et l’arrière plan. Voici un petit outil en ligne pour vous aider à savoir si le contraste est suffisant.

Les normes d’accessibilité sont nombreuses

Il est difficile de pouvoir toutes les respecter mais celles énoncées ci-dessus facilitent déjà grandement l’accès aux sites web. Certaines ne relèvent que du code, d’autres sont étroitement liées à l’expérience utilisateur.

Chez Kryzalid, nous nous efforçons de rendre le web accessible à tous. Notre connaissance numérique nous permet d’offrir des produits aux normes d’accès vérifiées. Ensemble, nous pouvons également mettre en place des tests utilisateurs pour valider votre site web auprès de votre cible. N’hésitez pas à nous contacter!

Sources

https://www.w3.org/WAI/

https://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html