Nascondere i contenuti delle tecnologie per la disabilità
aria-nascosta
Un'altra tecnica importante per perfezionare l'esperienza per gli utenti tecnologici si devono verificare che solo le parti pertinenti della pagina esposte alle tecnologie per la disabilità. Esistono diversi modi per garantire che una sezione del DOM non viene esposto alle API di accessibilità.
Innanzitutto, tutto ciò che è esplicitamente nascosto dal DOM non sarà incluso
nell'albero dell'accessibilità. Quindi, tutto ciò che ha uno stile CSS di visibility:
hidden
o display: none
o che utilizza l'attributo hidden
HTML5 verrà
nascosti agli utenti delle tecnologie per la disabilità.
Tuttavia, un elemento che non viene visualizzato visivamente, ma che non è esplicitamente nascosto, ancora incluse nell'albero dell'accessibilità. Una tecnica comune è includere "testo solo per screen reader" in un elemento posizionato in modo assoluto fuori schermo.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Inoltre, come abbiamo visto, è possibile fornire testo solo per screen reader tramite una
Attributo aria-label
, aria-labelledby
o aria-describedby
che fa riferimento a un
che altrimenti sarebbe nascosto.
Leggi questo articolo di WebAIM sulle Tecniche per nascondere testo per ulteriori informazioni sulla creazione di "solo screen reader" testo.
Infine, ARIA fornisce un meccanismo per escludere i contenuti dai contenuti
tecnologia che non è visivamente nascosta, mediante l'attributo aria-hidden
.
L'applicazione di questo attributo a un elemento rimuove in modo efficace quest'ultimo e tutti i suoi
discendenti dall'albero dell'accessibilità. Le uniche eccezioni riguardano gli elementi
a cui fa riferimento un attributo aria-labelledby
o aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Ad esempio, potresti utilizzare aria-hidden
se stai creando un'interfaccia utente modale che
blocca l'accesso alla pagina principale. In questo caso, un utente vedente potrebbe
di overlay semitrasparente che indica che al momento la maggior parte della pagina non può
in uso, ma gli utenti di screen reader potrebbero essere in grado di esplorare le altre parti
della pagina. In questo caso, oltre a creare la trappola della tastiera spiegata
in precedenza,
devi assicurarti che le parti della pagina attualmente non rientrano nell'ambito
sono anch'essi aria-hidden
.
Ora che hai compreso le nozioni di base di ARIA, scopri come funziona con il codice HTML nativo semantica e come può essere utilizzata per eseguire interventi chirurgici abbastanza importanti albero dell'accessibilità e modificare la semantica di un singolo elemento, scopri come utilizzarlo per trasmettere informazioni urgenti.
Aria-live
aria-live
consente agli sviluppatori di contrassegnare una parte della pagina come "pubblicata" nel senso che
gli aggiornamenti devono essere comunicati immediatamente agli utenti, indipendentemente dalla pagina
media, piuttosto che semplicemente esplorando quella parte della pagina. Quando
un elemento ha un attributo aria-live
, la parte della pagina che lo contiene,
i suoi discendenti è chiamata regione live.
Ad esempio, una regione attiva potrebbe essere un messaggio di stato visualizzato in seguito a
un'azione utente. Se il messaggio è abbastanza importante da catturare
è abbastanza importante da indirizzare il cliente
di attenzione a questo elemento impostando il relativo attributo aria-live
. Confronta div
semplice
<div class="status">Your message has been sent.</div>
con i suoi dati controparte.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
ha tre valori consentiti: polite
, assertive
e off
.
aria-live="polite"
indica alle tecnologie per la disabilità di avvisare l'utente e modificare una volta terminato ciò che sta facendo attualmente. È uno strumento molto utile se qualcosa è importante ma non urgente e rappresenta la maggior parte del Utilizzo diaria-live
.aria-live="assertive"
indica alle tecnologie per la disabilità di interrompere qualsiasi cosa fare e avvisare immediatamente l'utente di questa modifica. Solo per per visualizzare aggiornamenti importanti e urgenti, ad esempio un messaggio di stato del tipo "È stata rilevata una errore del server e le modifiche non vengono salvate; aggiorna la pagina" oppure si aggiornano a un campo di immissione come risultato diretto di un'azione dell'utente, come pulsanti su un widget dei passi.aria-live="off"
indica alle tecnologie per la disabilità di sospendere temporaneamentearia-live
interruzioni.
Ecco alcuni suggerimenti per assicurarti che le regioni attive funzionino correttamente.
Innanzitutto, è probabile che la regione aria-live
sia impostata nel caricamento iniziale della pagina.
Non si tratta di una regola rigida, ma se riscontri problemi con un
aria-live
regione, questo potrebbe essere il problema.
In secondo luogo, screen reader diversi reagiscono in modo diverso a seconda del tipo
modifiche. Ad esempio, è possibile attivare un avviso su alcuni screen reader.
attivando/disattivando lo stile hidden
di un elemento discendente da true a false.
Altri attributi che funzionano con aria-live
ti aiutano a ottimizzare gli elementi
comunicati all'utente quando cambia la regione dell'account attivo.
aria-atomic
indica se l'intera regione deve essere considerata come un
per comunicare gli aggiornamenti. Ad esempio, se un widget della data è costituito da un
giorno, mese e anno ha aria-live=true
e aria-atomic=true
, mentre l'utente
usa un controllo stepper per modificare solo il valore del mese, l'intero contenuto
del widget della data verrebbe letto di nuovo ad alta voce. Il valore di aria-atomic
può essere true
oppure false
(valore predefinito).
aria-relevant
indica i tipi di modifiche da presentare all'utente.
Esistono alcune opzioni che possono essere utilizzate separatamente o come elenco di token.
- additions, vale a dire che qualsiasi elemento aggiunto alla regione pubblicata
significativo. Ad esempio, aggiungere un intervallo a un log di stato esistente
significa che l'intervallo viene annunciato all'utente (supponendo che
che
aria-atomic
erafalse
). - text, il che significa che i contenuti testuali aggiunti a qualsiasi nodo discendente sono
pertinenti. Ad esempio, la modifica della proprietà
textContent
di un campo di testo personalizzato leggerebbe il testo modificato all'utente. - removals, il che significa che la rimozione di testo o nodi discendenti deve essere comunicate all'utente.
- all, vale a dire che tutte le modifiche sono pertinenti. Tuttavia, il valore predefinito per
aria-relevant
èadditions text
, il che significa che se non specifichiaria-relevant
aggiornerà l'utente per qualsiasi aggiunta all'elemento, che è ciò che con maggiori probabilità desideri.
Infine, aria-busy
ti consente di informare le tecnologie per la disabilità che dovrebbero
ignorare temporaneamente le modifiche apportate a un elemento, ad esempio durante il caricamento. Una volta
che sia tutto a posto, aria-busy
deve essere impostato su false per normalizzare
il funzionamento del lettore.