Leçon 10Le processus de conception : comment faire de la place pour l'accessibilité du Web ?
- Notion 67 - Pensez à la mise en page
- Notion 68 - Comment utiliser le design pour optimiser votre contenu
- Notion 69 - Réaliser les premières maquettes
- Notion 70 - L'utilisabilité est la clé !
- Notion 71 - Structurer correctement le HTML
- Notion 72 - Votre utilisation de la langue est importante
- Notion 73 - Comment travailler avec du contenu visuel
- Notion 74 - L'importance de la navigation par clavier
- Notion 75 - Des conseils de pro universellement utiles sur le design
- Notion 76 - Les types de contenus à éviter à tout prix
- Notion 77 - Vérifiez la conformité aux normes d'accessibilité et aux meilleures pratiques.
- Notion 78 - Révision des concepts principaux
Notion 77
Vérifiez la conformité aux normes d'accessibilité et aux meilleures pratiques.
Compétences ciblées
Exercice
Dans ce court exercice, vous allez essayer de repérer les principaux problèmes d'accessibilité d'une page Web à l'aide d'outils et de directives.
Sélectionnez une page
Utilisez une page Web que vous connaissez bien pour cet exercice. Il peut s'agir du site Web de votre entreprise ou de votre école, ou de votre site d'achat préféré. Si vous ne trouvez aucun problème au cours des étapes suivantes, sélectionnez une autre page comportant plus d'éléments.
Recherchez les problèmes d'accessibilité
Vous pouvez utiliser les ressources ci-dessous pour vous aider à trouver les problèmes d'accessibilité. Vous devez garder à l'esprit les différents problèmes que vous avez vus dans les leçons précédentes car ce sont les plus courants.
Les Lignes directrices seront exhaustives, décrivant les exigences et les meilleures pratiques en matière d'accessibilité. Les Plugins de navigateur devraient être utiles pour repérer rapidement les problèmes afin de réaliser un audit rapide.
Rédigez un court rapport
Listez tous les problèmes repérés par vos plugins et les problèmes les plus récurrents qui devraient être corrigés. Cette évaluation rapide donnera un aperçu de la quantité de corrections à apporter.
Choisissez ensuite un élément particulier et essayez de proposer une solution de contournement : par exemple, vous avez repéré un élément d'interface utilisateur particulièrement mauvais, et vous pensez qu'il devrait être simplifié. Utilisez les leçons précédentes pour faire votre recommandation.
Ressources
Directives
Les directives sont exhaustives et classées par catégories. Il peut être fastidieux de les parcourir sans avoir un problème spécifique en tête, mais elles indiquent souvent la solution associée à un problème d'accessibilité.
- WCAG (https://www.w3.org/TR/WCAG21/ )
Plugins
Ces plugins sont des outils à l'intérieur de votre navigateur web pour scanner rapidement une page à la recherche de problèmes d'accessibilité : parfait pour un audit rapide !
- Wave ( https://wave.webaim.org/extension/ )
- Axe DevTools ( https://www.deque.com/axe/devtools/ )
Site web
- Le A11Y Project a conçu une checklist basée sur les directives WCAG pour vérifier si elles sont bien appliquées ou non sur une page web ( https://www.a11yproject.com/checklist/ )
Correction
À titre d'exemple, voici comment nous avons procédé à notre audit. Vérifiez en quoi il diffère de vos conclusions.
Site web examiné:
Nous avons choisi un site d'achat en ligne très connu.
Approche rapide:
Nos plugins ont détecté un très grand nombre de problèmes (~80) juste sur la page d'accueil. La moitié d'entre eux sont des problèmes de contraste de couleur, et un tiers sont de mauvais textes alternatifs pour les images.
Approche exhaustive:
Les directives WCAG sur le contraste des couleurs nous renseignent sur le rapport nécessaire entre le fond et le texte ( https://www.w3.org/TR/WCAG21/#contrast-minimum). Nous pouvons utiliser un outil en ligne pour calculer le rapport de contraste réel ( https://coolors.co/contrast-checker/112a46-acc8e5 ) et proposer de nouvelles valeurs de couleur dans notre rapport.
Les directives WCAG peuvent également nous aider à identifier d'autres problèmes sur la page Web et à proposer des solutions dans notre rapport.
Pour revoir ce que vous avez appris sur les directives WCAG, vous pouvez retourner jeter un coup d'oeil à la Leçon 8.