Parmi les listes de courriels que je suis, Accesstech, une question a attiré mon attention et j’ai pensé partager ici la réponse que j’ai donnée avec un exemple en appui.
Concernant le rafraîchissement du contenu des pages avec utilisation d’AJAX, a-t-on trouvé une solution pour
qu’un lecteur d’écran le détecte et retourne l’information à l’utilisateur ?Si non, quelles solutions alternatives avez-vous trouvées ( en dehors de recharger la page intégralement) ?
Ce que j’ai répondu
Je ne suis pas expert, mais je pense que ce qui arrive et modifie le DOM de façon asynchrone en regard de l’accessibilité, demande au minimum:
1. Faire une ecriture en creeant les elements DOM, puis les inserer
Avec jQuery, par exemple, il est possible de créer un élément DOM de cette façon. Mais attention, l’élément existe dans le document qu’au moment de son insertion via la commande element.append()
.
<script>
// dom ready...
var newNode = JQuery('<div id=patate>Allo</div>');
</script>
2. Assurer de donner le focus sur le nouvel element inséré
Une fois l’élément construit, il est possible d’ajouter des attributs et évidemment de l’introduire, comme suit:
<script>
// ...
newNode.appendTo('body');
newNode.trigger('focus');
// ...
</script>
Ici, l’élément est inséré à l’intérieur du body
, puis un événement focus
est appelé. Notez ici que lancer un événement de cette façon peut être fait pour a peu près n’importe quel type d’événement, on peut même créer nos propres événements
3. Bonus: Faire la muse a jour de façon Asynchrone avec jQuery 1.7+ avec le concept de ‘promise’:
Étant donné la nature d’AJAX; dans le sens que la resource demandée n’est pas nécessairement disponible à l’exact moment où la requête est faite. jQuery a instauré un concept qui permet de travailler avec l’objet demandé, et agir au moment de son arrivée: promise.
Dans ce sens, il est maintenant recommandé d’utiliser un callback et le déclarer a la fin de l’action ajax, comme suit:
<script>
var promiseCallback = function(data){ jQuery('#patate').replaceWith(jQuery(data)).trigger('focus'); };
// assumant que c'est du html reçu de /allo.html
var configObj ={dataType: 'html'};
jQuery.ajax('/allo.html', configObj).done( promiseCallback );
</script>
Finalement
Ce qui est souvent oublié c’est que $.ajax.done()
est executé après avoir reçu ses donnees.
De cette facon, le refraichissement se fait quand elle est prete et le focus suivra.
Par-contre il y a des precautions a prendre: Assurez-vous que ce code est executé apres un action de l’utilisateur et non pas n’importe quand car l’evenement risque de deplacer le focus du lecteur d’ecran et perdre l’utilisateur.
Espérant que j’ai connecté quelques fils :)
Comments
renoirb
[nouveau billet] Astuce concernant le rafraichissement AJAX et l’accessibilité http://t.co/VVNzKlhgPM
dboudreau
@renoirb Tout rafraichissement de contenu accessible suppose que le lecteur d’écran obtienne la version la plus à jour du contenu.
renoirb
@dboudreau Donc, si on met a jour, puis on avertit avec un événement ‘focus’ est valide, ou overkill?
dboudreau
@renoirb C’est une question d’interprétation. Si c’est du contenu jamais vu, pas besoin d’aviser car l’utilisateur ne le connait pas encore.
dboudreau
@renoirb Si c’est du contenu sur lequel on est déjà passé, l’annonce de l’actualisation préviendra les risques de confusions (ex. tabs).
dboudreau
@renoirb Ton actualisation serait idéalement faite en utilisant aria par contre, pas en scriptant des messages d’avis supplémentaires.
dboudreau
@renoirb Si on parle d’aviser d’un changement de contexte ailleurs dans l’interface, alors oui, un évent onfocus pourrait très bien aider.
renoirb
Hé @dboudreau j’aimerai ton avis sur ce billet (si tu veut bien) https://t.co/xrs0g89Zdr
renoirb
Ooh, @dboudreau j’avait totalement pas pensé utiliser ARIA. C’est dans ma liste à lire donc :)
goetsu
@renoirb à noter que déplacer le focus sur un élément qui ne peut pas le recevoir ne servira à rien et il faut un retour visuel aussi
renoirb
Merci @goetsu je vais réviser aussi le détail important de l’applicabilité de l’événement ‘focus’ j’avait oublié ça aussi alors :/
renoirb
Merci @goetsu je vais réviser aussi le détail important de l’applicabilité de l’événement ‘focus’ j’avait oublié ça aussi alors :/