Hi everybody,
today I want to share with you my technic to manipulate vocal
synthesis on web pages with javascript.
I am shure that many of you have tryed to figure out how to do it. But
as you know javascript in web page is limited and doesn't allow
external API's calls. So it is directly impossible to manipulate NVDA
or jaws by javascript. That's why I have try, and I fink succeed to
find a way to do it indirectly.
The trick is to create in the page an invisible div that will receive
the text to read, and next to adjust aria tags which will force the
current screen reader to read it.
So, below I will paste two public declarations and the function
saystring that you can simply copy and insert into the javascript of
your web page.
And you will simply have to call the saystring function with the text
you want to be read in parameter.
Begin javascript
// global variable needed by the saystring function
var compteur_yyd = 0;
var message_yyd = "";
function saystring(s){
// say a text by the rulling vocal synthesis
// using aria accessibility tags
var elm;
var difference = "";
// we search for our customized text zone
elm = document.getElementById("message_to_say_yyd");
if(elm == null){ // not yet existing
// we create that area
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%;");
// we add it at the end of the body tag
document.getElementsByTagName("body")[0].appendChild(elm);
} // end if customized text area not yet exists
// if the zone is known
if(elm != null){
// if the new message is identical to the formal one
if(s == message_yyd){
// we will add something different
compteur_yyd = compteur_yyd + 1;
difference = " " + "-".repeat(compteur_yyd);
} else { // it's really a new message
compteur_yyd = 0; // réinitialisation
} // end if
elm.innerText = "";
elm.innerText = s + difference;
} // end if elm not null
// we record the message in memory
message_yyd = s
} // end function
End javascript
Actually, there could be some improvement to this method. But the
essential by my point of view is already there.
I fink the possibilities are enormous. We can for example imagine
grease monkey or tamper monkey scripts to improve accessibility on web
pages as it is done by scripts for screen readers.
Or otherwize, import it on game online for better notifications of blind users.
I've already work myself on a web script to improve accessibility for
blind people with web videos. It is called HTML5VideoAccessibility.
Globally it add shortcuts to the web browser in order to manipulate a
video player when it is detected on the current web page.
For example: to say the current status, to move the position, to
increase or decrease speed or volume
It takes into account pages with several video players and allow the
user to toggle between them.
For web site like youtube, it will automatically read the title when
the video change, or by the key escape allow you to cross the
advertizing video.
You can look at, download or contribute to the project
HTML5VideoAccessibility on github by this link:
https://github.com/mailtolocom/html5VideoAccessibility
Well, I hope that will be useful to someone.
Yannick Youalé
From Cameroon, in central Africa.
** To leave the list, click on the immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]
** If this link doesn't work then send a message to:
** program-l-request@xxxxxxxxxxxxx
** and in the Subject line type
** unsubscribe
** For other list commands such as vacation mode, click on the
** immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx with the Subject:- faq