Les composants accessibles

Sur cet article, je me suis intéressée aux composants accessibles. Je vais traiter deux parties :

  • Comment rendre accessible les sites hébergés sous WordPress en utilisant des plugins existants destinés à l’accessibilité ?
  • Quels composants accessibles peut-on utiliser quand on développe ?

WordPress

Dans un de mes articles, pour débuter dans l’accessibilité numérique, j’avais parlé d’un plugin Tota11y qui permet de vérifier si l’accessibilité est bien mise en place sur mon site web. J’ai découvert que ce plugin est également disponible sur WordPress, ce qui permet aux créateurs de sites sous WordPress de vérifier également si leur site répond aux exigences de l’accessibilité.

Un jour, un de mes amis m’avait demandé si c’était possible de rendre accessible un site sous WordPress. Du coup, j’ai fait des recherches et j’ai découvert les possibilités qu’il y avait.

En plus de Tota11y, voici deux plugins de WordPress que j’ai trouvés et qui me semblent très prometteurs.

SOGO Accessibility

J’ai trouvé Sogo Accessibility par hasard en consultant le site I Wheel Share.

Sans coder et sans faire de CSS, Sogo propose de changer la taille de la police (l’augmenter ou la réduire) et le contraste du site (mettre le site en noir ou en V&B) pour les personnes malvoyantes et aveugles. On peut également mettre en valeur les liens. Il y a également pleins d’autres possibilités à exploiter et à découvrir.

sogo accessibilite
Capture d’écran affichant les options d’accessibilité de Sogo

WP Accessibility

WP Accessibility, qui est un peu plus complet, permet également d’améliorer l’accessibilité de votre site sous WordPress. Il propose, comme Sogo, de changer le contraste et la taille de la police du site.

wp accessibilite 1
Capture d’écran affichant les options d’accessibilité de WP Accessibility

 

Mais aussi de définir quelques autres options :

  • Ajouter une longue description des images
  • Ajouter des titres aux liens « lire la suite » dans les articles
  • Renforcer le focus sur les liens
  • et pleins d’autres…

Par exemple : En ne mettant pas de titre, le lecteur d’écran va lire plusieurs liens “lire la suite” sans savoir quel lien est associé à l’article.

Grâce à WP Accessibility, en remplissant le contenu de l’attribut title :

<a href="https://blog.goood.pro/2016/03/22/ncrafts-2k16-et-goood/" title="Lire la suite de l’article sur NCrafs 2k16 et Goood!">Lire la suite de l’article</a>

Nous voyons ici que c’est un lien pour voir la suite de l’article sur NCrafts. Le lecteur d’écran, lui, va lire l’attribut title du lien en question et va permettre à une personne aveugle ou malvoyante de savoir que c’est bien le lien vers la suite de l’article.

 

Les options proposées par WP Accessibility permettent de faciliter la navigation par clavier et la restitution de bonnes informations aux lecteurs d’écran.

wp accessibilite 2
Capture d’écran affichant les réglages d’accessibilité avec WP Accessibility

 

Et maintenant, il reste plus qu’à les utiliser sur votre site sous WordPress. 😉

Les composants d’interfaces riches accessibles

Si vous êtes développeur et que vous n’utilisez pas WordPress, vous pouvez intégrer les composants accessibles à vos développements (quel que soit le langage de programmation utilisé).

En effet, il existe les superbes composants d’interfaces riches accessibles crées par Nicolas Hoffman. Ces composants sont facilement navigables au clavier et correctement restitués sur les lecteurs d’écrans.

Carrousel

Celui qui m’a le plus marqué est le plugin « Carrousel ». J’ai remarqué qu’il y a également de plus en plus de carrousels sur les sites internets. Mais ceux-ci ne sont pas du tout accessible et très peu lisibles par les lecteurs d’écran. Nicolas a fait en sorte que son plugin le soit. Chapeau !

Autocomplete

C’est un composant qui va m’être très utile dans un de mes projets. Je me suis rendue compte, avant de trouver ce composant, qu’en utilisant un autocomplete normal, le rendu de la liste était complètement invisible sur les lecteurs d’écran. La liste affichée n’était pas du tout restituée ! C’est résolu avec le composant de Nicolas.

TabPanel

J’aime bien ce composant. J’avais fait une démonstration à mes collègues lors d’un Light’it sur l’accessibilité numérique. Je leur ai montré comment naviguer facilement avec le tabpanel rien qu’avec le clavier en faisant de la tabulation. Ils étaient scotchés.

Popups

J’ai remarqué qu’il y a de plus en plus de publicités ou des alertes qui s’affichent en popups (ou fenêtres modaux). Certes, ils sont très intrusifs mais surtout inaccessibles. Le lecteur d’écran a du mal à interpréter le contenu du popup et c’est également inaccessible avec le clavier.  Avec le composant, on va pouvoir corriger tous ces défauts.

 

Il existe encore plein d’autres composants accessibles géniaux comme l’affichage des listes dans le menu, les info-bulles, les accordéons et les régions à déplier/replier que je vous laisse découvrir.

 

N’hésitez pas à les utiliser. Ça vaut le coup. 😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s