Aller au contenu
Création de sites web en éco-conception

Blog > accessibilité > ~

18/04/2019 Accessibilité d'une pagination en Ajax

Avec ce post, j'espère montrer que l'accessibilité est souvent très "accessible" aux développeurs ! En l'occurrence, rendre une pagination en Ajax accessible ne requiert pas trois, pas deux, mais bien un seul attribut HTML.

Ce qui suit n'a été testé qu'avec le lecteur d'écran NVDA, mais avec succès :)

Prenons comme exemple le contenu paginé suivant (sur fond bordeaux) et sa pagination (les numéros de page):

Page 1, générée à 11:49:15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.

Grâce à la technologie Ajax, actionner un numéro de page ne fait pas recharger toute la page web. C'est confortable pour l'utilisateur et bénéfique d'un point de vue de l'éco-conception. En effet, il est aisé de mettre en cache le contenu paginé pour le réafficher ensuite, sans nouvel appel Ajax (en atteste, ci-dessus, l'heure à laquelle chaque page a été générée).

Que fait un internaute lorsqu'il actionne un lien de la pagination ?

  • Cas 1. Internaute sans handicap visuel. Son regard ainsi que le curseur de sa souris sont situés au niveau de la pagination. Après avoir cliqué sur un lien, il déplace le regard jusqu'au contenu paginé.
  • Cas 2. Internaute utilisant un lecteur d'écran. À l'aide de son clavier, il a mis le focus sur un lien de la pagination. Une fois qu'il a actionné ce lien, c'est encore à l'aide du clavier qu'il doit se déplacer vers le contenu paginé, mais encore faut-il savoir où il se trouve ! Cet internaute devra-t-il reparcourir intégralement la page web pour espérer le trouver ?

Heureusement, non. La solution à ce sérieux problème d'accessibilité est l'attribut aria-live.

aria-live

Lorsqu'une balise HTML a l'attribut aria-live, l'internaute est averti dès que son contenu change.

Pour connaître les différentes propriétés de cet attribut, consultez Zones live ARIA (site Mozilla).

Avec NVDA, et grâce à aria-live, le contenu paginé est lu automatiquement après avoir actionné un lien de la pagination.

Aller plus loin

Pour améliorer l'accessibilité d'une pagintion, deux autres attributs ARIA peuvent être utilisés :

  • aria-current pour indiquer quelle est la page active (le lecteur d'écran dira alors "active" lorsqu'on le lien de la page active prendra le focus)
  • aria-label pour donner aux boutons un nom compréhensible ; par exemple, pour qu'un bouton soit lu "Page précédente" plutôt que "signe inférieur".

Code HTML simplifié

<section> <div class="content" aria-live="polite"><!--ICI, CONTENU CHARGÉ EN AJAX--></div> <nav> <a href="javascript:void 0" aria-label="Page précédente"><</a> <a href="javascript:void 0" aria-label="Page suivante">></a> <a href="javascript:void 0" aria-label="Page 1" aria-current="page">1</a> <a href="javascript:void 0" aria-label="Page 2">2</a> <a href="javascript:void 0" aria-label="Page 3">3</a> <a href="javascript:void 0" aria-label="Page 4">4</a> </nav> </section>

Les boutons "précédent" et "suivant"… sont côte à côte dans le DOM alors que dans l'exemple ils apparaissent séparés par les numéros de page (< 1 2 3 4 5 >). Ce n'est pas une erreur !

Les placer côte à côte dans le DOM permet de faciliter la navigation des internautes utilisant le clavier.

Quant à leur rendu visuel, il est modifié en CSS (positionnement "absolu" pour ne rien vous cacher).

Commentaires

Ajouter un commentaire :