Améliorer l'accessibilité des pages Web
Cet ensemble de documents est une version textuelle d'une partie du contenu traité dans le cours Udacity sur l'accessibilité. Plutôt qu'une transcription directe du cours vidéo, il s'agit d'un traitement plus concis des principes et des pratiques d'accessibilité, en s'appuyant sur le contenu original du cours.
Résumé
- Découvrez ce que signifie l'accessibilité et comment elle s'applique au développement Web.
- Apprenez à rendre les sites Web accessibles et utilisables par tous.
- Découvrez comment inclure l'accessibilité de base avec un impact minimal sur le développement.
- Découvrez les fonctionnalités HTML disponibles et comment les utiliser pour améliorer l'accessibilité.
- Découvrez les techniques d'accessibilité avancées permettant de créer des expériences d'accessibilité soignées.
Comprendre l'accessibilité, son champ d'application et son impact peut faire de vous un meilleur développeur Web. L'objectif de ce guide est de vous aider à comprendre comment rendre vos sites Web accessibles et utilisables par tous.
Le terme « accessibilité » peut être difficile à épeler, mais ce n'est pas une obligation. Dans ce guide, vous découvrirez comment optimiser facilement l'accessibilité en optimisant l'accessibilité, comment utiliser les éléments intégrés au code HTML pour créer des interfaces plus accessibles et plus robustes, et comment exploiter certaines techniques avancées pour créer des expériences accessibles et soignées.
Vous constaterez également que bon nombre de ces techniques vous permettent de créer des interfaces plus agréables et faciles à utiliser pour tous les utilisateurs, et pas seulement pour ceux qui souffrent de handicap.
Bien sûr, de nombreux développeurs n'ont qu'une compréhension floue de ce que signifie l'accessibilité, qui est lié aux contrats gouvernementaux, aux listes de contrôle et aux lecteurs d'écran, n'est-ce pas ? - et de nombreuses idées reçues circulent. Par exemple, de nombreux développeurs pensent que gérer l'accessibilité les obligera à choisir entre créer une expérience agréable et attrayante et une expérience maladroite et moche, mais accessible.
Ce n'est évidemment pas le cas du tout, alors clarifions ce point avant de passer à autre chose. Qu'entendons-nous par accessibilité et que sommes-nous ici pour en savoir plus ?
Qu'est-ce que l'accessibilité ?
De manière générale, un site est considéré comme accessible lorsque son contenu est disponible et que ses fonctionnalités peuvent être utilisées par tout le monde. En tant que développeurs, il est facile de supposer que tous les utilisateurs peuvent voir et utiliser un clavier, une souris ou un écran tactile, et interagir avec le contenu de la page de la même manière que vous. Cela peut entraîner une expérience qui fonctionne bien pour certaines personnes, mais qui pose des problèmes allant de simples ennuis à des obstacles pour d'autres.
L'accessibilité fait ensuite référence à l'expérience des utilisateurs qui ne font pas partie de la plage étroite de l'utilisateur "typique", et qui peuvent accéder aux éléments ou interagir avec eux différemment de ce à quoi vous vous attendiez. Plus précisément, elle concerne les utilisateurs qui présentent un certain type de déficience ou de handicap, et gardez à l'esprit que cette expérience peut être non physique ou temporaire.
Par exemple, bien que nous ayons tendance à centrer notre discussion sur l'accessibilité sur les utilisateurs souffrant d'une déficience physique, nous pouvons tous comprendre l'expérience d'utilisation d'une interface à laquelle nous n'avons pas accès pour d'autres raisons. Avez-vous déjà rencontré un problème lors de l'utilisation d'un site pour ordinateur sur un téléphone mobile, vu le message "Ce contenu n'est pas disponible dans votre région" ou été incapable de trouver un menu habituel sur une tablette ? Ce sont tous des problèmes d'accessibilité.
À mesure que vous en apprendrez plus, vous constaterez que résoudre les problèmes d'accessibilité dans ce sens plus large et plus général améliore presque toujours l'expérience utilisateur pour tous. Voyons un exemple :
Ce formulaire présente plusieurs problèmes d'accessibilité.
- Le texte présente un faible contraste, ce qui le rend difficile à lire pour les personnes malvoyantes.
- Avec des libellés à gauche et des champs à droite, il est difficile pour de nombreuses personnes de les associer, et c'est presque impossible pour une personne qui a besoin de faire un zoom avant pour utiliser la page. Imaginez la possibilité de regarder ceci sur un téléphone et de devoir faire un panoramique pour comprendre ce qui va avec quoi.
- Le libellé "Se souvenir des détails ?" n'est pas associé à la case à cocher. Vous devez donc appuyer ou cliquer uniquement sur le petit carré au lieu de simplement cliquer sur le libellé. De plus, une personne utilisant un lecteur d'écran pourrait avoir du mal à comprendre l'association.
Agitons maintenant notre baguette d'accessibilité pour voir le formulaire avec ces problèmes résolus. Nous allons assombrir le texte, modifier la conception pour que les libellés soient proches des éléments auxquels ils s'appliquent, puis corriger le libellé pour qu'il soit associé à la case à cocher afin que vous puissiez l'activer ou le désactiver en cliquant également sur l'étiquette.
Lequel préférez-vous utiliser ? Si vous avez dit "la version accessible", vous êtes sur le point de comprendre l'une des bases de ce guide. Souvent, ce qui bloque complètement certains utilisateurs est également problématique pour de nombreux autres. Par conséquent, en résolvant le problème d'accessibilité, vous améliorez l'expérience pour tous les utilisateurs.
Directives d'accessibilité des contenus Web
Tout au long de ce guide, nous ferons référence aux Règles pour l'accessibilité des contenus Web (WCAG) 2.0, un ensemble de consignes et de bonnes pratiques élaborées par des experts en accessibilité pour aborder la signification du terme "accessibilité" de manière méthodique.
Les WCAG sont organisés autour de quatre principes, souvent appelés POUR:
Perceptible: les utilisateurs peuvent-ils percevoir le contenu ? Cela nous permet de garder à l'esprit que ce n'est pas parce qu'un élément est perceptible avec un sens (la vue, par exemple) que tous les utilisateurs peuvent le percevoir.
Utilisable: les utilisateurs peuvent-ils utiliser les composants de l'interface utilisateur et parcourir le contenu ? Par exemple, un élément qui nécessite une interaction de survol ne peut pas être exécuté par une personne qui ne peut pas utiliser une souris ni un écran tactile.
Compréhensible: les utilisateurs peuvent-ils comprendre le contenu ? Les utilisateurs peuvent-ils comprendre l'interface ? Est-elle suffisamment cohérente pour éviter toute confusion ?
Robuste: le contenu peut-il être utilisé par une grande variété de user-agents (navigateurs) ? Est-il compatible avec les technologies d'assistance ?
Bien que les WCAG fournissent un aperçu complet de ce que signifie l'accessibilité des contenus, ils peuvent également être un peu écrasants. Pour limiter ce problème, le groupe WebAIM(Web Accessibility in Mind) a présenté les directives WCAG dans une checklist facile à suivre, spécifiquement ciblée pour le contenu Web.
La checklist WebAIM peut vous donner un bref résumé général de ce que vous devez mettre en œuvre, tout en redirigeant vers la spécification WCAG sous-jacente si vous avez besoin d'une définition étendue.
Avec cet outil en main, vous pouvez définir l'orientation de votre travail d'accessibilité et être sûr que, tant que votre projet répond aux critères décrits, vos utilisateurs devraient avoir une expérience positive en accédant à votre contenu.
Comprendre la diversité des utilisateurs
Lors de l'apprentissage de l'accessibilité, il est utile de comprendre la diversité des utilisateurs dans le monde et les types de sujets d'accessibilité qui les concernent. Pour vous expliquer plus en détail, voici une séance de questions/réponses avec Victor Tsaran, gestionnaire de programme technique chez Google, qui est totalement aveugle.
Sur quel projet travaillez-vous chez Google ?
Mon travail chez Google consiste à m'assurer que nos produits fonctionnent pour tous les utilisateurs les plus divers, indépendamment de leur handicap ou de leurs capacités.
De quels types de handicaps les utilisateurs souffrent-ils ?
Lorsqu'on réfléchit aux types de déficiences qui pourraient empêcher quelqu'un d'accéder à notre contenu, de nombreuses personnes se représenteront immédiatement un utilisateur aveugle comme moi. Et c'est vrai, cette difficulté peut vraiment rendre frustrant, voire impossible, l'utilisation d'un grand nombre de sites Web.
De nombreuses techniques Web modernes ont comme effet secondaire de créer des sites qui ne fonctionnent pas bien avec les outils utilisés par les utilisateurs aveugles pour accéder au Web. Toutefois, l'accessibilité ne se limite pas à cela. Nous pensons qu'il est utile de classer les déficiences visuelles, motrices, auditives et cognitives.
Examinons-les un par un. Pouvez-vous donner des exemples de déficiences visuelles ?
Les déficiences visuelles peuvent être divisées en plusieurs catégories: les utilisateurs sans vision, comme moi, peuvent utiliser un lecteur d'écran, le braille ou une combinaison des deux.
C'est en fait assez inhabituel de n'avoir littéralement aucune vision, mais il y a de fortes chances que vous connaissiez ou avez rencontré au moins une personne qui ne peut pas voir du tout. Cependant, il existe également un bien plus grand nombre d'utilisateurs de ce que nous appelons les utilisateurs déficients visuels.
Il peut s'agir d'une personne comme ma femme, qui n'a pas de cornée, alors qu'elle a du mal à lire un papier et qu'elle est considérée comme aveugle juridique, à quelqu'un qui n'a peut-être qu'une mauvaise vue et doit porter des lunettes très résistantes.
Il existe une vaste gamme de possibilités, et donc naturellement, les utilisateurs de cette catégorie utilisent un large éventail d'options: certains utilisent un lecteur d'écran ou une plage braille (j'ai même entendu parler d'une femme qui lit en braille affiché à l'écran parce qu'il est plus facile à voir que le texte imprimé), ou ils peuvent utiliser la technologie de synthèse vocale sans la fonctionnalité de lecteur plein écran, ou ils peuvent utiliser une loupe qui zoome sur l'écran ou une police plus grande sur l'écran. Ils peuvent également utiliser des options de contraste élevé comme un mode contraste élevé du système d'exploitation, une extension de navigateur à contraste élevé ou un thème à contraste élevé pour un site Web.
De nombreux utilisateurs les combinent, comme mon amie Laura qui combine le mode contraste élevé, le zoom du navigateur et la synthèse vocale.
Beaucoup de gens peuvent s'identifier à une déficience visuelle. Pour commencer, nous constatons une détérioration de la vision au fur et à mesure que nous vieillissons. Il est donc fort probable que vous ayez entendu vos parents se plaindre, même si vous n'en avez pas encore eu l'expérience. Mais beaucoup de gens éprouvent la frustration de ne plus avoir leur ordinateur portable devant une fenêtre ensoleillée pour se rendre soudainement dans l’impossibilité de lire quoi que ce soit ! Ou quelqu'un qui a eu une chirurgie au laser ou qui a peut-être simplement besoin de lire quelque chose de l'autre côté de la pièce pourrait avoir utilisé l'un des aménagements que j'ai mentionnés. Je pense donc qu'il est assez facile pour les développeurs d'avoir une certaine empathie pour les utilisateurs malvoyants.
Et je ne devrais pas oublier de mentionner les personnes ayant une mauvaise vision des couleurs : environ 9% des hommes ont une forme de déficience de la vision des couleurs ! Plus environ 1% des femmes. Ils peuvent avoir du mal à distinguer le rouge et le vert, ou le jaune et le bleu. Pensez-y la prochaine fois que vous concevrez la validation d'un formulaire.
Qu'en est-il des troubles moteurs ?
Oui, des troubles moteurs ou des troubles de la dextérité. Ce groupe va de ceux qui préféreraient ne pas utiliser de souris, car ils ont peut-être eu une déficience énergétique ou un objet douloureux et trouvent cela douloureux, à une personne pouvant être physiquement paralysée et dont l'amplitude de mouvement est limitée pour certaines parties du corps.
Les utilisateurs déficients moteurs peuvent utiliser un clavier, un contacteur, une commande vocale ou même un dispositif de suivi oculaire pour interagir avec leur ordinateur.
Tout comme les déficiences visuelles, la mobilité peut également être un problème temporaire ou situationnel: vous avez peut-être un poignet cassé dans la main de votre souris. Peut-être que le pavé tactile est cassé sur votre ordinateur portable, ou que vous roulez simplement dans un train qui tremble. De nombreuses situations peuvent entraver la mobilité d'un utilisateur. En nous assurant de répondre aux besoins de nos utilisateurs, nous améliorons l'expérience globale, à la fois pour les personnes souffrant d'un handicap permanent, mais aussi pour celles qui constatent temporairement qu'elles ne peuvent pas utiliser une interface utilisateur basée sur un pointeur.
Parfait, parlons des déficiences auditives.
Il peut s'agir de personnes très sourdes ou malentendantes. Et tout comme la vue, notre audition a tendance à se dégrader avec l'âge. Beaucoup d’entre nous utilisent des avantages communs comme les appareils auditifs pour nous aider.
Pour les utilisateurs malentendants, nous devons nous assurer que nous ne nous appuyons pas sur le son. Par conséquent, veillez à utiliser des éléments tels que des sous-titres de vidéos et des transcriptions, et à proposer une alternative si le son fait partie de l'interface.
Et comme nous l'avons vu pour les déficiences visuelles et motrices, il est très facile d'imaginer une situation dans laquelle une personne dont les oreilles fonctionnent bien bénéficierait également de ces aménagements. Beaucoup d'amis disent qu'ils adorent les sous-titres et transcriptions de vidéos, car cela signifie que s'ils sont dans un bureau ouvert et qu'ils n'ont pas d'écouteurs, ils peuvent tout de même regarder la vidéo !
Très bien, pouvez-vous nous parler des troubles cognitifs ?
Il existe un éventail de problèmes cognitifs tels que le TDA, la dyslexie et l'autisme, qui peuvent signifier que les gens veulent ou ont besoin d'accéder aux choses différemment. Naturellement, les espaces dédiés à ces groupes sont extrêmement variés, mais nous trouvons certainement des chevauchements avec d'autres zones, comme l'utilisation de la fonctionnalité de zoom pour faciliter la lecture ou la concentration. De plus, ces utilisateurs peuvent trouver qu'une conception vraiment minimale fonctionne mieux, car elle minimise les distractions et la charge cognitive.
Je pense que tout le monde peut comprendre le stress lié à une surcharge cognitive. Il est donc évident que si nous créons quelque chose qui fonctionne bien pour une personne souffrant d'une déficience cognitive, nous créerons quelque chose qui sera agréable pour tout le monde.
Alors, comment résumeriez-vous votre vision de l'accessibilité ?
Si vous examinez le large éventail de capacités et de handicaps des individus, vous pouvez constater que concevoir et créer des produits exclusivement destinés aux personnes dont la vision, l'audition, la dextérité et la cognition sont parfaites semblent incroyablement étroites. C'est une approche risquée, car nous créons une expérience plus stressante et moins facile à utiliser pour tout le monde, et pour certains utilisateurs, une expérience qui les exclut complètement.
Dans cet entretien, Victor a identifié un éventail de déficiences et les a classées dans quatre grandes catégories: visuelle, motrice, audition et cognitive. Il a également souligné que chaque type de déficience pouvait être liée à la situation, temporaire ou permanente.
Examinons quelques exemples concrets de problèmes d'accès et voyons où ils se situent dans ces catégories et ces types. Notez que certaines déficiences peuvent appartenir à plus d'une catégorie ou d'un type.
| Scénario | Temporaire | Permanente | |
|---|---|---|---|
| Visuel | commotion cérébrale | cécité | |
| Moteur | tenant un bébé | bras cassé, RSI* | RSI* |
| Audition | bureau bruyant | ||
| Cognitif | commotion cérébrale |
Lésions répétitives en cas d'élongation: par exemple, syndrome du canal carpien, tennis au coude, doigt à gâchette
Étapes suivantes
Nous avons déjà parcouru beaucoup de chemin. Vous avez découvert
- ce qu'est l'accessibilité et pourquoi elle est importante pour tous
- les WCAG et la checklist d'accessibilité de WebAIM
- différents types de déficiences que vous devriez considérer
Dans la suite de ce guide, nous aborderons les aspects pratiques de la création de sites Web accessibles. Nous allons organiser cet effort autour de trois domaines principaux:
Focus: nous verrons comment créer des éléments pouvant être utilisés avec un clavier plutôt qu'une souris. C'est important, bien sûr, pour les utilisateurs souffrant de troubles moteurs, mais cela garantit également le bon fonctionnement de votre interface utilisateur pour tous les utilisateurs.
Sémantique: nous veillerons à exprimer notre interface utilisateur de manière efficace et compatible avec diverses technologies d'assistance.
Styles: nous examinerons la conception visuelle et étudierons quelques techniques pour rendre les éléments visuels de l'interface aussi flexibles et utilisables que possible.
Chacun de ces sujets peut couvrir un cours entier. Nous n'aborderons donc pas tous les aspects de la création de sites Web accessibles. Cependant, nous vous fournirons suffisamment d'informations pour vous lancer et vous indiquerons des endroits intéressants pour en savoir plus sur chaque sujet.