Screenreader zum Lesen neuer Inhalte, die mit JavaScript hinzugefügt wurden

Wenn eine web-Seite wird geladen, Bildschirm-Lesegeräte (wie die eine, die kommt mit OS X, oder JAWS unter Windows) Lesen Sie den Inhalt der gesamten Seite. Aber sagen, deine Seite ist dynamisch, und wie Benutzer die Durchführung einer Aktion, neuer Inhalt Hinzugefügt wird, zu der Seite. Der Einfachheit halber, sagen Sie, dass Sie eine Meldung angezeigt, die irgendwo in einem <span>. Wie kann man die screen-reader zu Lesen, dass die neue Nachricht?

InformationsquelleAutor der Frage avernet | 2010-09-08

  1. 25

    Den WAI-ARIA - Spezifikation definiert mehrere Möglichkeiten, um die Bildschirm-Leser können die "Uhr" ein DOM-element. Die besten unterstützte Methode ist die aria-live - Attribut. Es hat Modi offpolite,assertive und rude. Je höher der Grad der Durchsetzungsfähigkeit, desto wahrscheinlicher ist es, zu unterbrechen, was derzeit gesprochen wird, durch die screen-reader.

    Im folgenden wurde getestet mit NVDA unter Firefox 3 und Firefox 4.0b9:

    <!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
  <button onclick="$('#statusbar').html(new Date().toString())">Update</button>
  <div id="statusbar" aria-live="assertive"></div>
</body>

    Das gleiche kann man erreicht mit WAI-ARIA Rollen role="status" und role="alert". Ich habe Berichte von Inkompatibilität, aber nicht in der Lage gewesen, um Sie zu reproduzieren.

    <div id="statusbar" role="status">...</div>

    InformationsquelleAutor der Antwort Courtney Christensen

  2. 0

    Hier ist eine angepasste real-world-Beispiel -- das up-level-markup bereits umgesetzt, die aus einer ungeordneten Liste mit links in einem select-Menü per JS. Der code ist viel komplexer und offensichtlich nicht berücksichtigt werden konnte, in seiner Gesamtheit, so erinnern diese müssen überdacht werden, die für die Produktion verwenden. Für das select-Menü vorgenommen werden, die Tastatur möglich, registrierten wir das keypress - & onchange-Ereignisse und feuerte den AJAX-Aufruf, wenn der Benutzer mit Registerkarten aus der Liste (Vorsicht vor browser-Unterschiede im timing der onchange-Ereignis). Das war ein schwerer PITA zugänglich zu machen, aber es IST möglich.

      // 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)
    });
}

    InformationsquelleAutor der Antwort Marcy Sutton

Schreibe einen Kommentar