Etichette e relazioni ARIA

Utilizzo delle etichette ARIA per creare descrizioni di elementi accessibili

Alice Boxhall

Dave Gash

Meggin Kearney

Etichette

ARIA offre diversi meccanismi per aggiungere etichette e descrizioni agli elementi. Infatti, ARIA è l'unico modo per aggiungere una guida accessibile o un testo descrittivo. Vediamo le proprietà utilizzate da ARIA per creare etichette accessibili.

etichetta ARIA

aria-label ci consente di specificare una stringa da utilizzare come etichetta accessibile. Questa operazione sostituisce qualsiasi altro meccanismo di etichettatura nativo, come un elemento label. Ad esempio, se un elemento button ha sia contenuti di testo sia aria-label, verrà utilizzato solo il valore aria-label.

Potresti utilizzare un attributo aria-label quando hai qualche indicazione visiva dello scopo di un elemento, ad esempio un pulsante che utilizza una grafica anziché il testo, ma devi comunque chiarire questo scopo a chiunque non possa accedere all'indicazione visiva, ad esempio un pulsante che utilizza solo un'immagine per indicarne lo scopo.

etichettato con aria

aria-labelledby ci consente di specificare l'ID di un altro elemento nel DOM come etichetta di un elemento.

È molto simile all'utilizzo di un elemento label, con alcune differenze fondamentali.

1. aria-labelledby può essere utilizzato su qualsiasi elemento, non solo su elementi etichettabili.
2. Mentre un elemento label si riferisce all'elemento che etichetta, la relazione è invertita nel caso di aria-labelledby, mentre l'elemento che viene etichettato si riferisce all'elemento che lo etichetta.
3. A un elemento etichettabile può essere associato un solo elemento etichetta, ma aria-labelledby può utilizzare un elenco di IDREF per scrivere un'etichetta a partire da più elementi. L'etichetta verrà concatenata nell'ordine in cui vengono forniti gli IDREF.
4. Puoi utilizzare aria-labelledby per fare riferimento a elementi nascosti e altrimenti non presenti nell'albero dell'accessibilità. Ad esempio, potresti aggiungere span nascosto accanto a un elemento che vuoi etichettare e farvi riferimento con aria-labelledby.
5. Tuttavia, poiché ARIA influisce solo sull'albero dell'accessibilità, aria-labelledby non ti offre il comportamento familiare di clic sulle etichette che ottieni utilizzando un elemento label.

È importante sottolineare che aria-labelledby sostituisce tutte le altre origini dei nomi per un elemento. Quindi, ad esempio, se un elemento ha sia aria-labelledby che aria-label oppure aria-labelledby e un elemento HTML nativo label, l'etichetta aria-labelledby ha sempre la precedenza.

Relazioni

aria-labelledby è un esempio di attributo di relazione. Un attributo di relazione crea una relazione semantica tra gli elementi della pagina indipendentemente dalla loro relazione DOM. Nel caso di aria-labelledby, la relazione è "questo elemento è etichettato da quell'elemento".

La specifica ARIA elenca otto attributi relativi. Sei di questi, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby e aria-owns, fanno riferimento a uno o più elementi per creare un nuovo collegamento tra gli elementi della pagina. La differenza in ciascun caso è il significato di quel link e il modo in cui viene presentato agli utenti.

aria-proprietari

aria-owns è una delle relazioni ARIA più utilizzate. Questo attributo ci permette di indicare alle tecnologie per la disabilità che un elemento separato nel DOM deve essere trattato come un elemento secondario dell'elemento corrente oppure di riorganizzare gli elementi secondari esistenti in un ordine diverso. Ad esempio, se un sottomenu popup viene posizionato visivamente vicino al menu principale, ma non può essere un menu secondario DOM di quello principale perché influirebbe sulla presentazione visiva, puoi utilizzare aria-owns per presentare il sottomenu come elemento secondario del menu principale a uno screen reader.

discendente aria-attivo

aria-activedescendant svolge un ruolo correlato. Proprio come l'elemento attivo di una pagina è quello su cui è impostato lo stato attivo, l'impostazione del discendente attivo di un elemento ci permette di indicare alle tecnologie per la disabilità che un elemento deve essere presentato all'utente come elemento attivo quando l'elemento principale è effettivamente l'elemento attivo. Ad esempio, in una casella di riepilogo, potresti voler lasciare lo stato attivo della pagina sul contenitore della lista, ma mantenere l'attributo aria-activedescendant aggiornato all'elemento dell'elenco attualmente selezionato. In questo modo, l'elemento attualmente selezionato apparirà come se fosse l'elemento attivo.

aria-descrittoda

aria-describedby fornisce una descrizione accessibile nello stesso modo in cui aria-labelledby fornisce un'etichetta. Come aria-labelledby, aria-describedby potrebbe fare riferimento a elementi altrimenti non visibili, nascosti al DOM o nascosti agli utenti di tecnologie per la disabilità. Si tratta di una tecnica utile quando è presente del testo esplicativo aggiuntivo di cui un utente potrebbe aver bisogno, indipendentemente dal fatto che si applichi solo agli utenti di tecnologie per la disabilità o a tutti gli utenti.

Un esempio comune è un campo di immissione della password accompagnato da testo descrittivo che spiega i requisiti minimi per la password. A differenza di un'etichetta, questa descrizione potrebbe non essere presentata o meno all'utente, quest'ultimo può scegliere se accedervi, essere disponibile dopo tutte le altre informazioni o essere prerilasciata da qualcos'altro. Ad esempio, se l'utente inserisce informazioni, il suo input viene ripetuto e potrebbe interrompere la descrizione dell'elemento. Pertanto, una descrizione è un ottimo modo per comunicare informazioni supplementari, ma non essenziali, perché non intralcia informazioni più importanti come il ruolo dell'elemento.

aria-posinset e aria-setsize

Gli altri attributi di relazione sono leggermente diversi e funzionano insieme. aria-posinset ("posizione nel gruppo") e aria-setsize ("dimensioni dell'insieme") riguardano la definizione di una relazione tra gli elementi di pari livello in un insieme, ad esempio un elenco.

Quando le dimensioni di un insieme non possono essere determinate dagli elementi presenti nel DOM, ad esempio quando viene utilizzato il rendering lento per evitare di avere un elenco di grandi dimensioni nel DOM contemporaneamente, aria-setsize può specificare le dimensioni effettive del set e aria-posinset può specificare la posizione dell'elemento nel set. Ad esempio, in un insieme che potrebbe contenere 1000 elementi, potresti dire che un determinato elemento ha un valore aria-posinset pari a 857 anche se appare per primo nel DOM, quindi utilizzare tecniche HTML dinamiche per assicurarti che l'utente possa esplorare l'intero elenco su richiesta.