Améliorer l'accessibilité des pages Web
Cet ensemble de documents est une version au format texte d'une partie du contenu couvert par les Cours Udacity sur Accessibilité. Plutôt qu'une transcription directe du cours vidéo, il s'agit d'une concis et concis des principes et des pratiques d'accessibilité, en utilisant les du contenu original comme base.
Résumé
- Découvrez ce que signifie l'accessibilité 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 pour créer des images soignées des expériences d'accessibilité.
Comprendre l'accessibilité, sa portée et son impact peut vous aider à améliorer le Web développeur. L'objectif de ce guide est de vous aider à comprendre comment optimiser sites web accessibles et utilisables pour tous.
"Accessibilité" peut être difficile à épeler, mais il ne doit pas nécessairement être difficile à accomplir. Ce guide vous explique comment réussir facilement améliorer l'accessibilité avec un minimum d'effort, la façon dont vous pouvez utiliser ce qui est intégré pour HTML pour créer des interfaces plus accessibles et plus robustes, et comment en tirer parti des techniques avancées pour créer des expériences accessibles et soignées.
Vous constaterez également que bon nombre de ces techniques vous aideront à créer des interfaces plus agréables et faciles à utiliser pour tous les utilisateurs, pas seulement pour ceux qui ont handicapées.
Bien entendu, de nombreux développeurs n'ont qu'une compréhension floue de la notion d'accessibilité quelque chose à voir avec les contrats gouvernementaux, les listes de contrôle les lecteurs, n'est-ce pas ? ... et de nombreuses idées reçues circulent. Par exemple, de nombreux développeurs estiment que gérer l'accessibilité les obligera de choisir entre créer une expérience agréable et attrayante, et une est maladroite et moche, mais accessible.
Bien sûr, ce n'est pas le cas du tout. Nous allons donc clarifier ce point sur autre chose. Qu'entendons-nous par accessibilité ? apprendre ?
Qu'est-ce que l'accessibilité ?
De manière générale, lorsque nous parlons d'un site accessible, nous entendons que son sont disponibles, et leurs fonctionnalités peuvent être exploitées, littéralement toute personne. En tant que développeurs, on peut facilement supposer que tous les utilisateurs peuvent voir et utiliser clavier, souris ou écran tactile, et peut interagir avec le contenu de la page de la même manière que vous. Cela peut conduire à une expérience qui fonctionne bien pour certaines personnes, mais crée des problèmes allant de simples ennuis aux spectacles qui font sensation pour autres.
L'accessibilité fait donc référence à l'expérience d'utilisateurs qui pourraient être une plage étroite des valeurs "typiques" qui peut accéder à des éléments ou interagir avec eux différemment de ce à quoi vous vous attendiez. Plus précisément, elle concerne les utilisateurs ayant 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, atteints d'une déficience physique, tout le monde peut s'identifier à l'expérience d'utilisation à laquelle nous n'avons pas accès pour d'autres raisons. Avez-vous déjà eu un en utilisant un site pour ordinateur sur un téléphone mobile, ou si le message "Ce contenu non disponible dans votre région, ou impossible de trouver un menu familier sur une tablette ? Ce sont tous des problèmes d'accessibilité.
Au fur et à mesure que vous en apprendrez plus, vous constaterez que la résolution des problèmes d'accessibilité dans ce un sens plus large et plus général améliore presque toujours l'expérience utilisateur pour tout le monde. 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 souffrant d'une déficience visuelle.
- Avec des étiquettes à gauche et des champs à droite, les gens à les associer, et presque impossible pour quelqu'un qui a besoin de zoomer pour utiliser la page ; Imaginez que vous regardez ceci sur un téléphone et que vous deviez faire un panoramique pour comprendre ce qui va avec quoi.
- La fenêtre "Vous souvenir des détails ?" n'est pas associé à la case à cocher. d'appuyer ou de cliquer uniquement sur le petit carré au lieu de cliquer simplement sur le libellé ; également, quelqu'un qui utilise un lecteur d'écran aurait du mal à comprendre l'association.
Agitons à présent notre baguette d'accessibilité pour voir le formulaire avec les problèmes résolus. Nous allons assombrir le texte, modifier la conception pour que les étiquettes soient à proximité des éléments étiquetés et fixer l'étiquette à associer la case à cocher afin que vous puissiez la cocher en cliquant également sur le libellé.
Laquelle préféreriez-vous utiliser ? Si vous avez dit "la version accessible", vous êtes sur votre pour comprendre l'un des principes fondamentaux de ce guide. Souvent, il s'agit d'une un blocage complet pour quelques utilisateurs est aussi une difficulté pour beaucoup d'autres, donc en résoudre le problème d'accessibilité, vous améliorez l'expérience de tous les utilisateurs.
Règles pour l'accessibilité des contenus Web
Dans ce guide, nous ferons référence aux Règles pour l'accessibilité du contenu Web (WCAG) 2.0, un ensemble de consignes et les bonnes pratiques élaborées par des experts de l'accessibilité "accessibilité" signifie 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 aide à garder à l'esprit que ce n'est pas parce que quelque chose est perceptible avec un sens, comme la vue, cela ne signifie pas que tous les utilisateurs peuvent le percevoir.
Utilisable: les utilisateurs peuvent-ils utiliser des composants d'interface utilisateur et parcourir le contenu ? Pour Par exemple, un élément qui nécessite une interaction de survol ne peut pas être utilisé quelqu'un qui ne peut pas utiliser une souris ou un écran tactile.
Compréhensible: les utilisateurs peuvent-ils comprendre le contenu ? Les utilisateurs peuvent-ils comprendre l'interface et est-elle suffisamment cohérente pour éviter toute confusion ?
Robust: le contenu peut-il être utilisé par une grande variété de user-agents. (navigateurs) ? Est-il compatible avec les technologies d'assistance ?
Si les WCAG offrent un aperçu complet de ce que signifie pour les contenus accessible, cela peut aussi être un peu écrasant. Pour limiter ce risque, Le groupe WebAIM(Web Accessibility in Mind) a décomposé les directives sur les WCAG dans une liste de contrôle facile à suivre, ciblée en particulier pour le contenu Web.
Checklist WebAIM peut vous donner un bref résumé général de ce que vous devez implémenter, tout en ou vers la spécification WCAG sous-jacente si vous avez besoin d'une définition.
Avec cet outil à la main, vous pouvez tracer une orientation pour votre travail d'accessibilité et être sûr que, tant que votre projet répond aux critères décrits, votre les utilisateurs doivent bénéficier d'une expérience positive en accédant à votre contenu.
Comprendre l'expérience des utilisateurs diversité
Quand on s'intéresse à l'accessibilité, il est utile de comprendre auprès d'un large éventail d'utilisateurs dans le monde et sur les types de sujets d'accessibilité les affecter. Pour approfondir le sujet, suivez cette session instructive de questions/réponses avec Victor Tsaran, gestionnaire de programme technique chez Google, qui est totalement aveugle.
Quel est votre travail chez Google ?
Chez Google, mon travail consiste à m'assurer que nos produits fonctionnent pour tous nos d’utilisateurs diversifiés, indépendamment de leur handicap ou de leurs capacités.
Quels types de déficiences les utilisateurs ont-ils ?
Quand on pense aux types de déficiences qui rendraient difficile pour à un tiers d'accéder à notre contenu, de nombreuses personnes s'imaginent immédiatement comme moi. Cette déficience peut être très frustrante, impossible d'utiliser de nombreux sites Web.
De nombreuses techniques modernes sur le Web ont pour effet regrettable de créer des sites qui ne fonctionnent pas bien avec les outils utilisés par les utilisateurs non-voyants pour accéder Web. Cependant, l'accessibilité ne se limite pas à cela. Nous avons trouvé les déficiences se répartissent en quatre grandes catégories: visuelle, motrice, auditive et cognitive.
Examinons-les un par un. Pouvez-vous donner des exemples de déficiences visuelles ?
Les déficiences visuelles peuvent être classées en plusieurs catégories: les utilisateurs malvoyants, comme moi, pourraient utiliser un lecteur d’écran, le braille ou une combinaison des deux.
Il est en fait assez inhabituel d'avoir littéralement aucune vision, mais quand même, il y a de fortes chances que vous connaissiez ou avez rencontré au moins une personne qui ne peut pas voir à tout. Cependant, il existe aussi de nombreux problèmes de déficience visuelle utilisateurs.
C'est un nombre très vaste, d'une personne comme ma femme, qui n'a pas de cornée. Ainsi, même si elle peut voir les choses, elle a du mal à lire l'impression. et est considéré comme aveugle d'un point de vue légal (pour les personnes pauvres et doit porter des lunettes de vue très résistantes.
L'éventail est vaste, ce qui signifie que vous disposez d'un vaste choix d'hébergements. que les personnes appartenant à cette catégorie utilisent: d'autres utilisent un lecteur d'écran ou une plage braille. (j'ai même entendu parler d'une femme qui lit le braille affiché à l'écran parce qu'il est plus facile à voir que le texte imprimé), ou ils peuvent utiliser la synthèse vocale sans la fonctionnalité de lecteur plein écran, ou ils peuvent utiliser un la loupe qui effectue un zoom avant sur une partie de l'écran, ou ils peuvent simplement utiliser zoomer sur leur navigateur pour agrandir toutes les polices. Il peut également utiliser des options à contraste élevé comme un mode Contraste élevé du système d'exploitation, un extension de navigateur à contraste élevé ou un thème à contraste élevé pour un site Web.
Beaucoup d'utilisateurs utilisent même une combinaison de ces éléments, comme mon amie Laura qui utilise un mode Contraste élevé, zoom du navigateur et synthèse vocale.
Beaucoup de gens peuvent s'identifier à une déficience visuelle. Pour commencer, nous tous la vision se dégrade en vieillissant. Même si ce n'est pas déjà fait, il y a de fortes chances que vous ayez entendu vos parents s'en plaindre. Mais beaucoup de les personnes éprouvent la frustration de sortir leur ordinateur portable par une fenêtre ensoleillée et découvre soudain qu'il ne peut rien lire ! Ou toute personne qui a déjà eu un laser ou qui doit simplement lire quelque chose à l'autre bout de la pièce aurait pu utiliser l'un des hébergements que j'ai mentionnés. Je pense qu'il est assez facile pour les développeurs d’avoir une certaine empathie pour les utilisateurs malvoyants.
Oh, et je ne devrais pas oublier de mentionner les personnes qui ont une mauvaise vision des couleurs. Environ 9% des hommes ont une certaine forme de déficience de la vision des couleurs ! Plus environ 1% des les 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 déficiences motrices ?
Oui, des troubles moteurs ou de la dextérité. Ce groupe s'étend sur l'ensemble de ceux qui préfèrent ne pas utiliser la souris, parce qu'ils ont peut-être un RSI ou quelque chose d'autre et qui le trouvent douloureux, pour quelqu'un qui peut être physiquement paralysé. et ont une amplitude de mouvement limitée pour certaines parties de leur corps.
Les personnes souffrant de déficiences motrices peuvent utiliser un clavier, un contacteur, des commandes vocales ou même un appareil de suivi oculaire pour interagir avec son ordinateur.
Tout comme pour les déficiences visuelles, la mobilité peut être un problème temporaire ou problème: vous avez peut-être un poignet cassé sur la main de votre souris. Peut-être que le pavé tactile est cassés sur votre ordinateur portable, ou si vous roulez simplement dans un train tremblant. Il peut y avoir dans de nombreuses situations où la mobilité de l'utilisateur est entravée, et en s'assurant que nous pouvons améliorer l'expérience globale, tant pour les personnes une déficience permanente, mais aussi pour toute personne qui découvre temporairement qu'elle ne peut pas utiliser une UI basée sur des pointeurs.
Parfait, parlons des déficiences auditives.
Il peut s'agir de personnes particulièrement sourdes ou malentendantes. Et tout comme la vue, notre audition a tendance à se dégrader avec l'âge. Beaucoup d'entre nous utilisent les affordances comme les appareils auditifs pour nous aider.
Pour les utilisateurs malentendants, nous devons nous assurer que nous ne nous appuyons pas sur Assurez-vous donc d'utiliser des éléments comme les sous-titres et les transcriptions de vidéos, et en fournissant une sorte d'alternative, si le son fait partie de l'interface.
Et comme nous l'avons vu avec les déficiences visuelles et motrices, il est très facile d'imaginer une situation dans laquelle quelqu'un dont les oreilles fonctionnent bien bénéficierait de ces des hébergements. Beaucoup de mes amis disent qu'ils adorent les vidéos des sous-titres et des transcriptions, car cela signifie que s'ils se trouvent dans un bureau ouvert, et n'a pas apporté son casque, il peut tout de même regarder la vidéo !
Très bien, pouvez-vous nous en dire un peu plus sur les déficiences cognitives ?
Il existe un large éventail de troubles cognitifs tels que le TDA, la dyslexie et l'autisme, ce qui peut signifier que les gens veulent ou ont besoin d’accéder aux choses différemment. La les hébergements pour ces groupes sont naturellement extrêmement variés, mais nous peuvent se chevaucher avec d'autres zones, comme l'utilisation de la fonction de zoom facilitent la lecture ou la concentration. De plus, ces utilisateurs peuvent s'apercevoir une conception minimale fonctionne mieux car elle minimise les distractions et la charge cognitive.
Je pense que tout le monde peut s'identifier au stress d'une surcharge cognitive, c'est donc que si nous créons quelque chose qui fonctionne bien pour une personne Nous allons créer quelque chose qui soit agréable pour tous les utilisateurs.
Alors, comment résumeriez-vous votre vision de l'accessibilité ?
Lorsque vous examinez le large éventail de capacités et de handicaps que les personnes pourriez avoir, vous pouvez voir que la conception et la construction de produits uniquement pour les personnes qui la vision, l'ouïe, la dextérité et la cognition semblent incroyablement étroites. C'est presque une auto-défaut, parce que nous créons un monde plus stressant et moins une expérience utilisateur agréable pour tout le monde, et pour certains utilisateurs, en créant une expérience qui les exclut en fait complètement.
Dans cette interview, Victor a identifié une série de déficiences et les a placées en quatre grandes catégories: visuelle, motrice, ouïe et cognitive. Il a également souligné que chaque type de déficience peut être lié à la situation, temporaire ou permanente.
Examinons quelques exemples concrets de troubles de l'accès et voyons où ils appartiennent à ces catégories et types. Notez que certaines déficiences peuvent appartenir à plusieurs catégories ou types.
| Localisation | Temporaire | Permanente | |
|---|---|---|---|
| Visuel | commotion cérébrale | cécité | |
| Moteur | tenir un bébé dans ses bras | bras cassé, RSI* | RSI* |
| Audition | bureau bruyant | ||
| Fonctions cognitives | commotion cérébrale |
Accident vasculaire cérébral à répétition: par exemple, syndrome du canal carpien, coude de tennis, déclencheur doigt
Étapes suivantes
Nous avons déjà parcouru pas mal de choses ! Vous avez lu concernant
- ce qu'est l'accessibilité et pourquoi elle est importante pour tous
- les WCAG et la checklist d'accessibilité WebAIM
- différents types de déficiences que vous devriez prendre en compte
Dans la suite de ce guide, nous aborderons les aspects pratiques de la création des sites Web accessibles. Nous organiserons cet effort autour de trois sujets principaux domaines:
Ciblage: nous verrons comment construire des choses qui peuvent être utilisées avec un clavier au lieu d'une souris. C'est important pour les utilisateurs souffrant de handicaps moteurs, bien sûr, mais cela garantit également que votre interface utilisateur est en bonne forme pour tous les utilisateurs.
Sémantique : à présenter notre interface utilisateur d'une manière efficace de diverses technologies d'assistance.
Style: nous prenons en compte les éléments visuels et nous étudierons quelques techniques permettant de créer les éléments visuels une interface aussi flexible et utilisable que possible.
Chacun de ces sujets peut couvrir un cours entier, nous ne couvrirons donc pas tous les aspects de la création de sites Web accessibles. Cependant, nous vous fournirons suffisamment d'informations pour et vous indiquer des sites intéressants pour en savoir plus sur chaque sujet.