Introduzione ad ARIA

Introduzione ad ARIA e alla semantica HTML non nativa

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Finora abbiamo incoraggiato l'uso di elementi HTML nativi perché offrono focus, supporto per la tastiera e semantica integrata, ma ci sono casi in cui un layout semplice e un codice HTML nativo non funzionano. Ad esempio, al momento non esiste un elemento HTML standardizzato per un costrutto dell'interfaccia utente molto comune, il menu popup. Non esiste nemmeno un elemento HTML che fornisca una caratteristica semantica come "l'utente deve esserne a conoscenza il prima possibile".

In questa lezione vedremo come esprimere semantica che l'HTML non può esprimere da solo.

La specifica Accessible Rich Internet Applications di Web Accessibility Initiative (WAI-ARIA o semplicemente ARIA) è utile per colmare le aree con problemi di accessibilità che non possono essere gestiti con HTML nativo. Consente di specificare attributi che modificano il modo in cui un elemento viene tradotto nell'albero dell'accessibilità. Vediamo un esempio.

Nel seguente snippet, utilizziamo un elemento dell'elenco come una sorta di casella di controllo personalizzata. La classe "casella di controllo" del CSS assegna all'elemento le caratteristiche visive richieste.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Anche se questo approccio funziona bene per gli utenti vedenti, uno screen reader non fornisce alcuna indicazione che l'elemento sia da intendersi come una casella di controllo, quindi gli utenti ipovedenti potrebbero trascurare l'elemento.

Utilizzando gli attributi ARIA, tuttavia, possiamo fornire all'elemento le informazioni mancanti in modo che lo screen reader possa interpretarle correttamente. Qui abbiamo aggiunto gli attributi role e aria-checked per identificare esplicitamente l'elemento come casella di controllo e specificare che è selezionato per impostazione predefinita. L'elemento dell'elenco verrà aggiunto all'albero dell'accessibilità e uno screen reader lo segnalerà correttamente come casella di controllo.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA funziona modificando e potenziando l'albero dell'accessibilità DOM standard.

L&#39;albero dell&#39;accessibilità DOM standard.
L&#39;albero dell&#39;accessibilità aumentata ARIA.

Sebbene ARIA ci permetta di modificare in modo sottile (o anche radicale) l'albero dell'accessibilità per qualsiasi elemento della pagina, questa è l'unica cosa che cambia. ARIA non aumenta il comportamento intrinseco dell'elemento, non lo imposta come attivabile né fornisce listener di eventi da tastiera. Questo fa ancora parte del nostro attività di sviluppo.

È importante capire che non è necessario ridefinire la semantica predefinita. Indipendentemente da suo utilizzo, un elemento <input type="checkbox"> HTML standard non ha bisogno di un attributo role="checkbox" ARIA aggiuntivo per essere annunciato correttamente.

Vale anche la pena notare che alcuni elementi HTML hanno limitazioni riguardo ai ruoli e agli attributi ARIA che possono essere utilizzati. Ad esempio, a un elemento <input type="text"> standard non potrebbe essere applicato alcun ruolo/attributo aggiuntivo.

Per ulteriori informazioni, consulta le specifiche di ARIA in HTML.

Vediamo quali altre funzionalità ha da offrire ARIA.

Che cosa può fare ARIA?

Come hai visto nell'esempio della casella di controllo, ARIA può modificare la semantica degli elementi esistenti o aggiungere la semantica agli elementi in cui non esiste alcuna semantica nativa. Può anche esprimere pattern semantici che non esistono nel codice HTML, ad esempio un menu o un riquadro di schede. Spesso, ARIA ci consente di creare elementi di tipo widget che non sarebbero possibili con HTML normale.

  • Ad esempio, ARIA può aggiungere un ulteriore testo per etichetta e descrizione che viene esposto solo alle API per le tecnologie per la disabilità.
<button aria-label="screen reader only label"></button>
  • ARIA può esprimere relazioni semantiche tra elementi che estendono la connessione principale/secondaria standard, ad esempio una barra di scorrimento personalizzata che controlla una regione specifica.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • Inoltre, ARIA può rendere "pubblicate" parti della pagina in modo da informare immediatamente la tecnologia per la disabilità quando cambiano.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Uno degli aspetti principali del sistema ARIA è la sua raccolta di ruoli. Un ruolo nei termini di accessibilità equivale a un indicatore sintetico per un particolare modello di interfaccia utente. ARIA fornisce un vocabolario di pattern che possiamo utilizzare tramite l'attributo role su qualsiasi elemento HTML.

Quando abbiamo applicato role="checkbox" nell'esempio precedente, indicavamo alla tecnologia per la disabilità che l'elemento deve seguire il pattern a "casella di controllo". In altre parole, garantiamo che lo stato sarà selezionato (selezionato o meno) e che lo stato possa essere attivato utilizzando il mouse o la barra spaziatrice, proprio come un elemento standard di casella di controllo HTML.

Infatti, poiché le interazioni da tastiera hanno un ruolo così importante nell'utilizzo dello screen reader, è molto importante assicurarsi che, quando si crea un widget personalizzato, l'attributo role venga sempre applicato nella stessa posizione dell'attributo tabindex. Ciò garantisce che gli eventi da tastiera vengano posizionati nella posizione corretta e che quando lo stato attivo viene impostato su un elemento, il suo ruolo viene trasmesso in modo accurato.

La specifica ARIA descrive una tassonomia dei possibili valori per l'attributo role e gli attributi ARIA associati che possono essere utilizzati in combinazione con questi ruoli. Questa è la migliore fonte di informazioni definitive su come i ruoli e gli attributi ARIA funzionano insieme e su come possono essere utilizzati in modo supportato dai browser e dalle tecnologie per la disabilità.

Un elenco di tutti i ruoli ARIA disponibili.

Tuttavia, la specifica è molto densa; un punto di partenza più accessibile è il documento sulle pratiche di creazione ARIA, che esplora le best practice per l'utilizzo dei ruoli e delle proprietà ARIA disponibili.

ARIA offre anche ruoli punto di riferimento che estendono le opzioni disponibili in HTML5. Per ulteriori informazioni, consulta la specifica relativa ai pattern di progettazione dei ruoli di riferimento.