Aria-Live = "Assertivo" non viene letto da JAWS

Question

Ciao community StackOverflow. Questa è la mia prima domanda, ma cercherò di essere il più concisa e dettagliata possibile.

Sono stato incaricato di aggiornare le nostre applicazioni Web ASP.NET per essere conforme alla sezione 508. Questo è tutto molto nuovo per me, e ho difficoltà a far funzionare le cose come previsto.

Abbiamo una pagina in cui l'utente ottiene informazioni aggiuntive su un collegamento tramite un evento onmouseover. Ovviamente questo non funziona per gli utenti non vedenti. Quindi forniamo loro un pulsante "Ulteriori informazioni" che visualizza lo stesso div "tooltip" che l'utente vedovo ottiene.

Ho aggiunto aria-live="assertive al div "tooltip" con la consapevolezza che se il div è stato nascosto quando la pagina viene caricata e visualizzata tramite il pulsante, verrà letta da Jaws. Con mio grande sgomento, questo non era il caso.

Il div tooltip assomiglia a questo:

<div id='tooltip' aria-live='assertive' style='display:none;'> 
    <span id='tooltip_message'>This is my tooltip text</span> 
</div> 

E 'dimostrato tramite l'evento click del pulsante con il seguente codice JavaScript:

function ShowTooltip(ttID) 
{ 
    var tt = $('#' + ttID); 
    tt.css('display', ''); 
} 

il tasto per visualizzare il div tooltip sembra questo:

<button id='ttBtn' onclick="ShowToolTip('tooltip'); return false;"> 
    More information 
</button> 

ho avuto successo nel far JAWS di leggere il tooltip con l'aggiunta di ro le = "alert" al div del tooltip, ma vorrei evitare di utilizzare il ruolo di avviso per scopi non di avviso. Soprattutto perché legge "Avviso, questo è il mio testo del tooltip". per l'utente.

Mi piacerebbe sapere qual è il metodo corretto per ottenere le mascelle per leggere il suggerimento quando diventa visibile?

Sto utilizzando IE 11 e JAWS 16. Internet Explorer e JAWS sono requisiti che non posso modificare.

Grazie! -Ray

UPDATE

ho pensato di postare la soluzione che abbiamo utilizzato nel caso in cui altri hanno lo stesso problema. Questa è una versione semplificata del nostro codice che mostra solo ciò che è necessario per visualizzare il tooltip e leggerlo quando viene visualizzato. Si tratta di un controllo server, così molte delle ID di sono basate su proprietà ClientID del controllo e hanno conosciuto suffissi (_tootip, _tooltipcontainer, etc.)

JavaScript:

//handles showing/hiding of the tooltip 
function ShowToolTip(ttID) 
{ 
    var tt = $('#' + ttID + '_ToolTip');  
    var ttContainer = $('#' + ttID + '_ToolTipContainer'); 

    var ttClone = tt.clone(); 
    tt.remove(); 
    ttClone.css('display', ''); 
    ttContainer.append(ttClone); 
} 

//Closes the tooltip and returns focus to the hidden (from sighted users) button that shows it. 
function CloseToolTip(ttID) 
{  
    var tt = $('#' + ttID + '_ToolTip');     
    tt.css('display', 'none'); 
}"; 

Markup:

<button id="tooltip1_508KeyboardButton" class="hidden" onclick="ShowToolTip('tooltip1'); return false;" onblur="CloseToolTip('tooltip1');">Click for overview</button> 

<div id='tooltip1_ToolTipContainer' aria-live='polite' aria-atomic='true'> 
    <div id='tooltip1_ToolTip' class='section tooltip' style='display:none;'> 
     <span id='tooltip1_Msg'>This is my tooltip's text.</span> 
    </div> 
</div> 

Spero che questo sia utile a qualcuno in futuro. Mentre ci penso, avrei potuto facilmente collocare una regione di aria-aria che rimane visibile da qualche parte fuori dallo schermo che cambia il suo testo quando il suggerimento è "mostrato". Quindi ci sono molti modi per skinare questo particolare gatto.

Answer 1

Come un rapido hack, il seguente sembra funzionare per me con IE11 + JAWS 15

function ShowTooltip(ttID) 
{ 
    setTimeout(function(){ 
    $('#' + ttID).css('display', 'block'); 
    }, 100) 
} 

Si potrebbe anche provare il seguente:

• spingere il testo dei tuoi tooltip ad un'aria -live region che è sempre available "on screen" to screen readers
• Sposta dinamicamente l'utente in corrispondenza del suggerimento. (Sarei molto attento a fare questo, però. Può essere fonte di confusione per i tuoi utenti.)