Come ottenere uno screen reader per interrompere la lettura e leggere il contenuto diverso

Question

Ho scritto un sito che utilizza jQuery per visualizzare un popup modale. Copre essenzialmente l'intera area visibile dello schermo con una sovrapposizione, quindi mostra un DIV che contiene il popup effettivo sopra l'overlay. Uno dei requisiti per questo progetto ha a che fare con l'accessibilità.

Quando la pagina viene caricata, lo screen reader inizia a leggere dalla parte superiore della pagina. Quando un utente fa clic su un particolare collegamento, viene visualizzata una finestra di dialogo modale. La mia domanda è: come posso interrompere la lettura dello screen reader della parte principale del sito e dirgli di iniziare a leggere il testo del dialogo?

mio contenitore modale è avvolto in un div come questo:

<div id="modalcontainer" tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" > 

Il jQuery che spara il modal assomiglia a questo:

$("#modalLink").click(function (e) { 
    e.preventDefault(); 

    $("#modalcontainer").center(); 
    $("#modalcontainer").show(); 
    $("#closeBtnLink").focus(); 
    $("#wrapper").attr('aria-disabled', 'true'); 
}); 

Il "closeBtnLink" è il pulsante di chiusura all'interno del modal dialogo. Avrei pensato di porre l'accento su questo suggerire allo screen reader di iniziare a leggere da quell'elemento.

L'elemento "wrapper" è un SIBLING della finestra di dialogo modale. Per un suggerimento da un altro utente SO per ragioni diverse, ho impostato "aria-disabled = true" sull'elemento wrapper che contiene l'intera pagina. La finestra di dialogo modale esiste come fratello al di fuori di questo contenitore.

Il mio obiettivo principale qui è ottenere lo screen reader per leggere il contenuto del mio elemento DIV modale quando fa clic su un link specifico. Qualsiasi aiuto sarebbe apprezzato.

Answer 1

È responsabilità dello sviluppatore presentare il contenuto di una pagina in modo da renderlo leggibile per lo screen reader.

da http://www.anysurfer.be/en/index.html:

• utilizzare il diritto tag HTML per strutturare i documenti. In tal modo, le tecnologie assistive possono tradurre intestazioni, paragrafi, elenchi e tabelle in braille o in modo comprensibile.
• Assicurarsi che il sito Web sia anche utilizzabile senza utilizzare il mouse. Nella maggior parte dei casi, non sono necessarie azioni speciali, tranne se, ad esempio, si utilizzano i menu a discesa. Questa particolare linea guida è di grande importanza per i visitatori che sono solo in grado di utilizzare la tastiera.
• Puoi rendere i tuoi frammenti audio e video accessibili ai visitatori con un vincolo visivo o visivo aggiungendo i sottotitoli o offrendo una trascrizione.
• Mai affidarsi esclusivamente ai colori per trasmettere informazioni strutturali. Il messaggio 'I campi in rosso sono obbligatori' non ha senso per un cieco o qualcuno che è daltonico.
• Un display braille aggiornabile non può visualizzare le immagini. Pertanto, è necessario aggiungere brevi descrizioni per immagini e pulsanti grafici. Non vengono visualizzati sullo schermo, ma vengono rilevati dal software di screen reader utilizzato da non vedenti e ipovedenti.
• L'uso di tecnologie come Flash e JavaScript dovrebbe essere ben considerato. Inoltre, le animazioni pesanti e lo sfarfallio sono molto fastidiosi per le persone che soffrono di dislessia o di epilessia.

Ma è in ultima analisi, la responsabilità del lettore di schermo per fare assicurarsi che si ferma e si avvia quando ha senso per l'utente, se non possibile l'utente deve mettere in pausa il lettore stesso.

A causa della grande varietà di lettori di schermo disponibili, ciò che si sta chiedendo sembra del tutto impossibile.

Answer 2

È possibile utilizzare ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_Regions Quindi in Javascript durante la visualizzazione modale, scambiare le regioni con assertivo e disattivato.

Answer 3

questo può essere eseguito utilizzando ARIA role="dialog". dovresti modificare questo codice per il tuo esempio, è vanilla js, quindi il tuo sarà probabilmente più breve/più facile tramite jQuery.

HTML:

<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1"> 
    <h3 id="myDialog">Just an example.</h3> 
    <button id="ok" onclick="hideDialog(this);" class="close-button">OK</button> 
    <button onclick="hideDialog(this);" class="close-button">Cancel</button>  
</div> 

JavaScript:

var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground; 

function showDialog(el) { 
    lastFocus = el || document.activeElement; 
    toggleDialog('show'); 
} 
function hideDialog(el) { 
    toggleDialog('hide'); 
} 

function toggleDialog(sh) { 
    dialog = document.getElementById("box"); 
    okbutton = document.getElementById("ok"); 
    pagebackground = document.getElementById("bg"); 

    if (sh == "show") { 
     dialogOpen = true; 

     // show the dialog 
     dialog.style.display = 'block'; 

     // after displaying the dialog, focus an element inside it 
     okbutton.focus(); 

     // only hide the background *after* you've moved focus out of the content that will be "hidden" 
     pagebackground.setAttribute("aria-hidden","true"); 

    } else { 
     dialogOpen = false; 
     dialog.style.display = 'none'; 
     pagebackground.setAttribute("aria-hidden","false"); 
     lastFocus.focus(); 
    } 
} 


document.addEventListener("focus", function(event) { 

    var d = document.getElementById("box"); 

    if (dialogOpen && !d.contains(event.target)) { 
     event.stopPropagation(); 
     d.focus(); 
    } 

}, true); 


document.addEventListener("keydown", function(event) { 
    if (dialogOpen && event.keyCode == 27) { 
     toggleDialog('hide'); 
    } 
}, true); 

fonte: http://3needs.org/en/testing/code/role-dialog-3.html
più leggere: http://juicystudio.com/article/custom-built_dialogs.php

Answer 4

Ho affrontato lo stesso problema e risolto con il successivo setp

• creato un altro div (#message) all'interno del contenitore modale involucro di mettere tutti il ​​messaggio
• E attributo aria-labelledby impostato il pulsante di chiusura per puntare al contenitore #message

Answer 5

aria-nascosti = "true" farà sì che gli screen reader non percepiscano quell'elemento e il suo contenuto, il che significa che non verrà letto.

aria-label imposterà il testo che le tecnologie assistive (lettori di schermo, ecc.) Percepiranno.

http://www.w3.org/TR/wai-aria/states_and_properties