Améliorer l'accessibilité des pages Web
Cet ensemble de documents est une version au format texte 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é, basé sur le contenu original du cours.
Résumé
- Découvrez ce que l'accessibilité signifie et comment elle s'applique au développement Web.
- Découvrez comment 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 mince affaire. Dans ce guide, vous découvrirez comment obtenir des résultats faciles à mettre en œuvre afin d'améliorer l'accessibilité avec un minimum d'efforts. Vous découvrirez également 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 afin de créer des expériences accessibles et soignées.
Vous constaterez également que bon nombre de ces techniques vous aident à créer des interfaces plus agréables et faciles à utiliser pour tous les utilisateurs, et pas seulement pour les personnes handicapées.
Bien sûr, de nombreux développeurs ont une compréhension floue de ce que signifie l'accessibilité, en lien avec les contrats gouvernementaux, les checklists et les lecteurs d'écran, n'est-ce pas ? ... et beaucoup d'idées reçues circulent. Par exemple, de nombreux développeurs estiment que gérer l'accessibilité les obligera à choisir entre créer une expérience agréable et attrayante et une expérience peu intuitive et moche, mais accessible.
Ce n'est évidemment pas du tout le cas, 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, vous pouvez facilement partir du principe que tous les utilisateurs peuvent voir et utiliser un clavier, une souris ou un écran tactile, et interagir avec le contenu de votre page de la même manière que vous. Cela peut aboutir à une expérience qui fonctionne bien pour certaines personnes, mais qui engendre des problèmes allant de simples ennuis à des problèmes majeurs pour d'autres.
L'accessibilité fait donc référence à l'expérience des utilisateurs qui peuvent se trouver en dehors de la plage étroite de l'utilisateur "classique", et qui peuvent accéder ou interagir avec des éléments différemment de ce à quoi vous vous attendiez. Plus précisément, elle concerne les utilisateurs souffrant d'un certain handicap ou handicap. 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 ayant une déficience physique, nous pouvons tous comprendre l'expérience d'utilisation d'une interface qui ne nous est pas accessible 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 familier 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 il est presque impossible pour une personne qui a besoin de zoomer pour utiliser la page. Imaginez que vous regardez la page sur un téléphone et que vous deviez faire un panoramique pour comprendre quoi.
- Le libellé "Mémoriser les informations ?" 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 aura du mal à déterminer l'association.
Agitons maintenant notre baguette d'accessibilité pour afficher 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, et 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 le libellé.
Lequel préféreriez-vous utiliser ? Si vous avez répondu "la version accessible", vous êtes sur le point de comprendre l'un des principes fondamentaux de ce guide. Souvent, un obstacle total pour quelques utilisateurs s'avère aussi pénible 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 rassemblées par des experts en accessibilité pour expliquer ce que signifie "accessibilité" de manière méthodique.
Les WCAG s'articulent autour de quatre principes, souvent désignés par l'acronyme POUR:
Perceptible: les utilisateurs peuvent-ils percevoir le contenu ? Cela nous permet de garder à l'esprit que ce n'est pas parce que quelque chose est perceptible avec un sens, comme la vue, 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, une personne qui ne peut pas utiliser la souris ni l'écran tactile ne peut pas exécuter un élément nécessitant une interaction de survol.
Compréhensible: les utilisateurs peuvent-ils comprendre le contenu ? Les utilisateurs peuvent-ils comprendre l'interface ? Sont-elles suffisamment cohérentes 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 s'avérer un peu accablants. Pour limiter ce problème, le groupe WebAIM(Web Accessibility in Mind) a synthétisé les consignes WCAG dans une checklist facile à suivre, spécialement conçue pour le contenu Web.
La checklist WebAIM peut vous fournir un bref résumé général de ce que vous devez implémenter, tout en fournissant un lien vers la spécification WCAG sous-jacente si vous avez besoin d'une définition étendue.
Avec cet outil, vous pouvez définir l'orientation de votre travail en matière d'accessibilité et être sûr que, tant que votre projet répond aux critères décrits, vos utilisateurs doivent pouvoir accéder à votre contenu de manière positive.
Comprendre la diversité des utilisateurs
Lorsque vous découvrez l'accessibilité, il est utile de comprendre la diversité des utilisateurs dans le monde et les types de sujets liés à l'accessibilité qui les concernent. Voici une séance de questions/réponses avec Victor Tsaran, gestionnaire de programme technique chez Google, aveugle.
Sur quoi 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.
Quels types de handicaps les utilisateurs ont-ils ?
Lorsqu'on pense aux types de handicaps qui pourraient rendre difficile l'accès à notre contenu, de nombreuses personnes se représenteraient immédiatement un utilisateur non-voyant comme moi. Et c'est vrai, cette difficulté peut vraiment rendre l'utilisation de nombreux sites Web frustrante, voire impossible.
De nombreuses techniques Web modernes ont pour effet de créer des sites qui ne fonctionnent pas bien avec les outils utilisés par les utilisateurs non-voyants pour accéder au Web. Toutefois, l'accessibilité ne se limite pas à cela. Nous pensons qu'il est utile de considérer les déficiences qui relèvent de quatre grandes catégories: visuelle, motrice, auditive et cognitive.
Passons-les en revue l'une après l'autre. Pouvez-vous me donner des exemples de déficiences visuelles ?
Les déficiences visuelles peuvent être classées en plusieurs catégories: les utilisateurs non visuels, comme moi, peuvent utiliser un lecteur d'écran, une plage braille ou une combinaison des deux.
C'est plutôt inhabituel de ne pas avoir de vision, mais il y a de fortes chances que vous connaissiez ou que vous ayez rencontré au moins une personne qui ne peut pas voir du tout. Cependant, il existe également un bien plus grand nombre d'utilisateurs atteints de déficience visuelle.
Il peut s'agir d'une personne comme ma femme, qui n'a pas de cornée. Alors qu'elle a du mal à lire le papier et qu'elle est considérée comme aveugle du point de vue légal, à quelqu'un qui n'a peut-être qu'une mauvaise vue et doit porter des lunettes très résistantes.
Il existe un large éventail de possibilités, et donc naturellement, les utilisateurs de cette catégorie ont recours à 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 à l'écran, car il est plus facile à voir que le texte imprimé), ou ils peuvent utiliser la technologie de synthèse vocale sans la fonctionnalité de lecteur d'écran complet, ou ils peuvent utiliser une loupe pour zoomer sur l'écran ou une police plus grande pour zoomer sur l'écran. Ils peuvent également utiliser des options de contraste élevé telles qu'un mode de 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 utilisent même une combinaison de ces fonctionnalités, 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 à la déficience visuelle. Pour commencer, la vision se détériore avec l'âge. Il y a donc de fortes chances que vous ayez entendu vos parents se plaindre, même si vous ne l'avez pas faite. Cependant, de nombreuses personnes éprouvent la frustration de sortir 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 subi une opération au laser ou qui doit simplement lire quelque chose de l'autre côté de la pièce a peut-être 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 n'oubliez pas de mentionner les personnes ayant une mauvaise vision des couleurs : environ 9% des hommes souffrent d'une 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 de formulaire.
Qu'en est-il des handicaps moteurs ?
Oui, des déficiences motrices ou de dextérité. Ce groupe va de ceux qui préfèrent ne pas utiliser de souris (en raison d'une présence d'une IA ou d'un autre appareil douloureux, par exemple) à ceux qui sont physiquement paralysés et qui ont une amplitude de mouvement 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 pour les déficiences visuelles, la mobilité peut également être un problème temporaire ou situationnel: par exemple, vous avez peut-être un poignet cassé de la main de la souris. Peut-être que le pavé tactile est cassé sur votre ordinateur portable, ou que vous conduisez simplement dans un train qui tremble. De nombreuses situations peuvent entraver la mobilité d'un utilisateur. En veillant à y répondre, nous améliorons l'expérience globale, à la fois pour les personnes souffrant d'une déficience permanente, mais aussi pour toute personne qui constate temporairement qu'elle ne peut pas utiliser une interface utilisateur basée sur un pointeur.
Parfait ! Parlons des troubles auditifs.
Il peut s'agir de personnes très sourdes ou malentendantes. Notre audition a tendance à se dégrader avec l'âge, comme pour la vue. Beaucoup d'entre nous utilisent des services 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 et des transcriptions de vidéos, et à fournir une alternative si le son fait partie de l'interface.
Comme nous l'avons vu avec les déficiences visuelles et motrices, il est très facile d'imaginer une situation dans laquelle une personne dont les oreilles fonctionnent correctement bénéficierait également de ces aménagements. Beaucoup de mes amis disent qu'ils adorent les vidéos avec des sous-titres et des transcriptions, car s'ils sont dans un bureau décloisonné et qu'ils n'ont pas d'écouteurs, ils peuvent tout de même regarder la vidéo !
Pouvez-vous nous parler un peu des troubles cognitifs ?
Il existe différents types de troubles cognitifs, tels que le trouble cognitif, la dyslexie et l'autisme, qui peuvent signifier que les gens veulent ou ont besoin d'accéder aux choses différemment. Bien que ces groupes s'adaptent naturellement à leur diversité, nous constatons sans aucun doute un chevauchement avec d'autres zones, comme l'utilisation de la fonctionnalité de zoom pour faciliter la lecture ou la concentration. En outre, 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 s'identifier au stress lié à la surcharge cognitive. Il est donc évident que si nous créons quelque chose qui fonctionne bien pour une personne ayant 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 que les individus peuvent avoir, vous pouvez constater que la conception et la construction de produits uniquement pour les personnes qui ont une vision, une audition, une dextérité et une cognition parfaites semblent incroyablement étroites. C'est une approche qui risque de s'auto-détruire, 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é toute une série de déficiences et les a classées en quatre grandes catégories: visuelle, motrice, audition et cognitive. Il a également souligné que chaque type de déficience peut être situationnel, temporaire ou permanent.
Étudions quelques exemples concrets de problèmes d'accès et voyons où ils se situent dans ces catégories et types. Notez que certaines déficiences peuvent appartenir à plusieurs catégories ou types.
| Scénario | Temporaire | Permanente | |
|---|---|---|---|
| Visuel | commotion cérébrale | cécité | |
| Moteur | tenant un bébé | bras cassé, RSI* | RSI* |
| Audition | bureau bruyant | ||
| Fonctions cognitives | commotion cérébrale |
Lésions répétitives en cas d'élongation: par exemple, syndrome du canal carpien, coude de tennis, doigt déclencheur
Étapes suivantes
Nous avons déjà parcouru beaucoup de chemin ! Vous avez lu des articles sur
- 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 à envisager
Dans la suite de ce guide, nous aborderons les aspects pratiques de la création de sites Web accessibles. Nous allons organiser cette initiative autour de trois domaines principaux:
Mise au point: nous verrons comment créer des éléments pouvant être utilisés avec un clavier plutôt qu'une souris. Ceci est bien sûr important pour les utilisateurs souffrant de troubles de la motricité, mais cela garantit également que votre interface utilisateur est en bon état pour tous les utilisateurs.
Sémantique: nous veillerons à présenter notre interface utilisateur d'une manière efficace et compatible avec diverses technologies d'assistance.
Style: nous examinerons la conception visuelle et étudierons quelques techniques permettant de rendre les éléments visuels de l'interface aussi flexibles et faciles à utiliser que possible.
Chacun de ces sujets pourrait remplir 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 comment en savoir plus sur chaque sujet.