Accessibilité (base)
3 highly effective ways to audit a web page for Accessibility
Aria-label
Sur les boutons et les liens n'ayant aucun texte (ex : seulement un svg). Avoir un texte explicatif et ne pas utiliser simplement des "bouton" et "lien" comme texte. Ne pas oublier la pagination d'un blogue (liens).
<button type="button" aria-label="Panneau de recherche"></button>
<a href="#scroll-to" data-scroll-to data-scroll-offset="-60" aria-label="Défiler jusqu'au contenu"></a>
Rel
Sur les liens avec un target blank seulement (ce que wordpress fait dans le wysiwyg). Prendre note du détail du aria-label.
<a href="https://inclusive-components.design/" target="_blank" rel="noreferrer noopener">Inclusive Components</a>
<a href="https://www.facebook.com/stereodesignweb/" target="_blank" rel="noreferrer noopener" aria-label="Suivez-nous sur Facebook (s'ouvre dans un nouvel onglet)">icon</a>
Principes de base
- Seulement un H1
- Order logique des headings
- ALT sur les images (ne pas laisser vide sauf si ce n'est que pour du visuel (ex : parallax))
- Aucun input seul, toujours avoir un label avec celui-ci (voir _mixins.scss pour des styles pour cacher le label, mais le garder accessible pour les screen readers)
- Avoir un attribut "for" pour le label et "id" pour l'input; inscrire une valeur identique aux deux (select et textarea également)
- Évitez les attributes vides (ex: "class", "cols" ou "maxlength" n'ayant aucune valeur sur un textarea par exemple)
- Dans le meilleur des mondes, garder le même HTML (dans le sens qu'il arrive qu'on cache et affiche des sections en desktop ou mobile)
Ressources (pour les spécifications plus strictes)
- Accessibility resources (github)
- Google Lighthouse (outils tests)
- Web Accessibility Checker (outils tests)
- A community-driven effort to make web accessibility easier
- A11Y Style Guide
- Wuhcag WCAG 2.0 checklists
- Medium.com tag