Accessibilité web : les principes de base

Publié par Fabrice le 22 juillet 2021, temps de lecture estimé : 7 minutes Webmastering

Accessibilité web : les principes de base

Avant d'envisager une mise en conformité stricte et rigoureuse aux WCAG ou au RGAA, voici quelques éléments de base à vérifier pour améliorer l'accessibilité d'un site web.

Regarder la Vidéo sur YouTube

Respect de la sémantique HTML

  • Même si cela fait partie des bonnes pratiques, il est bon de rappeler qu'une page HTML doit obligatoirement contenir le doctype, la langue, le charset et le titre (unique) de la page
  • La structure de la page en elle-même doit-être cohérente et doit respecter la sémantique : balises header, nav, main, etc
  • Le contenu doit-être hiérarchisé à l'aide des balises Hn
  • Spécifier les changements de langue
  • Utiliser les listes ordonnées ou non ordonnées pour les listes !
  • Mais aussi : des abréviations explicitées, pas d'écriture tout en majuscule et pas de texte justifié

Contraste des couleurs

  • Le contraste entre le texte et le fond doit-être suffisant : ratio de 3:1 au minimum - utiliser un outil comme Colour Contrast Analyser
  • Le contraste concerne également les éléments d'interface comme les boutons, les liens, les pictogrammes, etc
  • Ne pas utiliser la couleur seule pour véhiculer une information - exemple : un champ de formulaire entouré en rouge ne suffira pas, il faut également un texte informatif

Aide à la navigation

  • Ajouter des liens d'évitements
  • La navigation au clavier doit suivre le contenu affiché à l'écran
  • Dans le but de faciliter la navigation au clavier, il ne faut pas supprimer le focus sans prévoir une alternative - un exemple de gestion du focus en CSS
  • Un plan du site est fortement conseillé
  • Les liens doivent avoir un intitulé explicite (pas de "cliquez ici")
  • Les éléments interactifs doivent-être contrôlables au clavier (menu déroulant, carrousel, etc) - les contenus animés doivent pouvoir être mis en pause
  • Les boutons et éléments cliquables doivent être suffisamment gros pour être utilisable avec un écran tactile (24 par 24 pixels CSS au minimum, 44 par 44 pixels CSS recommandé) exception faite des liens inclus dans un texte
  • Même si cela va de soi aujourd'hui : le site doit être responsive (la base est de 320 pixels)
  • Éviter les sites "sapin de Noël"
  • Éliminer les éléments superflus, les choses simples sont souvent les meilleurs !

Image

  • Si elles ne sont pas décoratives, les images doivent avoir une véritable description (cela vaut pour les réseaux sociaux : Twitter, Facebook, Pinterest et Linkedin permettent de décrire les images) - l'attribut alt doit être présent
  • Les images complexes de type graphique, infographie, etc, doivent être entièrement décrite, soit à l'aide de figcaption, soit de manière adjacente à l'image
  • Les images animées sont à éviter

Vidéo, audio et document

  • Ajouter des sous-titres pour sourds et malentendants (incluant bruits, voix off, etc) aux vidéos en dur ou en utilisant un fichier externe (.srt, WebVTT, etc)
  • Mettre à disposition une transcription textuelle des contenus vidéo et audio
  • Les documents en téléchargement doivent aussi être accessibles (PDF, ODT, DOC, etc)

Formulaire

  • Ajouter des balises label aux éléments de formulaire en les liant à l'aide de for et id
  • Spécifier les champs obligatoires ainsi que le format attendu (exemple : date au format JJ/MM/AAAA) et tout autre information qui peut s'avérer utile pour remplir le champ
  • Utiliser les attributs disponibles comme required, autocomplete, pattern, etc
  • Afficher les erreurs et spécifier le type d'erreur commise

Exemple de champ de formulaire :

<label for="name">Nom * : </label>
<span id="namehelp">70 caractères maximum</span>
<input type="text" name="name" id="name" value="" maxlength="70" aria-describedby="namehelp" autocomplete="name" required="required">