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

devLAB Montréal c’est maintenant parti!

Je l’avait annoncé. Nous avons particié a des événements, joints d’autres. Maintenant, depuis Janvier 2011, à tous les mercredis, nous vous invitons a vous joindre a nos rencontres. Donc,depuis cinq semaines maintenant nous hébergeons au public nos ateliers de travail qu’on appelait nos GeekNights maintenant surnommé devLAB.

Comment devLAB a commencé?

Tout a commencé en 2006. Le besoin est né après plusieurs mois à discuter de technologie a deux (avec Etienne) a prendre une bière au 3Brasseurs et de parler de binaire, netmask… vous savez, des trucs de Geeks. Nous avons joins notre  vieil ami Stephan et nous avons officialisé le pacte que nous avons tenu de 2006-2009. Une fois par semaine tous les Mercredis soir nous suivions ce concept:

  1. Se rencontrer peu importe la charge de travail au bureau
  2. Faire avancer une idée
  3. Utiliser quelque chose qu’on a jamais utilisé avant
  4. Pratiquer les méthodologies pour prendre les plis qu’on ne pouvait pas toujours prendre au bureau

Parfois nous en faisions des CodeFests qui duraient une fin de semaine complète. D’autres fois nous invitions des amis a jouer avec nous sur des sujets divers.

Continue reading “devLAB Montréal c’est maintenant parti!”

Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page

Il s’agit d’un plugin que j’ai fait, en PHP 4 il y a deux ans pour MODx 0.9.6.3, pour un site web et je pense qu’il vaut la peine que je partage le code avec la communauté.

Le plugin sert a entourer des mots définis dans un fichier CSV (séparé par des virgules) dans le contenu qui est retourné par le CMS.

 

LA SITUATION

Lorsque je travaillait sur ce site web, mon employeur et mon collègue nous étions donné comme objectif de paufiner l’Ergonomie et l’Accessibilité du contenu. Ce qui est dommage c’est qu’il n’a jamais été évalué par AccessibilitéWeb. J’ai pourtant reçu la formation pour évaluer les sites… mais je préfère, personnellement, programmer des applications.

 

Continue reading “Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page”

Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité

En rédigeant Accessibilité et les liens externes j’ai réalisé qu’il y aurait trop de matière pour être lue dans un simple billet. Alors j’ai décidé d’aller plus en profondeur et de le documenter.

Cet article explique une méthode simple pour transformer tout les liens d’une page qui vont à l’extérieur du site courrant en ajoutant un icône approprié et la note disant qu’une fenêtre s’ouvrira

Continue reading “Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité”

Accessibilité et les liens externes

Il existe plusieurs normes en accessibilité du web qui demande des choses qu’on ne prend pas nécessairement le temps de faire.

Soit que c’est pas manque de temps, trop de choses à penser, ou on n’y pense simplement pas.

Dans cet article j’exprime mon opinion sur l’importance (du point de vue utilisabilité) des icones de liens extérieurs. Plus tard je montrerai une méthode pour automatiser [EDIT 2009-08-23] J’ai documenté comment faire dans Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité.

Continue reading “Accessibilité et les liens externes”