Text to Speech Navigation Accessibility - ResponsiveVoice.JS AI Text to Speech

Accessibility Keyboard Access and Navigation with Text To Speech

This example shows how to add keyboard accessibility to any website or web application. Use the Tab key to navigate to different elements of the page and hear them spoken.

This is example code to add just before the closing body tag.

Here we show 3 areas where spoken text can assist navigation.
1. Says the text within the A tag “Link to….” when tab moves focus to any link
2. Says the name of the button “… button” when tab moves focus to an input button
3. Says “Text input ….” if any placeholder text is present in the textarea it is spoken also

These are just the beginning of what is possible to aid in accessibility for keyboard navigation with text to speech.
For example other page elements could be supported and spoken Links could use title and alt tags.

Example Code

$('a').keyup(function(e) {
    console.log('keyup called');
    var code = e.keyCode || e.which;
    if (code == '9') {
    responsiveVoice.cancel();
     responsiveVoice.speak('Link 2 '+$(':focus').text());
    }
 });
$('button').keyup(function(e) {
    console.log('keyup called');
    var code = e.keyCode || e.which;
    if (code == '9') {
     setTimeout(responsiveVoice.speak($(':focus').text()+' button'),1000);
    }
 });
$('textarea').keyup(function(e) {
    console.log('keyup called');
    var code = e.keyCode || e.which;
    if (code == '9') {
    responsiveVoice.cancel();
     responsiveVoice.speak('Text Input '+$(':focus').attr('placeholder'));
    }
 });

$('a').keyup(function(e) {

console.log('keyup called');

var code = e.keyCode || e.which;

if (code == '9') {

responsiveVoice.cancel();

responsiveVoice.speak('Link 2 '+$(':focus').text());

}

});

$('button').keyup(function(e) {

console.log('keyup called');

var code = e.keyCode || e.which;

if (code == '9') {

setTimeout(responsiveVoice.speak($(':focus').text()+' button'),1000);

}

});

$('textarea').keyup(function(e) {

console.log('keyup called');

var code = e.keyCode || e.which;

if (code == '9') {

responsiveVoice.cancel();

responsiveVoice.speak('Text Input '+$(':focus').attr('placeholder'));

}

});

Keywords: text to speech accessibility, keyboard navigation, keyboard access, disability