Pourquoi et comment améliorer l’accessibilité des sites WordPress.

Retour sur ma conférence au WordCamp Paris 2015.

Accueil > Articles > WordPress > Pourquoi et comment améliorer l’accessibilité des sites WordPress.
24 octobre 2015WordPress

Ma première intervention au WordCamp Paris

Après avoir participé à plusieurs WordCamp à Paris, j’ai trouvé cette communauté sympathique et bienveillante, avide d’apprendre et de partager autour de WordPress. Étant spécialiste en accessibilité numérique et ne voyant pas ce thème abordé dans les précédentes conférences, je me suis enfin décidée et et fin 2014, j’ai proposer un atelier accessibilité au WordCamp Paris 2015. Ma proposition a été acceptée et c’est avoir une grande joie mêlée d’un grand stress que j’ai animé ce premier  atelier. Tout c’est bien passé ! Ouf ! Et les retours étaient vraiment très positifs.

Comprendre les besoins des utilisateurs

J’ai commencé par rappeler les besoins et les problèmes rencontrés par les internautes en situation de handicap auditif, cognitif, moteur et visuel, sans oublier les séniors. J’ai ensuite présenté les solutions proposées par WordPress pour améliorer les sites Web et j’ai abordeé les thèmes accessibility-ready.

Je vais maintenant détailler deux problèmes rencontrés par certains internautes, la navigation sans souris et l’utilisation d’un lecteur d’écran pour remplir un formulaire :

La navigation sans souris

Les personnes qui ne peuvent pas utiliser une souris naviguent à l’intérieur d’un site Web uniquement au clavier, en utilisant la touche TAB et Shift TAB pour se déplacer vers le prochain ou le précédent élément interactif recevant le focus clavier, et en utilisant également les flèches de direction.

Pour illustrer les problèmes rencontrés par ces personnes, j’ai pris l’exemple d’un page Web avec la présence d’une vidéo dans la partie centrale de la page, dédiée au contenu éditorial. Sans lien permettant d’aller directement au contenu de la page, l’utilisateur a du appuyer 51 fois sur la touche TAB, puis 1 fois sur la touche ENTER pour lancer la vidéo. Avant d’atteindre le bouton d’activation de la vidéo, l’utilisateur a du parcourir tous les liens du menu principal et ceux du menu secondaire. Avec la présence d’un lien d’évitement, l’utilisateur a grandement allégé sa tâche puisqu’il a appuyé 1 fois sur la touche TAB, 1 fois sur la touche ENTER pour activer le lien « Aller au contenu », 4 fois sur la touche TAB pour passer le fil d’Ariane et attendre le bouton d’activation de la vidéo et 1 fois sur la touche ENTER  pour lancer la vidéo.

Le remplissage d’un formulaire avec un lecteur d’écran

Les personnes en situation de handicap visuel utilisent des aides techniques matérielles et logicielles pour pouvoir naviguer à l’intérieur d’un site Web. Pour permettre à ces internautes une utilisation optimale du site Web, celui-ci doit être compatible avec ces aides techniques.

Pour illustrer les problèmes rencontrés par les utilisateurs de lecteur d’écran (aveugles, très malvoyants), permettant une vocalisation du contenu de la page et offrant des fonctionnalités de navigation plus aisée, j’ai pris l’exemple d’un formulaire non accessible, j’ai fait écouter aux participants la vocalisation effectuée par le lecteur d’écran NVDA avec une navigation au clavier, puisqu’un utilisateur non .

Voici le formulaire :

Voici le fichier audio :

Et voici la transcription textuelle :

  • TAB édition obligatoire avec auto complétion vide
  • TAB édition obligatoire avec auto complétion vide
  • TAB édition avec auto complétion vide
  • TAB édition multi-lignes vide
  • TAB cliquable envoyer bouton

Chaque champ de formulaire est associé visuellement à une étiquette mais le lecteur d’écran ne la restitue pas car les étiquettes ne sont pas associées à leur champ dans le code html.

Après avoir corrigé le formulaire, voici ce que NVDA vocalise :

Et voici la transciption textuelle :

  • TAB votre nom édition obligatoire avec auto complétion vide
  • TAB votre email édition obligatoire avec auto complétion vide
  • TAB sujet édition obligatoire avec auto complétion vide
  • TAB votre message édition multi-lignes obligatoire vide
  • TAB cliquable envoyer bouton

Avec un formulaire correctement codé, l’utilisateur de lecteur d’écran peut sans blocage remplir son formulaire.

Pour aller plus loin

Les slides


La vidéo