Guide du concepteur sur les bases de l'accessibilité du Web

Le Web devrait être un endroit où tout le monde peut accéder au même contenu depuis n'importe où dans le monde. Les techniques réactives ont beaucoup évolué conceptions indépendantes de l'appareil. Mais qu'en est-il conceptions indépendantes de l'accessibilité?

L'accessibilité Web existe depuis des années, mais sa mise en œuvre nécessite de nouvelles avancées technologiques et un développement Web. Beaucoup de développeurs veulent aider, mais il est difficile de comprendre comment concevoir pour l'accessibilité, car il y a tellement de pièces mobiles. Cela inclut du texte à contraste élevé, des pages audio pour les non-voyants, un média optimisé et des solutions de secours pour les navigateurs autres que JS / CSS..

Dans cet article, je traiterai des bases de la conception de l'accessibilité, de ce que c'est, de ce qu'elle vise à résoudre et des étapes à suivre pour commencer. Notez qu'il s'agit d'un sujet incroyablement détaillé et qu'il vous faudra des mois, voire des années de pratique pour bien le comprendre. Mais les avantages en valent la peine et tous vos projets Web laisseront à chaque visiteur une impression durable de contenu accessible..

Introduction à l'accessibilité

De manière générale, l’accessibilité est l’idée de créer du contenu afin que il peut être consommé par n'importe qui. Cela peut inclure des personnes aveugles qui ne savent pas lire, et cela peut inclure des personnes ayant un handicap physique qui ne peuvent pas utiliser une souris ou un clavier (ou les deux).

Mais cela peut aussi inclure des personnes avec légères lacunes en vision. Cela pourrait inclure des personnes avec problèmes de dyslexie ou de compréhension en lecture. En fait, l'idée de “accessibilité web” comprend toutes les altérations possibles qui pourraient affecter la manière dont une personne interagit avec ou consomme un site Web.

Le plus important est peut-être ce que l’accessibilité Web peut offrir, comme décrit ici dans une définition de Wikipedia:

Cependant, Anne Gibson affirme dans son article List Apart que la définition de Wikipedia est trop vague, et ce n’est pas juste sur les personnes handicapées. C'est vraiment à propos de toutes les personnes sur le Web du monde entier que peut ne pas avoir un accès optimal à Internet.

De nombreux développeurs pensent que l'accessibilité est réservée aux personnes aveugles qui ne savent pas lire. Mais il existe en réalité quatre catégories principales d’accessibilité Web:

Visuel - basse vision ou mauvaise / pas de vue
Auditif - malentendants ou sourds
Cognitif - difficulté à comprendre ou à consommer des informations
Moteur - problèmes d'accessibilité physique pouvant nécessiter des périphériques d'entrée spéciaux tels que des claviers ou des programmes de commande vocale

Ces catégories ont chacune des techniques étendues qui sont changer aussi rapidement que les standards web. Mais il y a un sentiment de stabilité avec ces normes ratifiées dans les WCAG (directives pour l'accessibilité aux contenus Web).

Certains sites, comme la loi oblige les institutions fédérales à suivre ces directives. Ils postulent à l'international via le W3C.

Jetons un coup d'œil à la bureaucratie derrière l'accessibilité Web, puis explorons quelques conseils de conception applicables..

Le W3C et la conception accessible

Il y en a plusieurs acronymes liés à l'accessibilité Web. Celles-ci peuvent être compliquées si vous êtes nouveau sur le sujet, mais une fois simplifiées, j'espère qu'elles auront plus de sens..

W3C (World Wide Web Consortium) - Groupe international définissant des normes Web pour les protocoles, les langues et les réglementations. Toutes les directives officielles d'accessibilité relèvent de cette organisation.
WAI (Initiative d'accessibilité Web) - Un programme officiel qui couvre tout ce qui concerne l'accessibilité. Ce terme générique contient toutes les règles, directives et techniques d’accessibilité moderne.
WCAG (Directives pour l'accessibilité au contenu Web) - Ensemble de normes et de règles pour aider les concepteurs à évaluer leurs sites Web en fonction du niveau d'accessibilité..
ARIA (Applications Internet riches accessibles) - Une norme spécifique définissant comment construire des applications riches accessibles qui reposent sur JavaScript / Ajax et des technologies similaires. En savoir plus à ce sujet dans ce post de Anna Monus.

WAI contient d’autres directives, notamment: UAAG pour les agents utilisateurs et UNE ÉTIQUETTE pour les outils de création Web. Pour le moment, vous devriez être particulièrement intéressé par les suggestions faites par le WAI et par les directives du jeu de règles du WAI sous le nom de WCAG..

Ce billet du W3C sur les personnes handicapées est une excellente ressource pour en apprendre davantage sur la façon dont les personnes handicapées accèdent à Internet. Il peut être difficile de comprendre tous les problèmes complexes, et encore moins de comprendre comment les résoudre. Mais la meilleure source provient de personnes confrontées quotidiennement à ces problèmes.

Un autre sujet important que vous devez comprendre est la conformité WCAG. Cela concerne le niveau d'accessibilité d'un site web couvrant une grande variété de facteurs. Les niveaux sont basés sur la conformité avec un système de notation de A, AA et AAA. Vous pouvez vérifier cela avec un outil de vérification de l'accessibilité Web. Le meilleur score est AAA.

Pour en savoir plus sur ces instructions, consultez l'article Introduction à la compréhension de WCAG 2.0 du W3C. Consultez également ces liens connexes pour plus de détails:

WCAG 2.0 simplifié
Section 508 Performances WCAG

Étapes de la conception accessible

Je recommande fortement de visiter le site Web du projet A11Y pour des conseils pratiques sur l'accessibilité. A11Y (qui est aussi un numonyme) est un projet open source gratuit hébergé sur GitHub., techniques d'offre pour la conception Web accessible.

Vous pouvez parcourir leur liste de contrôle d'éléments d'accessibilité, ou même un ensemble de modèles de conception d'éléments tels que des listes déroulantes, des onglets, des accordéons, des boutons et des fenêtres modales (entre autres éléments)..

Il est difficile d'apprendre tout cela et de le mettre en œuvre en même temps. Faites-le étape par étape et soyez prêt à faire plus de recherches si vous êtes confus.

Découvrez les conseils et astuces de l'A11Y pour commencer. Vous rencontrerez des suggestions spécifiques telles que des liens vers le contenu et des schémas de couleurs à contraste élevé. Ces techniques ont chacune leur propre niveau de détail; la mise en œuvre consiste donc principalement à tester pour voir ce qui fonctionne..

Pensez aux utilisateurs aveugles pouvant utiliser un lecteur de contenu automatisé. Ils peuvent également disposer d'un traducteur audio ou même d'un clavier spécial pour naviguer sur le Web à l'aide de touches plutôt que d'une souris. C'est pourquoi HTML sémantique approprié (regardez cet article) est si important avec des propriétés comme Tabindex et clé d'accès.

Si vous souhaitez plonger, envisagez de choisir un thème prêt pour l’accessibilité. Vous pouvez étudier l'architecture et personnaliser le design pour l'adapter à votre projet.

Outils de test d'accessibilité

Si vous souhaitez commencer, il vous suffit de choisir un domaine d'accessibilité et de l'essayer. Ensuite, vous pouvez utiliser des outils de test pour évaluer votre niveau de réussite..

Il est à noter que ce processus peut être frustrant. Il y a tellement de choses à considérer, et les directives du WCAG sont si difficiles à comprendre que vous risquez de vous retrouver avec une surcharge d'informations..

L'important est de continuer à avancer. Choisissez un domaine d'accessibilité et concentrez-vous sur celui-ci. Ensuite, utilisez ces outils pour vous aider à peaufiner et améliorer votre travail.

Par exemple, vous pouvez essayer de travailler avec les spécifications de contraste du WCAG pour améliorer la lisibilité. Une fois que vous avez choisi vos couleurs, utilisez simplement ce vérificateur de taux de contraste gratuit pour voir si elles fonctionnent ensemble..

Malheureusement, les directives WCAG 2.0 sont si confuses que vous pouvez avoir des difficultés à comprendre les exigences. Mais plus vous essayez, plus vous apprendrez et plus vous comprendrez.

Pour tester un site déjà en ligne, consultez WAVE. C'est un vérificateur visuel gratuit qui affiche des erreurs, des alertes, des problèmes de contraste et d'autres spécificités d'un site Web. Vous aurez une vue visuelle et une liste de problèmes dans la barre latérale..

Il y a une autre application gratuite sur le site Web Cynthia Says qui peut Consultez les sites Web pour connaître les taux de réussite de WCAG de A, AA, AAA, et article 508 pour la conformité du gouvernement.

Et si vous êtes en open source, jetez un œil à ces Outils de test d'accessibilité gratuits sur GitHub.

HTML CodeSniffer
Outil de test d'accessibilité automatisé
Validateur WCAG

Extensions du navigateur

Les add-ons de navigateur fournissent probablement les méthodes les plus rapides et les plus faciles pour les tests d'accessibilité. Vous pouvez les exécuter depuis n’importe quel ordinateur sur n’importe quel site Web pour obtenir des résultats réellement utiles..

AInspector for Firefox est considéré comme un outil indispensable pour l'accessibilité. Cela vérifie tout et est beaucoup plus complet que le testeur WAVE.

Les utilisateurs de Mozilla pourraient également aimer le vérificateur de contraste WCAG, qui est également un complément gratuit..

Les utilisateurs de Chrome ne disposent pas de AInspector, mais des outils de développement d'accessibilité créés officiellement par Google. Cela ajoute des outils supplémentaires dans la fenêtre de l'inspecteur pour vérifier les instructions d'accessibilité.

Les utilisateurs de Chrome disposent également de vérificateurs de luminosité pour le contraste des couleurs et de quelques autres extensions gratuites..

Malheureusement, je n'ai pas trouvé grand chose pour les utilisateurs de Safari, mais j'ai trouvé une extension pour Opera qui vérifie la conformité à la WCAG 2.0. Si vous êtes prêt à rechercher Google suffisamment fort, vous trouverez peut-être plus d'outils dans le commerce..

Lectures complémentaires

Si vous envisagez sérieusement d'apprendre l'accessibilité Web, préparez-vous à une longue route. Ce n'est pas facile mais c'est très gratifiant.

Vous devez maintenant mieux comprendre la définition actuelle de l'accessibilité Web, son existence et des détails mineurs sur ce que les développeurs sont censés faire pour améliorer leurs sites Web. La prochaine étape consiste à approfondir la recherche et la pratique pour intégrer ces principes à votre flux de travail..

Consultez les articles suivants pour plus d’informations et assurez-vous de consulter les directives du WCAG si vous souhaitez obtenir des informations directement de la source..

Comment améliorer l'accessibilité aux tables HTML avec le balisage
Conception accessible pour les utilisateurs handicapés
6 conseils pour améliorer l'accessibilité des sites Web
Assurez-vous que votre site est accessible aux malvoyants