Astuce concernant le rafraîchissement du contenu des pages avec utilisation d'AJAX en exemple

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 :)