Nos 6 conseils pour améliorer l'accessibilité web de votre site

98 % des sites internet les plus fréquentés au monde n’offrent pas une accessibilité complète à leurs usagers (source WebAIM, 2020). Pourtant, l’accessibilité numérique est une obligation légale dans de nombreux pays. En France, c’est la loi handicap, du 11 février 2005, qui fait foi. Elle prévoit que toute information numérique, émanant d’un service public, soit accessible aux personnes souffrant de déficiences. Mais alors, pourquoi est-il si difficile d’avoir un site internet 100 % accessible ? Très probablement parce qu’un site web est en perpétuel mouvement. Mises à jour, suppression de contenu obsolète, ajout de contenu frais… Les modifications sont permanentes. Pour vous permettre de maintenir votre site le plus accessible possible dans la durée, rien de tel que d’avoir en tête les bonnes pratiques de l’accessibilité web. Chez Ferpection, on vous dresse la check-list. À vos stylos !

L’accessibilité web : une nécessité sociétale

C’est quoi l’accessibilité web ?

L’accessibilité web désigne les difficultés, pour les personnes souffrant de déficiences, à atteindre, consulter, comprendre et interagir avec les contenus présents sur internet. Cette expression s’ancre dans le concept plus générique d’accessibilité numérique qui fait référence aux problèmes d’accès de l’ensemble des services digitaux (sites web, applications et sites mobile, bornes interactives, objets connectés, etc.).

Pourquoi rendre un site web accessible ?

L’accessibilité au web est un bon investissement économique

Quelle que soit la thématique de votre site internet, son objectif est de répondre aux besoins des internautes. Autant permettre au plus grand nombre d’y accéder ! En augmentant le nombre de visites sur votre site web, vous gagnez en visibilité et en chiffre d’affaires. Rendre votre site internet accessible améliore la qualité du service que vous offrez aux visiteurs. Voyez-y une opportunité, pas une contrainte 😉

Le World Wide Web (WWW) inclusif est une démarche éthique

Lors de sa création en 1989, Internet a été pensé comme un espace d’échanges et de partages. En 1994, son inventeur, Tim Berners-Lee, fonde le World Wild Web Consortium (W3C). Cet organisme définit les standards techniques du web au niveau mondial et favorise son accès au plus grand nombre.

Voici sa définition de l’accessibilité d’un site web : « Mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. »

♻️ Chez Ferpection, nous partageons ces valeurs. Nous les portons à travers notre mission d’UX for Good, dont les objectifs sont la sobriété, l’accessibilité et l’inclusivité du numérique.

Découvrez notre webinaire sur l’UX for Good :

À qui s’adresse l’accessibilité sur le web ?

Les personnes en situation de handicap sont les premières concernées par l’accessibilité du web

Si on reprend les propos de Tim Berners-Lee : « La puissance du Web réside dans son universalité. L’accès pour tous indépendamment du handicap est un aspect essentiel. »

Les personnes souffrant de déficiences visuelles, auditives, motrices ou cognitives doivent donc pouvoir accéder aux informations contenues sur la toile. Mais ce ne sont pas les seules.

Les internautes sans handicap peuvent aussi être touchés par les problématiques d’accès à internet

Il existe de nombreuses situations où les internautes peuvent rencontrer des freins à une navigation sereine sur le web. C’est notamment le cas des personnes :

• utilisant un téléphone mobile ou un objet connecté ;
• utilisant une connexion internet lente, limitée ou onéreuse ;
• rencontrant une « limitation situationnelle » (environnement sans audio ou baigné de soleil, par exemple) ;
• ayant un « handicap temporaire » (lunettes perdues, bras cassé etc.) ;
• prenant de l’âge et dont les capacités s’amenuisent.

Ces personnes ne sont pas considérées comme handicapées mais sont pourtant « empêchées » d’accéder aisément aux contenus web. Enfin, chaque citoyen est concerné par les enjeux de l’accessibilité digitale. Une mauvaise gestion des contrastes de couleur, par exemple, provoque une fatigue visuelle qui peut aboutir à des maux de tête. Nul besoin d’être handicapé ou fragile pour être victime d’un site web non accessible. C’est une problématique universelle.

Accessibilité d’un site internet : nos 6 conseils

Plusieurs bonnes pratiques sont à respecter pour rendre votre site web accessible. Certaines sont empruntées à l’UX Writing, d’autres à l’UX Design, et d’autres, enfin, au design d’interface (UI Design).

🧠 Pensez à enregistrer cet article dans vos favoris ! Vous pourrez vous y référer à chaque intervention sur votre site internet 😉

1 - Simplifiez les contenus de votre site internet

L’objectif de l’accessibilité web est de rendre les informations accessibles. Aussi, simplifiez au maximum les messages pour les rendre compréhensibles :

• Améliorez la lisibilité des textes en utilisant des phrases courtes et un style direct.
• Hiérarchisez les informations grâce aux titres, sous-titres et listes à puces. Vous améliorerez la navigation et l’orientation des utilisateurs.
• Donnez des noms explicites aux liens en remplissant précisément l’attribut Alt (ou balise Alt). Vous rendrez les données accessibles aux utilisateurs de lecteurs d'écran (aveugles, malvoyants, dyslexiques, dyspraxiques…)
• Supprimez tous les éléments superflus tels que les boutons « voir plus » qui ne contiennent pas d'informations importantes. Ils obligent les usagers à lire toute la page inutilement.

2 - Accentuez le contraste des couleurs de l’interface web

Cet effet graphique est une aide précieuse pour rendre vos textes visibles et lisibles. Notamment pour les utilisateurs souffrant de déficiences visuelles. Aussi :

• Ajustez le contraste entre la couleur du texte et de l'arrière-plan. Pour cela, optez pour une typographie de couleur foncée sur un fond clair. Le rapport de contraste préconisé se situe entre 3:1 et 4,5:1. Un vérificateur de contraste (tels que Snook.ca ou WebAim.org) pourra vous être utile.
• Ajoutez des icônes ou des étiquettes de texte lorsque cela est nécessaire.
• Différenciez visuellement les boutons et les champs de formulaire pour faire ressortir les éléments interactifs.

☘️ Chez Ferpection, nous avons réalisé une étude quantitative pour une compagnie aérienne. L’objectif était de tester 3 couleurs de logos. Sur les 500 répondants interrogés, 15 % étaient atteints de daltonisme. Notre étude a permis de révéler une nette préférence de l’échantillon (61 %) pour le logotype de couleur verte. Cette couleur était plus perceptible pour les personnes atteintes de daltonisme.

📮 Cet article vous intéresse ? Découvrez d’autres contenus à forte valeur ajoutée dans notre newsletter mensuelle. Pas de blabla, que des conseils pratiques !

3 - Concevez des formulaires explicites pour les utilisateurs

Que celui qui ne s’est jamais trompé en remplissant un formulaire lève le doigt ! Les erreurs de cases, de lignes et de champs sont, en effet, monnaie courante lorsqu’on remplit une fiche de renseignements. Pourquoi ? Car les informations à remplir sont nombreuses et la place dont on dispose est restreinte. Aussi, pensez à faciliter la tâche des usagers :

• Utilisez des libellés clairs pour chaque champ. Ne vous contentez pas de laisser un espace libre. Guidez votre utilisateur !
• Ajoutez des étiquettes explicites pour indiquer le type d'information à saisir.
• Permettez à l’usager de revenir en arrière dans le processus de remplissage du formulaire. Il pourra ainsi corriger les éventuelles erreurs avant de les envoyer.
• En cas de problème, rédigez des messages d'erreurs explicites. Ces notifications doivent aider l’utilisateur à résoudre lui-même son souci. Elles doivent être claires, simples et concises. Pour en savoir plus sur le sujet, découvrez notre guide UX design complet sur la gestion des erreurs de site internet.

🌱 Dans le cadre de notre engagement UX for Good, nous avons listé les recommandations pour créer des formulaires inclusifs dédiés aux personnes en situation d’illettrisme :

4 - Offrez une navigation interactive aux visiteurs

L’internaute doit pouvoir surfer facilement d’un endroit à un autre sans rencontrer de point de friction. Il en va de la fluidité de son expérience utilisateur (UX). Pour cela :

• Multipliez les options de navigation. Menus, plans du site, fonctions de recherche, boutons tabulaires… En proposant différents choix à votre visiteur, vous améliorez la convivialité de votre site web. Résultat : son expérience utilisateur (UX) ou consumer journey est plus agréable et la valeur perçue de votre site internet augmente.
• Facilitez l’accès au contenu caché (telles que les infobulles, par exemple). Elles doivent être lisibles facilement via la navigation au clavier.
• Ne verrouillez pas l'orientation de l'écran (portrait ou paysage). En laissant votre visiteur choisir, vous favorisez l'inclusion.
• Concevez un site internet responsive. 92,1 % des internautes surfent sur le web via leur smartphone. Vos mises en page doivent donc obligatoirement être réactives et s'adapter aux différentes tailles et résolutions d'écran.

🟢 Voici des recommandations pour optimiser l’accessibilité et la performance d’un bouton sur votre site internet :

📗 Vous souhaitez en savoir plus sur ce sujet ? Téléchargez notre livre blanc sur la qualité des applications mobiles.

5 - Adaptez les éléments du design du site web

La navigation sur votre site est maintenant optimisée ? Farpait. Il serait dommage que l’internaute ne puisse pas en bénéficier pleinement. Pour ce faire :

• Ajustez la taille des zones tactiles. Pensez à agrandir les boutons et les espacements entre les écrans tactiles. Cela permettra aux personnes souffrant de troubles de la motricité d’y accéder.
• Limitez les animations visuelles gênantes. Réduisez leur durée et offrez des options de contrôle à l'utilisateur.
• Simplifiez au maximum les gestes à effectuer et proposez des méthodes alternatives à l’usager (commandes vocales, clavier, embouts buccaux…).

🔈 Facilitez l’accès aux contenus web des personnes disposant de lecteurs d’écran en appliquant ces quelques conseils :

6 - Optimisez les produits à télécharger par les usagers

Pour offrir aux internautes la meilleure expérience possible, vous devez appliquer les bonnes pratiques de l’accessibilité web aux freebies en libre téléchargement sur votre site internet. Check-list, livre blanc, webinaire… Chaque fichier multimédia que vous offrez au visiteur doit être optimisé, qu’il s’agisse de format PDF, audio ou vidéo. Pour cela :

• Donnez des titres de page uniques et descriptifs à vos contenus. Remplissez le texte alternatif (attribut Alt) pour les images et créez des sous-titres pour les documents multimédia (audio, vidéo…). Ils seront ainsi accessibles aux personnes souffrant de déficiences visuelles ou auditives.
• Rendez accessibles les éléments interactifs. Utilisez des effets permettant aux usagers dotés de technologies d'assistance de les comprendre. Les options « états de focalisation » (focus states) ou effet de survol (hover effect) sont de bons exemples.
• Insérez des liens permettant aux utilisateurs de clavier et de lecteur d'écran (ou revue d’écran) de sauter les contenus répétitifs.
• Ajoutez une audiodescription à vos vidéos. Cette voix off permet à un public non voyant ou malvoyant de savoir ce qu’il se passe à l’écran durant les moments de silence.

✅ Vous souhaitez faire évaluer le degré d’accessibilité de votre site internet par un expert ? Nos consultants en UX research se tiennent à votre disposition.

Au-delà de l’opportunité économique, l’accessibilité web est une démarche déontologique. En améliorant prioritairement les conditions d’une minorité de gens, vous augmentez le confort de toute une population. C’est un cercle vertueux. Créer un design attrayant pour votre site internet, c’est bien. Créer un design attrayant et accessible, c’est mieux. Enfin, il est beaucoup plus facile d’intégrer l’accessibilité d’un site web au cahier des charges en début de projet qu’en cours de route. Cela évite de nombreux frais et une refonte de site.

🔥 Vous êtes convaincus par l’intérêt de l’accessibilité sur le web ? Vous avez bien raison. Maintenant, découvrez pourquoi Ferpection est le partenaire de référence pour vous accompagner dans cette voie éthique.

Sources :

- CANIVET, Isabelle. Bien rédiger pour le web - Stratégie de contenu pour améliorer son référencement naturel. Éditions EYROLLES. Collection Design web. 2021. 670 pages.

- Blog du modérateur. 30 chiffres sur l’usage d’Internet, des réseaux sociaux et du mobile en 2022. blogdumoderateur.com. Disponible sur : <blogdumoderateur.com/30-chiffres-internet-reseaux-sociaux-mobile-2022/> (20/07/2023)