Aller au contenu principal

Accessibilité par éléments

Attention !

Focus​

  • Toujours utiliser outline ! Passer par box-shadow rend le focus inaccessible (l'ombre peut être enlevée dans les thèmes Windows high contrast par exemple)
  • Si besoin on peut utiliser :focus-visible pour rajouter le style au focus uniquement à l’utilisation du clavier et pas au clic souris
  • Le comportement :focus-visible est déjà celui par défaut dans certains navigateurs actuellement
  • Standardiser les styles au focus sur tous les composants !

Boutons​

(En savoir plus : Créer des boutons accessibles et dignes de ce nom en HTML)

  • Un bouton = un bouton (pas une div, pas un span, pas un a)
  • Pas de <a> à l'intérieur d'un bouton ! Si on veut un lien on utilise <a>, sinon on fait un bouton avec <button>

Boutons icône​

(En savoir plus : Accessible Icon Buttons)

  • Pour labelliser le bouton icône, plusieurs options :
    • Avoir un texte dans le DOM du <button> mais le cacher visuellement avec une classe
    • Labelliser le bouton avec un élément "hidden", et le référencer avec aria-labelledby. Attribut "hidden" permet de cacher du lecteur d'écran + visuellement (très bon support navigateur)
    • Utiliser aria-label sur le bouton ou sur le svg (le svg ne doit pas avoir aria-hidden si on met le label dessus)
    • Utiliser title
  • Le mieux est d'éviter de labelliser le svg, et de plutôt labelliser le bouton

Exemple : 

<button class="menu-trigger" aria-labelledby="button-label">
    <span id="button-label" hidden>Menu</span>
    <svg aria-hidden="true" focusable="false" width="24" height="28" viewBox="0 0 24 28">
    </svg>
</button>

Headings​

(En savoir plus : Subheadings, subtitles, alternative titles and taglines in HTML)

  • <hgroup> : 0 à x éléments <p>, suivi d'un heading (h1, h2, ....), suivi de 0 ou x éléments <p>
  • pb d'accessibilité : hgroup a un rôle générique qui est ignoré dans l'arbre d'accessibilité
  • Ne pas utiliser h1-h6 pour les sous-titres et titres alternatifs ! Utiliser l'élément <p>

Images​

  • Remplir l'attribut alternatif pour toutes les images, vidéo et audio (alt="")
  • la bonne pratique est de cacher le svg avec aria-hidden="true" et focusable="false" pour éviter qu'on puisse se focus dans l'icône (même si on a un "bouton icône")

Inputs​

Label associé​

Un input doit impérativement avoir un label associé ! (ou <legend> si on est sur un groupe d'inputs). Le placeholder ne fait pas office de label !

Les seuls inputs qui n'ont pas besoin de labels sont : les type="submit" ou type="button".

Soit :

  • Association implicite (l'input est à l'intérieur du label)
  • Association explicite (attribut "for" et "id") => recommandée car mieux comprise par tous les lecteurs d'écrans

Quelques points d'attention :

  • Un label ne doit pas non plus contenir de contenu interactif (un lien par exemple). Il devrait être mis à côté.
  • Si on a plus d'infos à mettre (ex une description en plus du label), on va utiliser aria-describedby sur l'input qui va référencer l'id du span de description
  • La convention est :
    • Label à droite quand on a des radio boutons / checkbox
    • Label à gauche quand on a des inputs

Radio​

  • L'idéal est d'avoir une target de 44px pour le bouton radio

Landmark​

header, footer,...

  • header et footer sont des landmarks seulement s'ils sont à l'intérieur de <body>. S'ils sont à l'intérieur d'un élément de section, ils deviennent le header/footer de cet élément (ex: article, aside, main, nav, section)

Tables​

  • Utiliser <th> pour les headers
  • Préciser si c'est un header de ligne ou de colonne : scope="col" ou scope="row" sur le <th>
  • Eviter de changer le "display"
  • Responsive : avoir une scroll horizontale/verticale

Texte​

  • Aligner le texte à gauche et non justifié (pour les personnes avec dyslexie)
  • Utiliser des polices sans serif pour les dyslexiques

Divers​

  • Ajouter la langue utilisée dans le dom sur l'élément html (lang="en") : cela va changer la prononciation du lecteur
  • La balise title n'est généralement pas exposée, donc il ne faut pas mettre d'infos supplémentaires uniquement dans le title
Dernière mise à jour le