Chargements asynchrones de données : bonnes pratiques pour l’accessibilité numérique

Problématique et impacts d’un chargement asynchrone de données pour l’accessibilité

Certaines pages proposent une fonctionnalité permettant de charger des contenus supplémentaires par l’action sur un bouton, ce qui peut prendre plus ou moins de temps, mais évite un rechargement complet de la page.

Il peut s’agir par exemple du chargement d’offres supplémentaires sur une page listant les offres d’emploi, comme c’est le cas sur la page des offres de stages du ministère de la Défense : 

Une image de chargement (type spinner) est affichée visuellement le temps du chargement.

Or, il est absolument nécessaire de restituer correctement ces évènements aux technologies d’assistance afin que tous les utilisateurs et utilisatrices en situation de handicap soient en mesure de comprendre et d’interagir avec la page, notamment les personnes aveugles et plus généralement celles qui utilisent un lecteur d’écran et naviguent au clavier.

Comment charger des données de manière asynchrone de manière accessible ? Solutions proposées

Pour rendre accessible ce type de chargement asynchrone, la solution à privilégier consiste à utiliser le rôle ARIA progressbar.

Néanmoins, dans certains cas, ce type d’adaptation peut s’avérer compliqué, voire impossible à mettre en œuvre à cause des technologies utilisées par la page ou de la charge de travail que cela demanderait.

Une implémentation conforme au RGAA consiste alors à s’assurer que toutes les informations soient correctement restituées à l’aide de la méthode suivante.

Au moment du chargement

Insérer un passage de texte indiquant le statut de l’action (par exemple : « Chargement en cours ») n’importe où dans le DOM. Ce texte devra posséder la propriété ARIA role="alert".

Par exemple : <p id="loading" class="sr-only" role="alert">Chargement en cours</p>

Note : on peut ajouter la classe .sr-only au texte pour qu’il soit invisible à l’écran, mais qu’il puisse quand même être lu par les technologies d’assistance. On s’assure ainsi que ce texte soit bien restitué aux personnes utilisant un lecteur d’écran, sans affecter l’interface visuelle de la page.

À la fin du chargement

1. Repositionner le focus sur le 1er élément ajouté de la liste (par exemple sur le titre qui devra alors avoir la propriété tabindex="-1" afin de lui permettre de prendre le focus).
2. Supprimer le passage de texte (id="loading") indiquant le chargement en cours.

Conclusion

Cette solution simple permet de rendre accessibles les chargements de données asynchrones aux personnes utilisant un lecteur d’écran, en les avertissant qu’un chargement est en cours et en re-positionnant leur focus au bon endroit sur la page.

Ainsi, on facilite leur navigation dans la page et on s’assure qu’elles aient bien accès à l’information au moment où le chargement se produit.

Références

• RGAA 4 : Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
• Technique WCAG ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

Ressources

• Reprise de focus et accessibilité par Jean-Pierre Villain (Access42)
• Utiliser le rôle progressbar — MDN