Come notificare agli screen reader utilizzando WAI-ARIA che è ora visibile un div

Question

Come si notificano gli screen reader che utilizzano WAI-ARIA che un div è ora visibile?

Se abbiamo ottenuto l'html

<div id="foo">Present main content</div> 
<div id="bar" style="display: none;">Hidden content</div> 

e poi ci

$('#foo').hide(); 
$('#bar').show(); 

come facciamo a notifica di lettura dello schermo che dovrebbero notificare l'utente circa la div ora visibile (o, eventualmente, automaticamente concentrerà sulla div visibile ora)?

Answer 1

Non è necessario in generale a dire ai lettori di schermo che il contenuto è ora visibile. L'uso di aria-hidden non fa alcuna differenza nella pratica, quindi suggerirei di non usarlo. Se si desidera che il contenuto del testo del div nascosto venga annunciato da uno screen reader, è possibile utilizzare role=alert o aria-live=polite (ad esempio). Lo utilizzeresti per contenuti aggiornati che desideri vengano letti da uno screen reader senza doverti spostare nella posizione del contenuto per scoprirlo. Ad esempio un messaggio a comparsa che non riceve lo stato attivo, ma contiene informazioni di testo rilevanti per un utente dopo un'azione come la pressione di un pulsante.

aggiornamento: ho discusso con una delle persone che hanno sviluppato ARIA 1.0, ha suggerito utilizzando HTML5 hidden invece di aria-hidden come indicazione semantica che il contenuto è nascosto. usalo in combinazione con i CSS display:none per i browser più vecchi. I browser che supportano HTML5 hidden lo implementano utilizzando display:none nel foglio di stile dell'agente utente.

Answer 2

Usa aria-hidden

Indica che l'elemento e tutti i suoi discendenti non sono visibili o percepibili a qualsiasi utente come attuata dall'autore. Vedi aria relativa disabilitata.

Se un elemento è visibile solo dopo un'azione dell'utente, gli autori DEVONO impostare l'attributo aria-hidden su true. Quando viene presentato l'elemento, gli autori DEVONO impostare l'attributo aria-hidden su false o rimuovere l'attributo, indicando che l'elemento è visibile. Alcune tecnologie assistive accedono alle informazioni WAI-ARIA direttamente attraverso il DOM e non attraverso l'accessibilità della piattaforma supportata dal browser. Gli autori DEVONO impostare aria-hidden = "true" sul contenuto che non viene visualizzato, indipendentemente dal meccanismo utilizzato per nasconderlo. Ciò consente alle tecnologie assistive o ai programmi utente di saltare correttamente gli elementi nascosti nel documento.

così il vostro codice potrebbe diventare

$('#foo').hide().attr('aria-hidden', 'true'); 
$('#bar').show().attr('aria-hidden', 'false'); 

Answer 3

Tagging al contenuto con role = "alert" farà sì che a generare un evento di allarme che i lettori di schermo risponderanno a quando diventa visibile:

<div id="content" role="alert"> 
... 
</div> 

$("#content").show(); 

Ciò avverte l'utente quando #content diventa visibile.

aria-hidden deve essere utilizzato quando c'è qualcosa che si desidera nascondere dallo screen reader, ma mostrarlo agli utenti vedenti. Usare comunque con cura.Vedi qui per maggiori: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 4

ho creato un esempio che mostra come si potrebbe utilizzare role = "alert" per notificare agli utenti di screen reader quando stanno avvicinando al limite di caratteri di un elemento textarea, se si sta cercando di capire come utilizzare il ruolo avviso, può essere utile:

C'è di più ad esso, ma qui è la piccola parte del codice che produce l'avviso:

if (characterCount > myAlertTheshold) { 
     var newAlert = document.createElement("div"); /* using the native js because it's faster */ 
     newAlert.setAttribute("role", "alert"); 
     newAlert.setAttribute("id", "alert"); 
     newAlert.setAttribute("class","sr-only"); 
     var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left'); 
     newAlert.appendChild(msg); 
     document.body.appendChild(newAlert); 
    } 

http://codepen.io/chris-hore/pen/emXovR