Salut les mecs,
Aujourd'hui je vous soumet ma solution quant à un besoin d'accessibilité
que nous avons évoqué par le passé. Il s'agit de la manipulation de la
synthèse vocale active en javascript lorsqu'on est sur une page web.
L'une des pistes envisagée était de jongler avec les balises aria pour
forcer la synthèse vocale active à lire un texte qu'on aurait inséré à
un endroit plus ou moins fictif de la page html courante.
Hé bien, je pense l'avoir réussi.
L'astuce a consisté à préparer une balise html div et à y employer
l'attribut aria-live qui, pousse les logiciels de revue d'écran à
surveiller tout changement de texte dans la balise qui la contient.
Le code javascript que je vous collerai plus bas comprend:
* des déclarations de variables globales; (que je n'ai pas pu éviter)
* la fonction saystring;
* et une initialisation de la fonction saystring (dont le rôle est
essentiellement la création de la zone de texte masquée devant recevoir
les textes à faire lire)
Attention voici lle code:
Début du code javascript
// variables globales nécessaires à la fonction
// de lecture par la synthèse vocale
var compteur_yyd = 0;
var message_yyd = "";
function saystring(s){
// fait dire du texte par la synthèse vocale active
// en utilisant les balises d'accessibilité aria.
var elm;
var difference = "";
// on trouve la zone d'affichage du texte
elm = document.getElementById("message_to_say_yyd");
if(elm == null){ // non encore existante
// on crée cette zone
elm = document.createElement("div");
elm.setAttribute("id", "message_to_say_yyd");
elm.setAttribute("aria-live", "assertive");
elm.setAttribute("aria-atomic", "true");
elm.setAttribute("style", "width: 0%;height: 0%;");
// on l'ajoute à la fin de la balise body
document.getElementsByTagName("body")[0].appendChild(elm);
} // fin si zone du texte non encore existante
// si la zone a été repérée
if(elm != null){
// si le nouveau message est strictement identique à l'ancien
if(s == message_yyd){
// on va forcer un élément de différence
// parce que sinon, le changement ne sera pas détecté
compteur_yyd = compteur_yyd + 1;
difference = " " + "-".repeat(compteur_yyd);
} else { // c'est vraiment un nouveau message
compteur_yyd = 0; // réinitialisation
} // fin si
// on change le texte dans la balise div apprétée
elm.innerText = "";
elm.innerText = s + difference;
} // fin si elm non null
// enregistrement du dernier message en mémoire
message_yyd = s
} // end function
// initialisation de la fonction de lecture par synthèse vocale
saystring("");
Fin du code javascript
Comme application, j'ai déjà testé cette fonction dans mon script grease
monkey d'accessibilisation de la lecture des vidéo web pour les
déficients visuels, et c'est tout bonnement génial.
Quelques améliorations encore, et je vous reproposerai bientôt cet autre
script grease monkey.
Puisse cela être utile à quelqu'un !
Yannick Daniel Youalé
La programmation est une religion. Aimez-la, ou quittez-la.
www.visuweb.net
Progliste :
Pour se d�sinscrire de la liste :
mailto:[email protected]?subject=unsubscribe
Pour voir les archives de la liste :
http://www.mail-archive.com/[email protected]/
Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 MO
Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je
vous r�pondrez en priv�.
