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)

Demande d'information

Merci, votre demande à bien été envoyée.