Comment intégrer l'accessibilité dans le processus de votre équipe.
Rendre votre site plus accessible n'est pas toujours chose facile. Si vous approchez de l'accessibilité pour la première fois, l'ampleur du sujet peut vous amener à vous demander par où commencer. Après tout, travailler pour gérer un large éventail de capacités signifie qu'il existe un éventail tout aussi diversifié de problèmes à prendre en compte.
N'oubliez pas que l'accessibilité est un travail d'équipe. Chaque personne a un rôle à jouer. Cet article décrit les critères pour chacune des principales disciplines (chef de projet, concepteur UX et développeur) afin qu'elles puissent travailler à l'intégration des bonnes pratiques d'accessibilité dans leur processus.
Gestionnaire de projet
L'un des objectifs principaux d'un gestionnaire de projet est d'essayer d'inclure des travaux d'accessibilité dans chaque jalon, en s'assurant qu'ils sont tout aussi prioritaires que d'autres sujets tels que les performances et l'expérience utilisateur. Vous trouverez ci-dessous quelques éléments de la checklist à garder à l'esprit lorsque vous suivez votre processus.
- Mettre des formations sur l'accessibilité à la disposition de l'équipe.
- Identifiez les parcours utilisateur critiques sur le site ou dans l'application.
- Essayez d'intégrer une liste de contrôle d'accessibilité dans le processus d'équipe.
- Si possible, évaluez le site ou l'application à l'aide d'études utilisateur.
Formation sur l'accessibilité
Il existe un certain nombre de ressources sans frais très utiles pour en savoir plus sur l'accessibilité du Web. Réserver du temps à votre équipe pour étudier le sujet peut faciliter l'inclusion de l'accessibilité dès le début du processus.
Voici quelques-unes des ressources fournies par Google:
Web Accessibility by Google : cours de formation interactif sur plusieurs semaines.
Principes de base de l'accessibilité : guides d'accessibilité et bonnes pratiques rédigés
Material Guidelines: Accessibility (Consignes Material : accessibilité) : ensemble de bonnes pratiques en matière d'expérience utilisateur pour une conception inclusive.
Identifier les parcours utilisateur critiques
Chaque application comporte une action principale que l'utilisateur doit effectuer. Par exemple, si vous créez une application d'e-commerce, chaque utilisateur doit pouvoir ajouter un article à son panier.
Certaines actions peuvent avoir une importance secondaire et n'être effectuées qu'occasionnellement. Par exemple, modifier votre photo d'avatar est une bonne fonctionnalité, mais n'est pas forcément indispensable pour chaque expérience.
L'identification des actions principales et secondaires dans votre application vous aidera à prioriser les tâches d'accessibilité à effectuer. Par la suite, vous pourrez combiner ces actions à une checklist d'accessibilité pour suivre votre progression et éviter les régressions.
Intégrer une checklist d'accessibilité
Le sujet de l'accessibilité est assez vaste. Par conséquent, disposer d'une checklist des domaines importants à prendre en compte peut vous aider à vous assurer que vous couvrez toutes vos bases.
Il existe plusieurs checklists d'accessibilité. Voici quelques exemples dans le secteur:
Checklist sur les WCAG de WebAIM Consignes d'accessibilité de Vox
Une fois votre checklist en main, vous pouvez examiner vos actions principales et secondaires pour commencer à trier les tâches à effectuer. Vous pouvez définir une approche assez tactique de ce processus et même créer une matrice d'actions principales et secondaires et déterminer, pour chaque étape de ces processus, s'il manque des bits d'accessibilité.
Évaluer avec des études utilisateur
Rien ne vaut s'asseoir auprès des utilisateurs réels et les observer lorsqu'ils essaient d'utiliser votre application. Si vous intégrez l'accessibilité à une expérience existante, ce processus peut vous aider à identifier rapidement les domaines à améliorer. Si vous démarrez un nouveau projet, les premières études utilisateur peuvent vous aider à éviter de passer trop de temps à développer une fonctionnalité difficile à utiliser.
Essayez d’intégrer les commentaires d’une population d’utilisateurs aussi diversifiée que possible. Prenez en compte les utilisateurs qui naviguent principalement avec le clavier ou qui s'appuient sur des technologies d'assistance telles que les lecteurs d'écran ou les loupes d'écran.
concepteur UX
Étant donné que les individus ont tendance à concevoir en utilisant leurs propres biais, si vous n'avez pas de handicap et que vous n'avez pas de collègues handicapés, vous concevez peut-être involontairement seulement certains de vos utilisateurs. Pendant que vous travaillez, demandez-vous « Quels sont tous les types d’utilisateurs qui pourraient s’appuyer sur cette conception ? » Voici quelques techniques que vous pouvez essayer de rendre votre processus plus inclusif.
- Le contraste des couleurs du contenu est suffisant.
- L'ordre de tabulation est défini.
- Les commandes sont associées à des libellés accessibles.
- Il existe plusieurs façons d'interagir avec l'interface utilisateur.
Le contenu présente un bon contraste des couleurs
L'objectif principal de la plupart des sites est de transmettre certaines informations aux utilisateurs, par le biais de textes ou d'images. Toutefois, si ce contenu présente un faible contraste, il peut être difficile à lire pour certains utilisateurs (en particulier ceux souffrant d'une déficience visuelle). Cela peut avoir un impact négatif sur l'expérience utilisateur. Pour répondre à cette préoccupation, veillez à ce que le contraste des couleurs de l'ensemble du texte et des images soit suffisant.
Le contraste est mesuré en comparant la luminance d'une couleur de premier plan et d'arrière-plan. Pour un texte de plus petite taille (inférieur à 18 pt ou 14 points en gras), nous vous recommandons d'utiliser un ratio minimal de 4,5:1. Pour les textes plus grands, ce format peut être ajusté sur 3:1.
Dans l'image ci-dessous, le texte de gauche respecte ces niveaux de contraste minimaux, tandis que le texte de droite présente un contraste faible.
Il existe un certain nombre d'outils permettant de mesurer le contraste des couleurs, tels que l'outil Material Color de Google, l'application Contrast Ratio de Lea Verou et la fonction aXe de Deque.
L'ordre de tabulation est défini
L'ordre de tabulation correspond à l'ordre dans lequel les éléments sont sélectionnés lorsque l'utilisateur appuie sur la touche de tabulation. Pour les utilisateurs qui utilisent principalement un clavier, la touche de tabulation est le principal moyen d'atteindre tous les éléments à l'écran. Pensez-y comme au curseur de leur souris.
Idéalement, l'ordre de tabulation doit suivre l'ordre de lecture et se dérouler du haut de la page jusqu'en bas, les éléments plus importants apparaissant plus haut dans l'ordre. Il est ainsi plus efficace d'accéder rapidement à ces éléments à l'aide d'un clavier.
L'interface fictive ci-dessus est numérotée afin d'afficher l'ordre de tabulation. Créer une simulation comme celle-ci peut aider en identifiant l'ordre de tabulation prévu. Ces informations peuvent ensuite être partagées avec les développeurs et les testeurs de contrôle qualité pour s'assurer qu'elles sont correctement implémentées et testées.
Les commandes sont associées à des libellés accessibles
Pour les utilisateurs de technologies d'assistance telles que les lecteurs d'écran, les libellés fournissent des informations qui seraient sinon uniquement visuelles. Par exemple, un bouton de recherche qui n'est qu'une icône en forme de loupe peut être associé à un libellé accessible "Recherche" pour aider à combler l' affordance visuelle manquante.
Voici quelques suggestions simples à suivre lors de la conception de libellés accessibles:
- Soyez concis : écouter de longues descriptions peut être fastidieux.
- Essayez de ne pas inclure le type ni l'état de la commande. Si la commande est codée correctement, un lecteur d'écran l'annoncera automatiquement.
- Concentrez-vous sur les verbes d'action : utilisez "Rechercher" et non "loupe".
Vous pouvez envisager de créer une simulation avec toutes vos commandes étiquetées. Ces informations peuvent être communiquées à votre équipe de développement et à l'équipe de contrôle qualité pour la mise en œuvre et les tests.
Plusieurs façons d'interagir avec l'UI et de la comprendre
Il est facile de supposer que tous les utilisateurs interagissent principalement avec la page à l'aide de la souris. Lors de la conception, tenez compte de la manière dont quelqu'un interagira avec une commande à l'aide d'un clavier.
Planifiez vos états cibles. Il s'agit de déterminer l'apparence d'une commande lorsque l'utilisateur sélectionne la commande avec la touche de tabulation ou appuie sur les touches fléchées. Il est utile de planifier ces états à l'avance, plutôt que d'essayer de les aligner plus tard dans la conception.
Enfin, pour tout point d'interaction, vous devez vous assurer que l'utilisateur dispose de plusieurs façons d'interpréter le contenu. Essayez de ne pas utiliser la couleur seule pour transmettre des informations, car un utilisateur souffrant d'une déficience visuelle pourrait passer à côté de ces signaux subtils. Un exemple classique est un champ de texte non valide. Au lieu d'un simple trait de soulignement rouge pour indiquer un problème, envisagez également d'ajouter un texte d'aide. De cette façon, vous couvrez plus de bases et augmentez la probabilité qu'un utilisateur remarque le problème.
Développeur
Le rôle du développeur consiste à combiner la gestion des sélections et la sémantique pour créer une expérience utilisateur robuste. Vous trouverez ci-dessous quelques éléments dont les développeurs peuvent se souvenir lorsqu'ils travaillent sur leur site ou leur application:
- L’ordre de tabulation est logique.
- Le ciblage est correctement géré et visible.
- Les éléments interactifs sont compatibles avec le clavier.
- Les rôles et attributs ARIA sont appliqués selon les besoins.
- Les éléments sont correctement libellés.
- Les tests sont automatisés.
Ordre de tabulation logique
Les éléments natifs tels que input, button et select sont activés sans frais dans l'ordre de tabulation et sont automatiquement sélectionnables avec le clavier. Toutefois, tous les éléments ne reçoivent pas ce même comportement. En particulier, les éléments génériques comme div et span ne sont pas activés dans l'ordre de tabulation. Cela signifie que si vous utilisez une div pour créer une commande interactive, vous devrez effectuer des tâches supplémentaires pour la rendre accessible au clavier.
Vous avez deux possibilités:
- Attribuez une
tabindex="0"au contrôle. Cela le rendra au moins sélectionnable, mais vous devrez probablement effectuer des tâches supplémentaires pour prendre en charge les pressions de touche. - Dans la mesure du possible, envisagez d'utiliser un
buttonau lieu d'un élémentdivouspanpour toute commande de type bouton. L'élémentbuttonnatif est très facile à styliser et est compatible sans frais avec le clavier.
Gestion de la priorité
Lorsque vous modifiez le contenu d'une page, il est important de diriger l'attention de l'utilisateur en déplaçant la sélection. L'ouverture d'une boîte de dialogue modale est un exemple classique d'utilité de cette technique. Si un utilisateur qui utilise un clavier appuie sur un bouton pour ouvrir une boîte de dialogue et que le curseur n'est pas déplacé dans l'élément de boîte de dialogue, sa seule action consiste à parcourir l'ensemble du site à l'aide de la touche de tabulation jusqu'à ce qu'il trouve la nouvelle commande. En vous concentrant sur le nouveau contenu dès qu'il apparaît, vous pouvez améliorer l'efficacité de l'expérience de ces utilisateurs.
Compatibilité avec le clavier pour les éléments interactifs
Si vous créez une commande personnalisée telle qu'un carrousel ou un menu déroulant, vous devrez effectuer des tâches supplémentaires pour ajouter la prise en charge du clavier. Le guide des pratiques de création ARIA est une ressource utile qui identifie les différents modèles d'interface utilisateur et les types d'actions de clavier qu'ils sont censés prendre en charge.
Pour en savoir plus sur l'ajout de la prise en charge du clavier à un élément, consultez la section Approbation des onglets d'onglet dans la documentation sur les principes de base de l'accessibilité de Google.
Les rôles et attributs ARIA sont appliqués selon les besoins
Les commandes personnalisées nécessitent non seulement une compatibilité avec le clavier, mais aussi une sémantique appropriée. Sémantiquement, un div n'est qu'un conteneur de regroupement générique. Si vous utilisez div comme base pour votre menu déroulant, vous devez utiliser ARIA pour ajouter une sémantique supplémentaire afin que le type de commande puisse être transmis à une technologie d'assistance. Là encore, le Guide des pratiques de création ARIA peut vous aider en identifiant les rôles, les états et les propriétés que vous devez utiliser.
En prime, la plupart des explications du guide ARIA sont également fournies avec un exemple de code.
Éléments d'étiquetage
Pour ajouter des étiquettes aux entrées natives, vous pouvez utiliser l'élément <label> intégré, comme décrit sur MDN. Cela vous aidera non seulement à créer une affordance visuelle à l'écran, mais cela donnera également à l'entrée un nom accessible dans l'arborescence d'accessibilité. Ce nom est ensuite récupéré par la technologie d'assistance (comme un lecteur d'écran) et annoncé à l'utilisateur.
Malheureusement, <label> ne permet pas d'attribuer un nom accessible aux commandes personnalisées (comme celles créées à l'aide d'éléments personnalisés ou à partir de simples div et spans). Pour ce type de commandes, vous devez utiliser les attributs aria-label et aria-labelledby.
Tests automatiques
Être paresseux, c'est bien, surtout en ce qui concerne les tests. Dans la mesure du possible, cherchez à automatiser vos tests d'accessibilité pour ne pas avoir à tout faire manuellement. Il existe aujourd'hui un certain nombre d'excellents outils de test sectoriels pour faciliter et accélérer la détection des problèmes d'accessibilité courants:
aXe, créé par les systèmes Deque, est disponible en tant qu'extension Chrome et module de nœud (idéal pour les environnements d'intégration continue). Ce court A11ycast explique plusieurs façons d'intégrer aXe dans votre processus de développement.
Lighthouse est le projet Open Source de Google permettant d'auditer les performances de vos progressive web apps. En plus de vérifier si votre PWA est compatible avec des éléments tels que Service Worker et un fichier manifeste d'application Web, Lighthouse exécute également une série de tests de bonnes pratiques, y compris des tests concernant les problèmes d'accessibilité.
Conclusion
L'accessibilité est un travail d'équipe. Tout le monde a un rôle à jouer. Ce guide présente quelques éléments clés que chaque membre de l'équipe peut utiliser pour progresser rapidement sur le sujet et, espérons-le, améliorer l'expérience globale de son application.
Pour en savoir plus sur l'accessibilité, consultez notre cours Udacity sans frais et parcourez la documentation sur l'accessibilité disponible ici sur web.dev.