Nascondere e aggiornare i contenuti

Nascondere i contenuti dalle tecnologie per la disabilità

Alice Boxhall

Dave Gash

Meggin Kearney

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 di aria-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 temporaneamente aria-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 sia false).
• 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 specifichi aria-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.