L’accessibilité web au sein d’un studio de design et de développement numérique — Partie n°1
☝️ Introduction
🔍 Qu’est ce que l’accessibilité numérique ?
L’accessibilité numérique signifie que les sites web, les outils et les technologies sont conçus et développés de façon à ce que les personnes avec une déficience, en incapacité ou en désavantage, puissent les utiliser.
L’accessibilité numérique comprend toutes les déficiences affectant l’accès au web, comme les handicaps auditif, cognitif, neurologique, physique, de la parole, et visuel.
L’accessibilité du web bénéficie également aux personnes avec un désavantage, comme par exemple : les personnes utilisant un téléphone mobile, une montre connectée, une Smart TV, et autres périphériques ayant des petits écrans, différents modes de saisie, etc ; les personnes âgées dont les capacités changent avec l’âge ; les personnes ayant un « handicap temporaire » tel qu’un bras cassé ou perdu leurs lunettes ; les personnes ayant « une limitation situationnelle » comme être en plein soleil ou dans un environnement où elles ne peuvent pas écouter l’audio ; les personnes utilisant une connexion internet lente ou ayant une bande passante limitée ou onéreuse.
Suivre dès maintenant les bonnes pratiques de l’accessibilité numérique permet de toucher un public plus large, contribuer à rendre la société plus inclusive, augmenter le trafic et le référencement, améliorer sa e-réputation et anticiper les changements de la société : l’inclusivité ne sera bientôt plus une option.
📚 Les grandes lignes directrices
Il existe une série de normes d’accessibilité connues sous le nom de Web Content Accessibility Guidelines (WCAG).
- Perceptible : Puis-je consommer le contenu de mon site de différentes manières ? (pour une vidéo, avoir la possibilité de la regarder avec le son ou sans le son avec des sous-titres, par exemple)
- Opérable : Le site peut-il fonctionner sans confusion et sans l’utilisation d’une souris ou d’interactions complexes ? Si non, les différentes interactions sont-elles clairement expliquées ? (la navigation par clavier, par exemple)
- Compréhensible : Un utilisateur peut-il comprendre le fonctionnement de l’interface utilisateur du site et les informations sur le site ? (certaines informations sont habituellement toujours au même endroit sur un site web, le logo qui amène à la page d’accueil se situe en haut à gauche des interfaces, ou le bouton connexion en haut à droite, par exemple)
- Robuste : Différents appareils d’assistance (lecteurs vocaux d’écran, par exemple) peuvent-ils comprendre le site ?
Chacun des différents principes abordés précédemment, a une cote de réussite de A, AA ou AAA. Une note A est l’exigence minimale pour avoir un site accessible et AAA est le Graal de l’accessibilité web.
Cependant, il est important de nuancer, il est souvent difficile d’obtenir la norme la plus élevée AAA, car elle représente souvent un paradoxe entre un site accessible et un site agréable à consulter.
Les sites du gouvernement illustrent souvent très bien l’accessibilité numérique :
✅ Le site 1000 Premiers Jours a mis en place un système de changement de taille de police permettant aux utilisateurs·rices de choisir quelle taille ils préfèrent lors de la lecture d’un article.
❌ Mais à contrario, la navigation au clavier n’est pas optimisée car elle est possible mais les différentes entrées de menu ne s’ouvrent pas sans un survol sur l’un d’eux.
🙌 Sur quoi pouvons-nous agir ?
🎨 Couleur
Certains outils peuvent permettre de savoir si votre design est accessible et à quel niveau l’est-il, notamment au niveau des choix de couleurs.
Le site Colorable permet de tester facilement, en amont d’une conception d’interface, des combinaisons et des associations de couleurs, pour connaitre les contraste qui fonctionnent le mieux et ceux à éviter.
L’extension Chrome High Contrast permet de voir à quoi pourrait ressembler n’importe quel site en version très contrasté. Le design n’est sûrement pas très esthétique pour beaucoup de site, mais ce qui est intéressant c’est de repérer les sites dont cette extension ne fait pas énormément de modifications visuels. Cela permet d’identifier ceux qui sont accessibles tels qu’ils sont actuellement, comme la plupart des interfaces de la suite Google.
Le plugin Figma A11y — Color Contrast Checker permet de savoir rapidement si les couleurs créées sont bien associées pour un contraste accessible ou si elles ont besoin d’ajustements. Grâce à des sliders, nous pouvons modifier directement la couleur via la fenêtre du plugin. Nous avons un repère de normes A, AA et AAA pour nous permettre de nous situer sur le niveau d’accessibilité que nous voulons adopter pour l’élaboration de notre design.
Quelques tips :
Ces différents outils sont utiles pour vérifier l’accessibilité de certains composants concernant les couleurs employées. Le but est de vérifier principalement le contraste :
- De tous les textes
- De toutes les icônes
- De toutes les bordures : saisie de texte, bouton radio, case à cocher
- Du texte qui chevauche les images ou la vidéo
🖌 Typographie
Toutes les typographies ne sont pas lisibles par tous·tes et dans toutes les circonstances, mais il existe des alternatives intéressantes à mettre en place.
La typographie Luciole est créée pour être la plus accessible, elle a été conçu spécifiquement pour les personnes malvoyantes.
La typographie OpenDyslexic est créée pour les personnes dyslexiques, les formes de caractères uniques, notamment pour les lettres avec une montante ou une descendante (d, p, b), rendent plus difficile la confusion des lettres. L’extension Chrome OpenDyslexic permet de remplacer à tout moment les typographies d’une page les remplacer par cette typographie justement.
La solution FACIL’iti peut servir de tests selon la cible et le·s handicap·s identifié·s, elle adapte l’affichage d’un site web en fonction des besoins précis, du confort visuel, moteur et/ou cognitif de l’utilisateur.
Plusieurs grosses entreprises utilisent cette solution, comme La Banque Populaire, Bouygues Telecom, Carrefour, EDF… Il est donc possible de tester l’emploi de l’accessibilité via ces sites là, pour transférer les conclusions visuelles sur son projet en cours (par exemple, pour un projet d’assurance, il est possible d’aller visualiser le comportement de Facil’iti pour des difficultés visuels sur le site Allianz, puisqu’elle utilise cette solution).
Quelques tips :
- Le texte ne doit pas avoir un alignement justifié
- L’interlignage du texte doit être d’au moins un espace et demi en fonction de la taille du texte
- Les espaces entre les paragraphes doivent être au moins 1,5 fois plus grands que la hauteur de ligne
- L’interlettrage doit être d’au moins 0,12 fois la taille de la police
- L’espacement des mots doit être d’au moins 0,16 fois la taille de la typographie
- Il est recommandé de garder le nombre de caractères d’une ligne de texte inférieur à 80 caractères
- Les tailles de police ne doivent pas être inférieures à 10 points
📝 Rédaction
La manière de rédiger toute information a son importance : un paragraphe, un titre, un bouton, etc, chacun de ces éléments doit être clairement formulé pour une compréhension sans détour et sans avoir besoin de relire plusieurs fois le message transmis.
Le site Datayze permet d’analyser la rédaction d’un paragraphe, avec notamment l’information sur le pourcentage de mots difficiles
Le site En Inclusif permet de connaître l’écriture exacte de certains mots en version inclusive
Quelques tips :
- Écrire le plus simplement possible
- Utiliser un langage inclusif
- Rendre tout le texte lisible et compréhensible (pour cela, il est possible de fournir un glossaire ou un moyen similaire d’identifier : les mots inhabituels, les expressions, le jargon, les abréviations, les prononciations spéciales)
- Utiliser une syntaxe appropriée
- Utiliser des titres de page spécifiques qui décrivent le sujet ou l’objectif
- Suggérer des moyens de corriger les erreurs
- Mettez en surbrillance et décrivez les erreurs avec du texte et pas seulement avec de la couleur
⌨️ Code
En développement, il est important d’avoir du discernement pour penser à des utilisations alternatives du web, comme l’utilisation de la dictée vocale par exemple. Il faudra donc penser à ajouter des étiquettes à tous les éléments visible d’une page, pour décrire aussi bien auditivement, ce qui est disponible visuellement. Ce qui est donc difficile c’est de se projeter sur ce que l’utilisateur·rice aura besoin de savoir sans avoir besoin de le voir à l’écran.
L’extension Chrome LightHouse est un outil automatisé permettant d’améliorer les performances, la qualité et l’exactitude d’un site web
Le site Accessibility Checker est un outil pour récolter une note d’accessibilité et des recommandations pour améliorer le site (autant côté design que dev)
Quelques tips :
- S’assurer que le zoom n’est pas désactivé
- N’utiliser qu’un seul élément H1 par page
- Utiliser l’ordre logique des titres et ne pas sauter de niveau de titre (H1, H2, H3, etc)
- S’assurer que l’orientation portrait ou paysage n’est pas désactivé
- Utiliser un design responsive / des breakpoints pour s’adapter à n’importe quelle taille d’écran (desktop, tablette, mobile)
- S’assurer que le texte peut être redimensionné à 200 % sans défilement horizontal (à 300% la version mobile sera affichée automatiquement)
- Utiliser l’attribut HTML < role=status > pour les messages d’état afin d’indiquer aux technologies d’assistance de lire le contenu sans recevoir le focus
- Écrire votre code dans le même ordre significatif que le contenu, les lecteurs d’écran suivront l’ordre du code
- Utiliser un texte alternatif descriptif pour les images
- Ne pas lire automatiquement l’audio
- Ne pas utiliser l’attribut autofocus automatique (lors de l’arrivée sur un formulaire, le curseur n’est pas automatiquement dans un input)
- Créer des ID uniques
⛵️ Navigation
Chaque information doit être organisée en mémoire sous forme de concepts classés de manière structurée selon des priorités ou des attributs qui font sens, tout cela permet une navigation fluide pour les utilisateurs·rices. Par exemple, sur un site e-commerce, les produits seront classés en fonction de catégories plus générales. Donc si je cherche une batterie externe, elle se trouvera dans la rubrique “Accessoires Smartphones”, qui elle-même sera dans la grande division “Smartphones”.
Concernant la navigation au clavier, il existe deux types de contraste. L’état de mise au point représente les états de focus qui aident les utilisateurs·rices à naviguer sur un site avec un clavier en leur donnant un indicateur visuel autour des éléments. Ainsi que l‘ordre de tabulation logique, vous la retrouvez lorsque vous naviguez dans une fenêtre avec la touche Tab, le focus clavier doit se déplacer entre les contrôles dans un ordre prévisible.
Quand à la navigation tactile, elle doit répondre aux règles concernant les cibles tactiles. Elles doivent mesurer au moins 9 mm de haut sur 9 mm de large, indépendamment de la taille de l’écran, de l’appareil ou de la résolution.
Quelques tips :
- Fournir un moyen de passer d’une page à une autre plus facilement et rapidement en sautant les étapes redondantes, telles que des liens, des fils d’Ariane et des formulaires de recherche (par exemple, un lien « passer au contenu » sur des blogs)
- Fournir plus d’un moyen d’accéder aux pages, telles que plusieurs menus de navigation, plans de site et une table des matières (sauf les pages qui ont besoin d’être consultées dans un ordre précis)
- Donner des informations sur l’emplacement de l’utilisateur sur le site, telles que des fils d’Ariane ou des onglets
- Éviter les pages qui s’ouvrent dans d’autres onglets sans prévenir l’utilisateur
🍃 Interactions & Animations
Les interactions doivent répondre à plusieurs règles simples, l’une de celle-ci est importante et simple à mettre en place, c’est la loi de Fitts. Elle résume le fait d’avoir des éléments plus facilement cliquables à atteindre s’ils répondent à certaines observations. Plus la cible est loin du curseur ou du placement de nos doigts lorsque le dispositif est tactile, plus elle doit être de grande taille, et à contrario, plus la cible est près de nous, moins la cible a besoin d’être imposante.
Les animations doivent quant à elles, être utilisées avec parcimonie pour aider l’utilisateur·rice dans sa navigation et ne pas desservir sa compréhension. Par exemple, les animations peuvent être utiles pour attirer l’attention sur une alerte.
Quelques tips :
- Éviter de mettre trop d’effet parallaxe (déplacement différent et plus ou moins rapide d’un objet /d’une forme par rapport à ce qui l’entoure) qui se suivent ou se surperposent
- Il ne doit pas y avoir trop de changements fréquents (swipe horizontal puis vertical, etc)
- Laisser s’écouler plusieurs secondes entre chaque animation lors de la navigation sur une page
- Disposer de fonctionnalités de glisser-déposer, fournir un moyen d’atteindre le même objectif avec un clavier
- Donner des alternatives aux fonctionnalités demandant d’utiliser des gestes multipoints comme la possibilité d’utiliser un seul pointeur sans geste basé sur un chemin (par exemple, une carte qui nécessite deux doigts pour zoomer possède également des boutons de zoom)
🔈 Audio
La vidéo prend de plus en plus de place sur le web, c’est pour cela que l’audio doit être pris en compte pour être adapté à tous·tes.
L’outil GetCapte permet d’ajouter automatiquement des sous-titres à une vidéo, ce qui permet aux personnes malentendantes de profiter également du contenu d’une vidéo
Quelques tips :
Pour qu’une vidéo ou un audio soit accessible, certains éléments doivent accompagner le contenu comme une transcription intégrale (seule nécessité pour un fichier audio), des sous-titres ou une audiodescription.
La transcription intégrale est la solution nécessaire et suffisante pour rendre accessible un fichier audio.
Elle doit restituer textuellement l’ensemble des informations importantes véhiculées par le contenu, celles-ci peuvent être : les dialogues, les messages affichés à l’écran, les graphiques et animations éventuels qui apportent de l’information, le nom et le titre des personnes, le nom des objets (bâtiments, produit…), le lieu, ce qui se passe dans la vidéo ou des informations sur les paramètres de la vidéo (qualité, noir et blanc…).
Cette transcription doit, par ordre de préférence, être :
- Accessible directement à travers le lecteur audio/vidéo, lui-même.
- Directement présente dans la page ou le document à proximité immédiate (l’élément qui suit directement, en fait) de la vidéo ou audio.
- Accessible à travers un lien à proximité immédiate pointant sur une autre partie de la page ou du document ou même, une page ou un document autre.
👋 Pour conclure
✅ Checklist
L’accessibilité est un effort à construire en équipe, entre les designers et les développeurs·euses. Pour qu’au final le produit créé soit accessible, tout le monde doit travailler ensemble pour créer une checklist accessibility permettant de garder en tête les guidelines mise en place dans l’entreprise.
Quelques checklists (A11Y Project, Webflow, République Française) ont été une source d’inspiration pour l’élaboration de celle de La chouette & rwigo. Designers et développeurs·euses sommes tous·tes investi·es dans l’accessibilité des projets sur lesquels nous collaborons et nous intervenons.
C’est pour cela qu’une checklist sur Asana a été une solution pertinente pour nous. Cette façon de procéder sur cet outil se trouve être déjà dans nos processus car c’est de cette manière que nous procédons lors de la phase de review QA entre developer et designer. Tout au long du projet le fonctionnement reste le même, notamment avec l’élaboration et le suivi d’un backlog.
Nous sommes tous·tes sur la même longueur d’onde en voulant offrir une expérience personnalisée répondant aux besoins précis d’une cible ou d’utilisateurs·rices et identifié·es en amont de la phase de design.
L‘objectif premier de La Chouette & Rwigo est de se fier aux utilisateurs·rices finaux pour que le design et le développement du projet soit en adéquation avec la demande. Si les besoins identifiés et l’objectif sont en harmonies et représente le fait de réaliser un site “Waouh”, il devra tout de même être créé en adéquation avec l’élaboration de notre Checklist Accessibilité. On ne se ferme pas de porte, on garde l’esprit ouvert en étant confiants·tes d’un avenir numérique plus inclusif.
Si vous souhaitez approfondir le sujet, vous pourrez découvrir prochainement un nouvel article, avec des exemples concrets à travers des études de cas sur l’accessibilité.
👉 Checkez les autres articles La Chouette & Rwigo :
- Article “Les designers et developers doivent-ils·elles être éthiques ?”, Mélanie Dalla-Vecchia, Janvier 2021
- Article “Inclusive Design : prendre en compte la diversité humaine pour mieux concevoir”, Émeline Gradeler, Janvier 2021
📔 Sources
- Article Medium “A guide to color accessibility in product design”, InVision, 0ctobre 2018
- Livre “33 bonnes pratiques en UX Design : Les fondamentaux de la psychologie numérique”, Liv DANTHON LEFEVRE, 2019
