L'accessibilité numérique fait référence aux pratiques de création de contenu numérique et d'applications qui conviennent à un large éventail de personnes, y compris celles qui souffrent de déficiences visuelles, motrices, auditives, vocales ou cognitives.
Il existe une fausse croyance selon laquelle vous ne pouvez rendre un site accessible qu'en investissant beaucoup d'efforts et d'argent, mais ce n'est pas nécessaire. Si vous concevez un projet dès le début, en tenant compte des exigences pertinentes, vous n'aurez pas besoin d'ajouter de fonctions et de contenu spéciaux, ce qui signifie qu'il n'y aura pas de coûts supplémentaires.
S'il s'agit de corriger des erreurs sur un site existant, alors des efforts devront être faits ici. Lorsque j'ai travaillé chez Carbon Health, nous avons testé l'accessibilité du site à l'aide d'une
extension spéciale dans Chrome . Déjà sur la page principale, 28 violations ont été trouvées qui devaient être éliminées. À première vue, il semblait que ce serait un processus très laborieux, mais il est vite devenu évident que faire des changements ne serait pas si difficile - il vous suffit d'investir du temps et de comprendre les bases. Nous avons réussi à réduire le nombre de violations à zéro en quelques jours seulement.
Je veux partager quelques étapes simples que nous avons prises et qui pourraient vous aider. Ces principes sont principalement conçus pour les applications mobiles et Web. Mais avant de commencer, découvrons pourquoi cela est nécessaire.
Pourquoi viser l'accessibilité?
En tant que concepteurs, nous sommes capables et obligés de faire tout ce qui est en notre pouvoir pour que tous les produits créés par nous puissent être utilisés par tout le monde, quelles que soient les capacités, le contexte ou la situation. La bonne chose est le désir d'accessibilité - il offre finalement une expérience plus positive pour tout le monde.
Le nombre de personnes handicapées atteint 56 millions aux États-Unis (soit un peu moins d'un cinquième de la population) et environ un milliard dans le monde. En 2017,
814 poursuites ont été
déposées pour l' accessibilité du site Web. Ces deux faits nous démontrent déjà de manière convaincante l'importance de cette question.
De plus, l'accessibilité s'avère avantageuse
d'un point de vue commercial : des études montrent que les sites accessibles occupent des positions plus élevées dans les résultats de recherche, ont de bons indicateurs SEO, se chargent plus rapidement, stimulent la pratique de l'écriture d'un meilleur code et se distinguent toujours par une excellente convivialité.
Ces sept règles sont relativement faciles à suivre et vous permettront d'amener le produit au niveau AA grâce au
système WCAG 2.0 (
Web Content Accessibility Guidelines ), le rendant compatible avec les appareils et accessoires fonctionnels de base, notamment les lecteurs d'écran, les loupes d'écran et les outils de reconnaissance vocale.
1. Faites en sorte que les couleurs contrastent suffisamment
Le contraste des couleurs est l'un des problèmes d'accessibilité du site souvent oubliés. Les personnes malvoyantes auront probablement du mal à lire le texte s'il ne contraste pas assez bien avec l'arrière-plan. Selon les estimations de l'Organisation mondiale de la santé (OMS)
dans son document sur la déficience visuelle et la cécité , le rapport de la luminosité du texte à l'arrière-plan devrait être d'au moins 4,5: 1 (pour correspondre au niveau AA). Pour les polices plus grandes et en gras, les tolérances sont autorisées - elles sont plus faciles à distinguer même avec un faible contraste. Si la taille de votre texte est de 14-18 pt ou plus, le seuil est réduit à 3: 1.
Il existe des outils qui vous aident à vérifier rapidement le contraste. Ceux qui travaillent sur un Mac, je vous conseille d'obtenir l'application
Contraste - elle vous permet de calculer instantanément le ratio à l'aide d'une pipette. Si vous souhaitez obtenir une évaluation plus détaillée, je vous recommande de saisir les valeurs nécessaires dans l'
outil de vérification du contraste de WebAIM. Il calculera le rapport pour différentes tailles de police et établira la correspondance à
différents niveaux (A, AA, AAA). En modifiant les valeurs, vous pouvez obtenir le résultat en temps réel.
Source:
Contraste visuel WCAG2. Ne vous fiez pas uniquement à la couleur pour transmettre des informations critiques
Lorsque vous essayez de dire à l'utilisateur quelque chose d'important - pour montrer un exemple d'action ou provoquer une réaction, ne faites pas de la couleur le seul marqueur visuel. Les personnes souffrant d'acuité visuelle ou de daltonisme auront du mal à percevoir votre contenu.
Essayez de compléter la couleur avec un autre indicateur - par exemple, une signature ou une texture. Lorsque vous affichez un message d'erreur à l'écran, ne vous contentez pas de surligner le texte en couleur - ajoutez une icône ou un titre à la fenêtre. Pensez également à utiliser une police en gras ou soulignée afin que les liens dans le texte soient immédiatement saisissants.
Les éléments dont la structure d'information est plus complexe - par exemple, les graphiques - sont particulièrement difficiles à lire lorsque les types de données sont séparés uniquement par la couleur. Utilisez d'autres aspects visuels pour transmettre des informations - forme, taille et texte explicatif. Vous pouvez ajouter des motifs au remplissage pour rendre la différence plus évidente.
La version de Trello pour daltonien est un excellent exemple d'application de cette règle. Si vous passez à ce mode, les raccourcis deviennent universellement compréhensibles en ajoutant des textures.
Il existe un bon moyen: imprimez le graphique sur une imprimante noir et blanc et voyez si tout sera clair pour vous. De plus, vous pouvez utiliser des applications spéciales telles que
Color Oracle , qui montrent en temps réel à quoi ressemblera le contenu pour les personnes présentant les troubles de perception des couleurs les plus courants. Tout cela vous aidera à vous assurer que les informations sur votre site ne sont pas trop liées à la couleur.
Source:
Contraste visuel WCAG sans couleur3. Mettez en surbrillance les éléments actifs
Avez-vous remarqué un cadre bleu qui apparaît parfois autour des liens, des champs et des boutons? Un tel cadre est appelé indicateur de mise au point. Les navigateurs utilisent la pseudo-classe CSS par défaut pour l'afficher sur les éléments lorsqu'ils sont cliqués. Peut-être ne vous semble-t-il pas trop joli et vous préféreriez simplement le retirer. Cependant, si vous décidez de vous débarrasser du style par défaut, assurez-vous de fournir une sorte de remplacement.
Les indicateurs de focus aident les utilisateurs à comprendre avec quel élément vous pouvez interagir avec le clavier et où ils se trouvent dans la structure de la page. Ils sont utiles pour les aveugles qui utilisent des lecteurs d'écran, les personnes handicapées physiques ou atteintes du syndrome du canal carpien et les utilisateurs avancés qui préfèrent ce type de navigation. Eh bien, en plus, beaucoup d'entre nous, en principe, préfèrent se lancer dans la navigation sur Internet au clavier!
Les éléments pour lesquels l'état actif doit être visuellement souligné comprennent: les liens, les champs de formulaire, les widgets, les boutons et les éléments de menu. Tous ont besoin d'indicateurs qui les distingueront des éléments environnants.
Vous pouvez concevoir des indicateurs pour qu'ils soient bien dans le style de votre site et soient combinés avec l'image de marque. Rendez les marqueurs d'état actifs facilement visibles, avec un contraste élevé, afin qu'ils soient clairement visibles parmi les autres contenus.
Source:
Focus W3C visible4. Ajoutez des légendes et des instructions aux champs de saisie
L'une des erreurs les plus grossières lors de la création de formulaires est de laisser des signatures explicatives dans les champs eux-mêmes afin qu'ils disparaissent lors de la saisie des données. Lorsqu'il y a peu d'espace sur l'écran ou que vous souhaitez donner au design un look minimaliste et moderne, la tentation est grande - mais ne le faites pas. Le texte dans les champs du formulaire est généralement gris et pas assez contrasté, difficile à lire. Et les gens comme moi, d'ailleurs, oublient à moitié qu'ils ont tapé du tout, donc la signature disparue nous prive de toutes les chances de le comprendre.
Les personnes qui utilisent des lecteurs d'écran se déplacent généralement à l'aide de la touche Tab, passant d'un contrôleur à un autre. Les éléments d'étiquette sont comptés pour chacun d'eux. Le reste du texte qui ne s'applique pas à eux (les mêmes étiquettes explicatives à l'intérieur des champs) est généralement ignoré.
Assurez-vous toujours que les gens comprennent quoi faire avec le formulaire et quoi y écrire. Il est préférable que les signatures restent visibles même pendant le processus de saisie - une personne doit avoir un contexte devant ses yeux lorsqu'elle remplit les champs. En cachant les signatures et les instructions du formulaire, les concepteurs, dans un souci de simplicité
, sacrifient la convivialité .
Cela ne signifie pas que vous devez encombrer l'écran avec des informations inutiles - assurez-vous simplement que les conseils les plus importants sont disponibles. Un excès de données peut apporter pas moins de problèmes que leur manque. Votre objectif est de fournir des informations dans un volume tel que l'utilisateur puisse effectuer l'opération sans accroc.
Source:
WebAIM Création de formulaires accessibles5. Rédiger des descriptions alternatives informatives pour les images et autres éléments non textuels
Les personnes malvoyantes utilisent souvent des lecteurs d'écran pour «écouter» Internet. Ils transforment le texte en discours sonore, permettant d'écouter tout ce qui est écrit sur le site.
Une description alternative peut être représentée de deux manières:
- Dans l'attribut alt de l'élément image
- Dans le contexte immédiat ou dans le texte accompagnant l'image
Essayez de décrire ce qui se passe sur l'image et comment elle se rapporte à la signification générale, et ne vous contentez pas de faire un commentaire comme «image». Le contexte est crucial.
Si l'image est ajoutée uniquement pour la beauté ou ce qu'elle exprime est dupliquée dans le texte, vous pouvez ajouter l'attribut et le laisser vide - dans ce cas, le lecteur d'écran le sautera. Lorsque le texte alternatif n'est pas écrit du tout, certains lecteurs d'écran liront le nom du fichier. Vous ne pouvez rien imaginer de pire pour une expérience utilisateur.
Google travaille actuellement sur une
solution basée sur l'
intelligence artificielle qui génère des légendes d'images avec une précision de 94%. Le code est dans le domaine public et est encore en cours de finalisation. J'espère que nous verrons bientôt comment cette solution sera appliquée dans différents produits. D'ici là, vous devez enregistrer manuellement la signification et le but des images dans le contexte du reste du contenu.
Source:
W3C utilisant les attributs Alt6. Utilisez le balisage correctement
Les en-têtes marquent le début du bloc de contenu - ce sont des balises qui déterminent le style et le but du texte. De plus, les en-têtes définissent la hiérarchie du contenu de la page.
La grande police dans les en-têtes permet à l'utilisateur de mieux comprendre la structure des informations. Les lecteurs d'écran s'appuient également sur les en-têtes lors de la lecture de contenu. Ainsi, les personnes malvoyantes ont une idée de l'apparence générale de la page en écoutant les titres dans une séquence hiérarchique.
Lors du développement d'un site, vous devez utiliser les éléments structurels appropriés. Les éléments HTML transmettent au navigateur des informations sur le type de contenu qu'ils transportent et les actions à effectuer avec celui-ci. Ce sont les composants et la structure de la page qui forment l'arborescence d'accessibilité du navigateur avec laquelle les lecteurs d'écran pour les malvoyants travaillent.
Un balisage incorrect affecte gravement l'accessibilité. Ne limitez pas l'utilisation des balises HTML aux effets stylistiques. Les lecteurs d'écran sont guidés par une page basée sur la structure hiérarchique des titres - de vrais titres, et pas seulement du texte qui est agrandi et plus gros. Avec leur aide, les utilisateurs peuvent écouter la liste complète des titres, sauter des blocs de contenu, guidés par le type de titre, ou aller à la navigation dans les titres du premier niveau (h1).
Source:
WebAIM Structure sémantique7. Prise en charge du contrôle des touches
La possibilité d'effectuer des opérations à l'aide du clavier est l'un des principaux composants de l'accessibilité dans la conception Web. Les personnes ayant une mauvaise coordination des mouvements et du tonus musculaire, les aveugles, ceux qui utilisent des lecteurs d'écran et même certains utilisateurs avancés comptent sur le clavier lorsqu'ils naviguent sur le site.
Peut-être que vous, comme moi, utilisez la touche Tab pour naviguer vers les éléments de page interactifs souhaités: liens, boutons, champs de saisie. L'indicateur de l'état actif, dont nous avons parlé ci-dessus, vous permet de souligner visuellement l'élément actuellement sélectionné.
Lorsque vous vous déplacez dans la page, la séquence dans laquelle l'utilisateur interagit avec les éléments est extrêmement importante, la navigation doit donc être logique et intuitive. L'ordre de transition doit correspondre à la direction du mouvement du regard: de gauche à droite, de haut en bas, d'abord la navigation principale, puis les boutons qui masquent le contenu, les formes et enfin le pied de page.
Il est recommandé de tester le site en utilisant uniquement le clavier. Passez de lien en lien et de champ en champ à l'aide de la touche Tab. Vérifiez s'il est pratique de sélectionner un élément en appuyant sur Entrée. Assurez-vous que tous les composants sont alignés dans le bon ordre et que leur apparence est prévisible. Si vous pouvez parcourir toutes les pages sans toucher à la souris, alors vous vous en sortez bien!
Et encore une chose. Faites attention aux volumes du système de navigation - cela fait référence au nombre de liens et à la taille du texte. Itérer sur tous les éléments d'une longue liste peut fatiguer les personnes ayant des capacités motrices limitées, et les personnes qui utilisent un lecteur d'écran se fatiguent rapidement d'écouter de longs textes de lien. Essayez d'être plus concis. L'ajout de
marqueurs ARIA ou d'éléments structurels HTML 5 (tels que main ou nav) facilitera également la navigation dans la page.
Source:
Clavier W3CQue peut-on faire d'autre
Ces règles sont un bon point de départ, mais si vous voulez faire autre chose pour augmenter l'accessibilité, je recommanderais:
- Réalisez un audit de disponibilité. Utilisez le service spécial pour savoir si votre produit est en conflit avec des appareils auxiliaires et s'il répond aux exigences du niveau AA. Apportez les modifications nécessaires en fonction des résultats et répétez le test.
- Nommer un vérificateur. Vous pouvez demander à l'un des employés d'effectuer régulièrement de tels audits, par exemple auprès d'une personne de l'équipe de test. S'il n'y a pas de personnes ayant l'expérience nécessaire, vous pouvez contacter un spécialiste tiers.
- Tenez compte des facteurs d'accessibilité lors de la collecte d'informations. Lorsque vous effectuez des recherches, vérifiez si vos hypothèses sur l'accessibilité sont confirmées et recherchez des opportunités pour affiner quelque chose. Impliquer les personnes handicapées est un peu plus difficile. N'hésitez pas à contacter les associations et les communautés - il y a généralement du plaisir à vous aider.
Conclusion
C’est tout. Ces sept règles vous aideront à amener votre site à un niveau approximatif AA
conformément aux directives d'accessibilité du contenu Web .
Je continue de travailler pour rendre le design plus accessible et j'essaie de respecter les principes que je prêche aux autres. Auparavant, il me semblait que cela était trop compliqué et n'avait toujours pas vraiment d'importance. Mais j'avais tort. Je vous suggère de démarrer le processus en utilisant ces règles et de poursuivre la conversation sur l'importance de l'accessibilité.
La promotion des pratiques d'accessibilité est de la responsabilité des concepteurs. Avec leur aide, nous ouvrons la voie à la technologie pour tous, quels que soient leurs capacités, leur niveau de vie, leur âge, leur éducation et leur lieu de résidence. Prenez vos responsabilités lors de la conception. Je vous remercie!
Les références
WebAIM - Articles, ressources et
études de cas sur l'accessibilité dans la conception Web
«
7 choses qu'un concepteur doit savoir sur l'accessibilité » est un excellent article de Salesforce avec des observations précises
UCLA Disabilities and Computing Program - le site, bien sûr, n'est pas le plus beau et le plus moderne, mais il est très riche en ressources
Mythes UX - Une longue liste d'idées fausses dans la conception UX avec réfutations; certains d'entre eux abordent des problèmes d'accessibilité
Flux de travail sur l'accessibilité des couleurs - ici
Geri Coady montre comment arriver au point avec la sélection des couleurs
W3C - la bible de l'accessibilité dans la conception de sites Web, vous pouvez même être dérouté par l'abondance de matériaux. Mais lorsque vous comprendrez la structure, vous trouverez d'excellents exemples, conseils et ressources.
Des outils utiles
WebAIM Color Contrast Checker - un outil intelligent pour vérifier le contraste, produit un résultat immédiatement après la saisie et pour différentes tailles de texte
Composants inclusifs - une bibliothèque de textures conçue comme un blog. Une attention particulière est accordée aux questions de conception abordable. Chaque article analyse un composant d'interface commun et propose une version plus fiable et abordable de sa conception.
Color Oracle est un simulateur gratuit de daltonien adapté à Windows, Mac et Linux. En temps réel, il montre comment les personnes atteintes de troubles de perception des couleurs répandus voient.
Directives d'accessibilité des produits Vox - Liste complète des exigences pour les concepteurs, les développeurs et les chefs de projet
AX Google Chrome Extension - recherchez des violations d'accessibilité sur n'importe quel site avec l'inspecteur pour Chrome
Contrast est une application Mac qui fournit un accès instantané aux rapports de luminosité WGAG.