L'obtention d'un lecteur d'écran pour lire de nouveaux contenus ajoutés avec JavaScript

Ici est un modèle adapté de l'exemple du monde réel -- ce niveau d'annotation a déjà été converti à partir d'une liste non ordonnée avec des liens dans un menu de choix via JS. Le vrai code est beaucoup plus complexe et ne peut évidemment pas être inclus dans son intégralité, donc n'oubliez pas ceci devra être repensée pour une utilisation en production. Pour le menu select pour être rendues accessibles au clavier, nous avons enregistré la pression de touche & événements onchange et tiré de l'appel AJAX lorsque les utilisateurs onglets hors de la liste (méfiez-vous de navigateur différences dans le calendrier de l'événement onchange). Ce fut une grave PITA à rendre accessible, mais c'EST possible.

  // HTML
<!-- select element with content URL -->
<label for="select_element">State</label>
<select id="select_element">
<option value="#URL_TO_CONTENT_PAGE#" rel="alabama">Alabama</option>
</select>
<p id="loading_element">Content Loading</p>
<!-- AJAX content loads into this container -->
<div id="results_container"></div>
//JAVASCRIPT (abstracted from a Prototype class, DO NOT use as-is)
var selectMenu = $('select_element');
var loadingElement = $('loading_element');
var resultsContainer = $('results_container');
//listen for keypress event (omitted other listeners and support test logic)
this.selectMenu.addEventListener('keypress', this.__keyPressDetector, false);
/* event callbacks */
//Keypress listener
__keyPressDetector:function(e){
//if we are arrowing through the select, enable the loading element
if(e.keyCode === 40 || e.keyCode === 38){
if(e.target.id === 'select_element'){
this.loadingElement.setAttribute('tabIndex','0');
}
}
//if we tab off of the select, send focus to the loading element
// while it is fetching data
else if(e.keyCode === 9){
if(targ.id === 'select_element' && targ.options[targ.selectedIndex].value !== ''){            
this.__changeStateDetector(e);
this.loadingElement.focus();
}   
}
}
//content changer (also used for clicks)
__changeStateDetector:function(e){
//only execute if there is a state change
if(this.selectedState !== e.target.options[e.target.selectedIndex].rel){
//get state name and file path
var stateName = e.target.options[e.target.selectedIndex].rel;
var stateFile = e.target.options[e.target.selectedIndex].value;
//get the state file
this.getStateFile(stateFile);
this.selectedState = stateName;
}
}
getStateFile:function(stateFile){
new Ajax.Request(stateFile, {
method: 'get',
onSuccess:function(transport){      
//insert markup into container
var markup = transport.responseText;
//NOTE: select which part of the fetched page you want to insert, 
//this code was written to grab the whole page and sort later
this.resultsContainer.update(markup);
var timeout = setTimeout(function(){
//focus on new content
this.resultsContainer.focus();
}.bind(this), 150);
}.bind(this)
});
}