Nascondere i contenuti dalle tecnologie per la disabilità
aria-nascosto
Un'altra tecnica importante per perfezionare l'esperienza per gli utenti di tecnologie per la disabilità consiste nell'assicurare che solo le parti pertinenti della pagina siano esposte alle tecnologie per la disabilità. Esistono diversi modi per assicurarsi che una sezione del DOM non sia esposta alle API di accessibilità.
Innanzitutto, tutto ciò che è esplicitamente nascosto al DOM non sarà incluso
nell'albero dell'accessibilità. Pertanto, qualsiasi elemento con uno stile CSS visibility:
hidden
o display: none
o che utilizza l'attributo hidden
HTML5 verrà nascosto anche agli utenti delle tecnologie per la disabilità.
Tuttavia, un elemento che non viene visualizzato visivamente, ma non esplicitamente nascosto, viene comunque incluso nell'albero dell'accessibilità. Una tecnica comune è includere "testo solo dello 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 lo screen reader tramite un attributo aria-label
, aria-labelledby
o aria-describedby
che fa riferimento a un elemento altrimenti nascosto.
Consulta questo articolo di WebAIM sulle Tecniche per nascondere il testo per ulteriori informazioni sulla creazione di testo "solo per screen reader".
Infine, ARIA fornisce un meccanismo per escludere contenuti dalle tecnologie per la disabilità che non sono visivamente nascosti tramite l'attributo aria-hidden
.
L'applicazione di questo attributo a un elemento rimuove in modo efficace e tutti i suoi discendenti dall'albero dell'accessibilità. Le uniche eccezioni sono 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 usare aria-hidden
se stai creando un'interfaccia utente modale che
blocca l'accesso alla pagina principale. In questo caso, un utente vedente potrebbe visualizzare un overlay semitrasparente che indica che la maggior parte della pagina al momento non può essere utilizzata, ma uno screen reader potrebbe comunque essere in grado di esplorare le altre parti della pagina. In questo caso, oltre a creare la trappola per tastiera spiegata in precedenza, devi assicurarti che anche le parti della pagina fuori ambito siano aria-hidden
.
Ora che conosci le nozioni di base di ARIA, il suo funzionamento con la semantica HTML nativa e come può essere utilizzato per eseguire operazioni piuttosto importanti sull'albero dell'accessibilità oltre a modificare la semantica di un singolo elemento, vediamo come possiamo utilizzarlo per trasmettere informazioni sensibili al tempo.
aria-live
aria-live
consente agli sviluppatori di contrassegnare una parte della pagina come "pubblicata", nel senso che gli aggiornamenti devono essere comunicati agli utenti immediatamente, indipendentemente dalla posizione della pagina, anziché se semplicemente esplorano quella parte della pagina. Quando
un elemento ha un attributo aria-live
, la parte della pagina che lo contiene e
i relativi discendenti è chiamata regione live.
Ad esempio, una regione attiva potrebbe essere un messaggio di stato visualizzato come risultato di un'azione dell'utente. Se il messaggio è abbastanza importante da attirare l'attenzione di un utente vedente, è abbastanza importante per indirizzare l'attenzione di un utente di tecnologie per la disabilità impostandone l'attributo aria-live
. Confronta questo div
semplice
<div class="status">Your message has been sent.</div>
con la sua controparte "live".
<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 alla tecnologia per la disabilità di avvisare l'utente di questa modifica quando ha terminato qualsiasi operazione in corso. È un'ottima soluzione se qualcosa è importante ma non urgente e rappresenta la maggior parte dell'utilizzo diaria-live
.aria-live="assertive"
indica alle tecnologie per la disabilità di interrompere qualsiasi cosa sta facendo e di avvisare immediatamente l'utente di questa modifica. Ciò riguarda solo gli aggiornamenti importanti e urgenti, ad esempio un messaggio di stato del tipo "Si è verificato un errore del server e le modifiche non sono state salvate; aggiorna la pagina". In caso contrario, aggiorna un campo di immissione come risultato diretto di un'azione dell'utente, ad esempio i pulsanti di un widget dei passaggi.aria-live="off"
indica alla tecnologia per la disabilità di sospendere temporaneamentearia-live
le interruzioni.
Esistono alcuni trucchi per assicurarsi che le regioni pubblicate funzionino correttamente.
Innanzitutto, è probabile che la regione aria-live
sia impostata nel caricamento iniziale della pagina.
Non si tratta di una regola rigida e rapida, ma se hai difficoltà con una regione aria-live
, potrebbe essere questo il problema.
In secondo luogo, gli screen reader diversi reagiscono
in modo diverso ai vari tipi di modifiche. Ad esempio, è possibile attivare un avviso su alcuni screen reader
attivando lo stile hidden
di un elemento discendente da true a false.
Altri attributi che funzionano con aria-live
ti aiutano a perfezionare ciò che viene comunicato all'utente quando cambia la regione dal vivo.
aria-atomic
indica se l'intera regione deve essere considerata come
intera durante la comunicazione degli aggiornamenti. Ad esempio, se un widget data composto da giorno, mese e anno ha aria-live=true
e aria-atomic=true
e l'utente utilizza un controllo passo-passo per modificare solo il valore del mese, viene letto di nuovo l'intero contenuto del widget della data. Il valore di aria-atomic
può essere true
o false
(il 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, il che significa che qualsiasi elemento aggiunto alla regione attiva è significativo. Ad esempio, l'aggiunta di un intervallo a un log esistente di messaggi di stato comporta l'annuncio dell'intervallo all'utente (supponendo che
aria-atomic
siafalse
). - text, il che significa che i contenuti di testo aggiunti a qualsiasi nodo discendente sono pertinenti. Ad esempio, se modifichi la proprietà
textContent
di un campo di testo personalizzato, il testo modificato verrà letto all'utente. - rimozioni, il che significa che la rimozione di qualsiasi testo o di nodi discendenti deve essere comunicata all'utente.
- all, il che significa che tutte le modifiche sono pertinenti. Tuttavia, il valore predefinito di
aria-relevant
èadditions text
, il che significa che se non specifichiaria-relevant
, l'utente verrà aggiornato per qualsiasi aggiunta all'elemento, che è l'aspetto che probabilmente desideri.
Infine, l'istruzione aria-busy
ti consente di comunicare al sistema per la disabilità che deve ignorare temporaneamente le modifiche apportate a un elemento, ad esempio il caricamento di elementi. Una volta che tutto è stato impostato, aria-busy
deve essere impostato su false per normalizzare il funzionamento del lettore.