Introduzione ad ARIA

Introduzione ad ARIA e alla semantica HTML non nativa

Alice Boxhall

Dave Gash

Meggin Kearney

Finora, abbiamo incoraggiato l'utilizzo di elementi HTML nativi perché offrono messa a fuoco, supporto della tastiera e semantica integrata, ma a volte un layout semplice e l'HTML nativo non sono sufficienti. Ad esempio, al momento non esiste un elemento HTML standardizzato per un costrutto dell'interfaccia utente molto comune, il menu popup. Né esiste un elemento HTML che fornisca una caratteristica semantica come "l'utente deve saperlo il prima possibile".

In questa lezione, quindi, scopriremo come esprimere la semantica che l'HTML non può esprimere da solo.

La specifica Accessible Rich Internet Applications dell'iniziativa di accessibilità web (WAI-ARIA o solo ARIA) è ideale per collegare aree con problemi di accessibilità che non possono essere gestite 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 CSS "checkbox" assegna all'elemento le caratteristiche visive richieste.

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

Sebbene funzioni correttamente per gli utenti vedenti, uno screen reader non fornisce alcuna indicazione sul fatto che l'elemento debba essere una casella di controllo, pertanto gli utenti ipovedenti potrebbero non vedere affatto l'elemento.

Tuttavia, utilizzando gli attributi ARIA, possiamo fornire all'elemento le informazioni mancanti in modo che lo screen reader possa interpretarlo correttamente. In questo caso, abbiamo aggiunto gli attributi role e aria-checked per identificare esplicitamente l'elemento come casella di controllo e per specificare che è selezionata per impostazione predefinita. L'elemento dell'elenco verrà aggiunto all'albero dell'accessibilità e uno screen reader la indicherà come casella di controllo.

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

Nota : illustreremo l'elenco degli attributi ARIA e quando utilizzarli in seguito.

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

Sebbene ARIA ci consenta di modificare in modo sottile (o addirittura radicale) l'albero di accessibilità per qualsiasi elemento della pagina, questa è l'unica cosa che cambia. ARIA non aumenta il comportamento intrinseco dell'elemento; non lo farà essere attivo o non gli assegnerà listener di eventi della tastiera. Fa ancora parte del nostro compito di sviluppo.

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

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

Per ulteriori informazioni, consulta la specifica ARIA in HTML.

Vediamo quali altre funzionalità offre ARIA.

Cosa può fare ARIA?

Come hai visto con l'esempio della casella di controllo, ARIA può modificare la semantica degli elementi esistenti o aggiungerla a elementi in cui non esiste una semantica nativa. Può anche esprimere pattern semantici che non esistono affatto in HTML, come un menu o un riquadro di schede. Spesso, ARIA ci consente di creare elementi di tipo widget che non sarebbero possibili con il semplice HTML.

• Ad esempio, ARIA può aggiungere testo aggiuntivo per le etichette e le descrizioni che viene visualizzato solo per le API di tecnologia per la disabilità.
  

<button aria-label="screen reader only label"></button>

• ARIA può esprimere relazioni semantiche tra elementi che estendono la connessione principale/secondario 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 "live" parti della pagina, in modo che informino immediatamente la tecnologia per la disabilità quando cambiano.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Uno degli aspetti fondamentali del sistema ARIA è la raccolta di ruoli. Un ruolo nei termini per l'accessibilità equivale a un indicatore sintetico per un particolare pattern di UI. 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, abbiamo comunicato alla tecnologia assistiva che l'elemento deve seguire il pattern a "casella di controllo". In altre parole, garantiamo che avrà uno stato selezionato (selezionato o meno) e che lo stato può essere attivato e disattivato utilizzando il mouse o la barra spaziatrice, come un elemento di casella di controllo HTML standard.

Infatti, poiché le interazioni con la tastiera sono molto importanti nell'utilizzo degli screen reader, è molto importante assicurarsi che, quando si crea un widget personalizzato, l'attributo role venga sempre applicato nello stesso punto dell'attributo tabindex. In questo modo, gli eventi della tastiera vengono indirizzati al posto giusto e, quando il fuoco si sposta su un elemento, il suo ruolo viene trasmesso con precisione.

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. Si tratta della migliore fonte di informazioni definitive su come i ruoli e gli attributi ARIA interagiscono e su come possono essere utilizzati in un modo supportato dai browser e dalle tecnologie per la disabilità.

Tuttavia, le specifiche sono molto dense. Un punto di partenza più accessibile è il documento sulle pratiche di authoring ARIA, che illustra le best practice per l'utilizzo dei ruoli e delle proprietà ARIA disponibili.

ARIA offre anche ruoli di punto di riferimento che estendono le opzioni disponibili in HTML5. Per ulteriori informazioni, consulta la specifica Landmark Roles Design Patterns.