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)

© CentroMode, 2024. Tous droits réservés.