10 astuces indispensables pour être accessible sur le web

Comprendre l’accessibilité web

L’accessibilité web est un concept crucial dans la conception, le développement de sites web et de support de communication. Elle vise à rendre disponibles les contenus, les fonctionnalités et les interfaces en ligne accessibles à tous les utilisateurs, indépendamment de leurs capacités physiques, cognitives ou de leur environnement.

Elle consiste simplement à ajouter quelques normes de conception et d’intégrer dans chaque phase de création certains critères.

Pour qui concrètement ?

Contrairement à une idée reçue, l’accessibilité n’est pas faite pour les handicapés. Ce terme, en plus d’être considéré comme trop péjoratif par les concernés, ne prend pas en compte les troubles légers ou encore l’environnement de l’utilisateur. Or, être accessible pour le web, c’est prendre en compte les besoins supplémentaires en cas de troubles, des dyslexiques aux malvoyants, des hypermétropes aux difficultés motrices. Sans oublier, l’environnement dans lequel se situe ton utilisateur. Va-t-il être en plein soleil ? Va-t-il avoir ses volets fermés toute la journée ?

Et l’accessibilité apporte aussi du confort, tout simplement, toute personne qu’elle quelle soit, qu’elle ait des troubles ou non qu’elle soit dans un environnement adapté ou non, aura un meilleur confort de lecture, par exemple. Au final, prendre en compte l’accessibilité bénéficie à tous.

L’importance de l’accessibilité

Pourquoi l’accessibilité est très importante ? Tout simplement parce qu’elle permet de garantir une expérience équitable pour tous les utilisateurs. En rendant un site web accessible, tu ouvres les portes de l’information et des services en ligne à un public plus large.

Un site web accessible présente de nombreux avantages pour les personnes ayant des difficultés :

• Permet d’accéder à l’information de manière autonome
• Permet de communiquer plus facilement
• Permet de bénéficier de services en ligne
• Permet de participer activement à la société numérique.

Les fondements de l’accessibilité web

L’accessibilité sur le web ne repose pas que sur notre bonne volonté, mais bel et bien sur des normes préétablies.

Présentation des normes d’accessibilité WCAG

Pour garantir une accessibilité optimale de ton site web, il est essentiel de se référer à des normes d’accessibilité bien établies.

Les WCAG (Web Content Accessibility Guidelines) sont l’un des principaux référentiels utilisés à l’échelle mondiale pour évaluer et améliorer l’accessibilité des sites web. Ces normes ont été développées par le World Wide Web Consortium (W3C) et fournissent des lignes directrices détaillées sur la manière de rendre les contenus web accessibles.

Explication des principes clés de l’accessibilité web : percevabilité, utilisabilité, compréhensibilité et robustesse.

Les WCAG se basent sur quatre principes clés de l’accessibilité web : la percevabilité, l’utilisabilité, la compréhensibilité et la robustesse.

• La percevabilité se réfère à la capacité des utilisateurs à percevoir les informations présentées sur un site web, que ce soit à travers le texte, les images, les vidéos ou les sons.
• L’utilisabilité concerne la facilité d’utilisation et de navigation du site, permettant aux utilisateurs de trouver rapidement et efficacement le contenu recherché.
• La compréhensibilité vise à rendre le contenu et les fonctionnalités du site clairs et compréhensibles pour tous les utilisateurs.
• La robustesse se rapporte à la capacité du site web à fonctionner de manière fiable et compatible avec une variété de technologies et d’appareils.

En comprenant les normes d’accessibilité et en intégrant les principes de percevabilité, d’utilisabilité, de compréhensibilité et de robustesse, tu jettes les bases solides pour rendre ton site web accessible.

Il est important de considérer ces fondements lors de la conception et du développement de ton site afin de garantir que tous les utilisateurs puissent bénéficier pleinement de son contenu et de ses fonctionnalités, sans rencontrer de barrières liées à l’accessibilité.

Les 10 astuces pour être accessible sur le web

Un contraste adapté

Il faut veiller à ce que les combinaisons de couleurs utilisées sur ton site web offrent un bon contraste pour faciliter la lisibilité du contenu. Cela répond aux besoins des personnes ayant des troubles visuels, mais aussi à un confort visuel de tous, de plus en plus nécessaire.

L’erreur commune est de vérifier soi-même. Soit tu possèdes une vue spécifique et tu pourras répondre à tes propres problématiques, mais pas à celles des autres, soit tu possèdes une vue incroyable et tu ne verras pas le problème. Pour cela, on se repose sur une unité de mesure : le ratio. Il existe plusieurs sites pour le calculer, mais mon préféré reste whocanuse.com qui permet de simuler plusieurs types de vue et d’environnement.

Une lisibilité du texte

Pour qu’un texte soit lisible et non indéchiffrable, il doit suivre certaines règles.

Être à la bonne taille. Cette taille variant souvent entre 14px à 18px sur les sites web est définie par la typographie utilisée, certaines sont plus grandes que d’autres naturellement.

La nature de la typographie, est-ce une typographie manuscrite ? Serif ? Sans serif ? Il existe différents types de typographies, qui peuvent parfois compliquer la lecture. Dans ces cas-là, si tu tiens vraiment à utiliser une typographie fantaisiste, la solution est de l’utiliser avec parcimonie, juste pour ton logo ou seulement pour tes titres par exemple. À l’inverse, il existe des typographies créées exprès pour certains troubles comme pour la dyslexie avec Open Dyslexia.

Un texte aligné à gauche est plus facile à lire qu’un texte centré ou pire un texte justifié. Dès que la longueur de ton texte dépasse 2 à 3 lignes de lecture, il est fortement conseillé de ferrer/aligner ton texte à gauche. On souhaite souvent justifier un texte sur le web pour le rendre « beau ». La justification du texte est un héritage du format papier qui lui reste visible grâce aux césures, ces mots séparés par des tirés en fin de ligne. Mais, les césures n’étant pas utilisées, on a le droit à des espaces blancs irréguliers qui peuvent rapidement perturber le lecteur.

Un texte italique est plus compliqué à lire. Il est différent du style habituel et coupe cette régularité. Il est aussi plutôt associé à une autre action, que je décris dans les éléments identifiables.

Pouvoir se situer et naviguer facilement

L’objectif est que l’utilisateur ne se soit pas perdu et puisse retourner là où il était rapidement.

Mettre des titres et des sous-titres. En un clin d’œil, ton utilisateur pourra se situer dans ce qu’il voit et comprendre où il est emmené.

Intégrer un fil d’ariane en haut de page. Le fil d’ariane ou breadcrumbs en anglais, représente ce bout de texte « Accueil > Le web > 10 astuces indispensables pour être accessible sur le web ». Avec ça, l’utilisateur sait d’où il vient, il peut aussi cliquer facilement sur chaque tranche de son parcours.

Avoir une barre de recherche. Elle facilite l’accès à toutes les informations de ton site, si ton utilisateur a une idée précise de ce qu’il veut, c’est l’outil parfait !

Un contexte complet

Il faut aider à la compréhension que ce soit visuellement ou textuellement parlant.

Faire en sorte que des éléments d’un même groupe soient visuellement regroupés. C’est ce qu’on appelle la loi de proximité. Tes utilisateurs vont associer un ensemble d’éléments seulement s’ils sont assez proches, s’ils partagent les mêmes espacements notamment. De ce fait, il ne faut pas avoir peur de l’espace entre tes sections ! Cela aide à la compréhension et à la bonne digestion de l’information.

Tu ne peux pas te contenter d’une icône seule. Il faut encore un contexte. Par exemple, tu veux intégrer un bouton pour s’inscrire, directement sur ton menu. Pour cela, tu mets une icône représentant une personne . Le problème est là, pour un utilisateur lambda, va-t-il comprendre que c’est un espace d’inscription ? De connexion ? Il y a déjà trop d’ambiguïté. Pour régler ce problème, il suffit d’ajouter un petit texte à côté, qu’on appellera un label. «  Inscription » sera alors sans ambiguïté.

De même pour un texte, l’image aide à la compréhension. Tous vos utilisateurs ne vont pas forcément lire l’intégralité de vos textes. Il faut leur donner envie de comprendre, et pour ça illustrer vos propos est un moyen idéal.

Des éléments identifiables

Sois sûr que la fonction de chaque élément est facilement identifiable. Pour ça, il faut se baser sur l’affordance, qui désigne la capacité d’un élément à évoquer son utilisation, sa fonction. Le web existe depuis un sacré bout de temps, de là ont découlé des habitudes à prendre en compte.

Ceci est censé être un lien. Nous identifions les soulignements comme un lien, il est d’autant plus convaincant si on y ajoute une couleur différente du texte. Si d’aventure, tu veux absolument mettre ton titre souligné, attend toi à ce que tes utilisateurs veuillent cliquer dessus.

Nous identifions cet élément comme un bouton, de par sa forme, son espacement, son contour. On sait tous qu’il va réagir comme un lien.

Ceci est une référence. Sur le web et plus généralement tous les textes publiés, l’italique va être gardé pour citer une référence. De ce fait, il est déconseillé de par sa difficulté à être lu de l’utiliser ailleurs.

Balisages sémantiques

Il faut prêter attention à ce que ton site possède certains balisages aidant à l’accessibilité.

Avec des attributs alt sur tes images, les lecteurs d’écran, utilisé par les utilisateurs ayant des difficultés visuelles, peuvent les lire. Ainsi, vos images contiennent leur description et peuvent être « lues » par tous.

De même, les attributs aria label permettent d’avoir une description là où ce n’est pas prévu. L’exemple le plus courant est celui d’un bouton où la description peut alors comporter où atterrira l’utilisateur au clic.

Ne t’inquiète pas trop à propos des balises sémantiques, si tu décides de créer ton site avec un CMS (système de gestion de contenu) comme WordPress, alors les bonnes techniques sémantiques seront prises en compte. Ou bien, ces bonnes techniques seront très faciles d’utilisation et ne requerront aucunement de devenir un hacker à lunettes !

Format adaptatif ou responsive

Pour assurer l’accessibilité, il faut s’assurer de pouvoir être visible sous différentes tailles d’écran. Pour cela, il faut prévoir en amont une des deux techniques via la maquette de ton site.

Prévoir un design adaptatif, c’est-à-dire un design différent par type d’écran. Avec ce qu’on appelle des points de rupture, soit le moment à partir duquel on change le design.

Ou prévoir un design responsive, c’est-à-dire un design qui s’adapte automatiquement à la taille de l’écran. Avec des simples réductions du nombre de colonnes en fonction de la largeur.

Le feedback

L’interaction dans un site est omniprésente. Certaines actions nécessitent des conditions, comme un formulaire. Dans ce genre d’action, il n’est pas rare qu’un utilisateur oublie un champ obligatoire, clique trop tôt sur un bouton, bref, se trompe. Il faut alors prévoir de le prévenir, citer les champs incorrects ou incomplets. Mais, aussi prévoir le scénario s’il complète bien le formulaire. Il n’y a rien de plus frustrant que de ne pas savoir si le message a bien été envoyé.

Un langage simple et concis

Exprime-toi simplement. Peut-être es-tu expert sur ton sujet et que tu veux montrer tes super compétences avec ton super langage ? Dans ce cas-là, explique rapidement ton vocabulaire dès que tu l’utilises. Mais, si possible, utilise le vocabulaire le plus simple possible. Le but est d’être compris, pas d’être vu comme le champion du monde du dictionnaire.

Tester l’accessibilité avec des outils gratuits

Une dernière astuce, mais pas des moindres. Teste ton accessibilité. Il existe de nombreux sites qui peuvent t’aiguiller sur les ajustements à apporter à ton site web.

Wave, analyse ton site page par page avec les recommandations d’un côté et de l’autre un aperçu de ton site. Idéal pour se rendre compte visuellement et directement des différents problèmes.

AudioEye, donne un score à ton site, décrit exactement les erreurs et leur nature. Bien que limité en version gratuite, il permet néanmoins d’avoir un aperçu du nombre de problèmes rencontrables.

aChecker, pour vérifier son code et les bonnes et mauvaises pratiques. Avantageux pour ceux qui peuvent facilement gérer ce code, mais rapidement incompréhensible pour les non-initiés.

En conclusion, l’accessibilité web est un aspect fondamental dans la création d’un site web. En suivant les normes d’accessibilité et en tenant compte des besoins spécifiques des utilisateurs, on peut rendre un site web accessible à tous, indépendamment de leurs capacités physiques, cognitives ou de leur environnement.

En respectant les principes clés de l’accessibilité, tels que la percevabilité, l’utilisabilité, la compréhensibilité et la robustesse, on peut garantir une expérience en ligne équitable et inclusive pour tous les utilisateurs.

En rendant ton site web accessible, tu démontres ton engagement envers l’égalité des chances et l’inclusion, tout en élargissant ta base d’utilisateurs potentiels. Alors, n’hésite pas à prendre en compte l’accessibilité lors de la conception et du développement de ton site web afin d’offrir une expérience en ligne aisée et agréable à tous.

Une question, un besoin ?
Discutons-en autour d'un thé virtuel !