Qu'est-ce que l'accessibilité numérique ?

L'accessibilité numérique, un droit humain

Loin d'être un mythe, l'accessibilité est précisée entre autres dans l'article premier de la "Convention relative aux droits des personnes handicapées" (2006).

"Par personnes handicapées on entend des personnes qui présentent des incapacités physiques, mentales, intellectuelles ou sensorielles durables dont l’interaction avec diverses barrières peut faire obstacle à leur pleine et effective participation à la société sur la base de l’égalité avec les autres."

Pourquoi concevoir des interfaces accessibles ?

En France, plus de 20% de la population est touchée par un handicap permanent. Il est du devoir des webdesigners, développeurs et plus largement des concepteurs de s'assurer que le plus de personnes soit en mesure d'accéder aux services, quel que soit le contexte d'utilisation, afin de proposer la meilleure expérience utilisateur possible.

Un autre point non négligeable, concevoir des interfaces accessibles permet d'augmenter le ROI des sites internet qui atteignent une large audience.

Quelques règles pour améliorer l'accessibilité

La typographie

Comme évoqué lors d'un précédent billet ("Les fondamentaux de l'Ergonomie Web"), le choix de la typographie est à bien considérer lors de la conception d'interface. On préférera ainsi utiliser une typographie sans empattements.
Pourquoi ? Un écran est composé de pixels, ces éléments sont carrés et rendent plus difficile la lecture des pattes. La taille de la police d'écriture devra également être prise en compte, généralement comprise entre 14px et 16px, en fonction de la font.

Recommandation : ne pas bloquer le zoom sur mobile, si les utilisateurs ont des difficultés pour lire le contenu, ils apprécieront pouvoir le grossir manuellement.

Le respect du balisage

À l'image d'un livre ou d'un article, le contenu doit être hiérarchisé, notamment grâce aux balises Hn (H1, H2 etc.). Cela permet aux utilisateurs de rapidement visualiser le titre principal de la page, les sous-parties et ces éléments aident à clairement comprendre l'ordre du contenu.
De plus, les lecteurs d'écran s'appuient sur les balises sémantiques pour lire le contenu, un point non négligeable pour les personnes malvoyantes.

Le contraste

Le contraste des couleurs est un point lié à l'accessibilité souvent négligé lors de la conception d'interface. Cependant, les personnes malvoyantes auront ainsi plus de difficulté à lire un texte dont la couleur est peu contrastée ou rentre en concurrence avec l'arrière-plan.
Heureusement, des outils gratuits permettent de vérifier le respect des normes d'accessibilité en terme de contraste :

• Color Contrast Analyzer↗
• Color Contrast Checker↗
• sur Mac, l'application "Contrast↗"

En complément du contraste, il est également important de prendre en compte que la couleur seule ne doit pas être un repère visuel. Elle doit être obligatoirement accompagnée d'une icône, d'un pattern ou encore d'un message pour faciliter la compréhension pour les utilisateurs daltoniens ou ayant une faible acuité visuelle.

Astuce : ne pas hésiter à visualiser les interfaces en noir et blanc pour vérifier le niveau de contraste.

Libellés des champs

L'intégration des libellés au sein même des champs des formulaires est une tendance graphique qui peut permettre de faire gagner de la place ou encore d'harmoniser l'interface. Malheureusement, ce choix est souvent peu optimisé et il n'est pas rare de voir le libellé dans le champ, écrit en gris clair, donc peu contrasté et difficile à lire.
Il est important de présenter des informations essentielles aux utilisateurs, les libellés des champs ne doivent pas faire exception à la règle. Ce texte doit toujours rester visible dans le cas où l'internaute aurait besoin de vérifier les informations renseignées et pour limiter le risque d'erreur.

Les personnes qui utilisent un lecteur d'écran parcourent les interfaces grâce à la touche de tabulation, notamment les formulaires. Les libellés sont pris en compte à chaque passage et s'ils sont masqués, ils ne pourront pas être lus.

Texte alternatif pour les images et le contenu non textuel

Les personnes malvoyantes utilisent des lecteurs d'écran pour naviguer au sein des interfaces et les "entendre". Cependant, pour optimiser l'accessibilité du contenu, le contenu alternatif doit être pensé pour faciliter cette lecture. Il peut être présenté de deux manières :

• dans l'attribut des visuels, à l'image de l'intégration des emailings
• dans le contexte ou l'environnement de l'image elle-même

Si rien n'est indiqué, le lecteur d'écran dira simplement "image" en passant dessus. Il faut expliquer à l'utilisateur ce qui se passe dans l'image, par exemple s'il s'agit d'une photo d'une paire de chaussures, le contenu pourrait être "baskets running de la marque XXX de couleur rouge et noir avec une bande réfléchissante au niveau du talon".

Google travaille sur une intelligence artificielle de sous-titrage d’image capable de décrire des photos avec une précision de 94%. Ce dispositif open source est toujours en développement, mais il offre des perspectives plus qu'intéressantes d'un point de vue de l'accessibilité numérique. Pour en savoir plus sur l'API Cloud Vision↗.

Aide au focus

Peu esthétiques, des contours bleus peuvent apparaître autour des liens, des boutons ou encore des champs de formulaire. Cette aide au focus est pourtant très pratique pour permettre aux utilisateurs de rapidement visualiser où ils se trouvent au sein d'une page ou encore d'un formulaire.
De plus, ces indicateurs sont appréciés des personnes aveugles qui utilisent des lecteurs d'écran, des personnes à mobilité réduite, des personnes qui ont subi des lésions ou encore des utilisateurs avertis.

Proposer une navigation au clavier

Souvent oubliée, l'accessibilité au clavier est pourtant un point à ne pas négliger lors de la conception d'un site internet. Les utilisateurs expérimentés utilisent par exemple la touche tabulation pour naviguer entre les champs d'un formulaire, ce qui offre un gain de temps appréciable. Les personnes en déficience motrice et les personnes malvoyantes ou aveugles s'appuient sur des lecteurs écran et ont besoin de pouvoir accéder au contenu grâce au clavier.

Enfin, la structure des pages doit respecter les conventions et standards afin de faciliter le parcours des utilisateurs grâce à une navigation logique et intuitive. Celle-ci doit être optimisée avec une longueur de libellé acceptable pour favoriser l'écoute.

Astuce : tester les interfaces grâce à la touche tabulation pour naviguer entre les liens et les champs des formulaires pour vérifier que les éléments interactifs sont fonctionnels et correctement interprétés.

Conclusion sur l'accessibilité numérique

Vous l'aurez compris, l'accessibilité numérique n'est pas compliquée à intégrer dans le process de réflexion et n'entraîne pas de coûts supplémentaires.
Dans une société qui évolue autour du numérique et qui se veut accessible, il est important de penser et concevoir des interfaces qui respectent ces grands principes d'accessibilité. La principale raison est d'offrir la meilleure expérience pour le plus grand nombre d'utilisateurs possibles, en situtation d'handicap ou non.

Le numérique est une chance pour favoriser la communication, l'échange et la participation entre les personnes. En tant que Webdesigners, UX/ UI Designers, il est de notre responsabilité de défendre l'accessibilité pour rendre la technologie utilisable par tous.