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 il supporto della tastiera e la semantica integrata, ma a volte può capitare il layout e l'HTML nativo non bastano. Ad esempio, al momento non sono disponibili elemento HTML standardizzato per un costrutto dell'interfaccia utente molto comune, il menu popup. Né esiste un elemento HTML che fornisce una caratteristica semantica come "il l'utente deve essere a conoscenza della questione nel più breve tempo possibile".

In questa lezione esploreremo quindi come esprimere una semantica che non è in grado di esprimirle da sola.

Le Web Accessibility Initiative's Accessible Rich Internet Applications specifica (WAI-ARIA o semplicemente ARIA) è ideale per collegare aree con problemi di accessibilità che non possono essere gestiti con HTML nativo. Consente di specificare attributi che modificano la traduzione di un elemento nell'albero dell'accessibilità. Diamo un'occhiata esempio.

Nel seguente snippet viene utilizzato un elemento dell'elenco come una sorta di casella di controllo personalizzata. La "Casella di controllo" CSS fornisce all'elemento le caratteristiche visive richieste.

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

Anche se questa soluzione funziona per utenti vedenti, uno screen reader non fornisce alcuna indicazione che l'elemento deve essere una casella di controllo, in modo che gli utenti ipovedenti possano non vedere completamente.

Utilizzando gli attributi ARIA, invece, possiamo assegnare all'elemento le informazioni mancanti in modo che lo screen reader possa interpretarla correttamente. In questo caso abbiamo aggiunto 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à ora aggiunto al l'albero dell'accessibilità e uno screen reader la segnaleranno correttamente come casella di controllo.

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

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

Sebbene ARIA consenta di modificare leggermente (o anche radicalmente) l'accessibilità per ogni elemento della pagina, è l'unica cosa che cambia. ARIA Non aumenta nessuno del comportamento intrinseco dell'elemento. non renderà il attivabile o con listener di eventi da tastiera. Fa ancora parte delle nostre attività di sviluppo.

È importante capire che non è necessario ridefinire le impostazioni predefinite la semantica. Indipendentemente dal suo utilizzo, un file <input type="checkbox"> standard elemento non richiede un attributo ARIA role="checkbox" aggiuntivo per essere annunciate correttamente.

Vale anche la pena notare che alcuni elementi HTML presentano restrizioni relative a ciò che ARIA ruoli e attributi possono essere utilizzati. Ad esempio, a un elemento <input type="text"> standard potrebbe non essere applicato alcun ruolo/attributo aggiuntivo.

Consulta la specifica ARA in HTML per ulteriori informazioni.

Vediamo quali altre funzionalità ARIA ha da offrire.

Che cosa può fare l'account ARIA?

Come hai visto nell'esempio di casella di controllo, ARIA può modificare la semantica dell'elemento esistente. o aggiungere semantica a elementi in cui non esiste una semantica nativa. Può anche esprimono pattern semantici che non esistono affatto in HTML, come un menu o una scheda dal riquadro. Spesso, ARIA ci consente di creare elementi di tipo widget che non sarebbero possibili con codice HTML semplice.

• Ad esempio, ARIA può aggiungere un'ulteriore etichetta e testo descrittivo esposte alle API di tecnologie per la disabilità.
  

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

• ARIA può esprimere relazioni semantiche tra elementi che estendono connessione principale/secondaria standard, ad esempio una barra di scorrimento personalizzata che controlla una una regione specifica.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• ARIA può rendere "pubblicate" parti della pagina in modo che informino immediatamente tecnologie per la disabilità quando cambiano.

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

Uno degli aspetti principali del sistema ARIA è la raccolta di ruoli. Un ruolo in termini di accessibilità equivale a un indicatore sintetico per una particolare UI pattern. ARIA fornisce un vocabolario di pattern che possiamo utilizzare tramite role su qualsiasi elemento HTML.

Quando abbiamo applicato role="checkbox" nell'esempio precedente, abbiamo detto tecnologie per la disabilità che l'elemento deve seguire la "casella di controllo" pattern. Questo garantisce che avrà lo stato "Selezionato" (selezionato o meno) selezionata) e che lo stato possa essere attivato/disattivato utilizzando il mouse o la barra spaziatrice, proprio come una casella di controllo HTML standard.

Infatti, perché le interazioni da tastiera sono così ben visibili nello screen reader durante la creazione di un widget personalizzato, è importante assicurarsi che L'attributo role viene sempre applicato nella stessa posizione dell'attributo tabindex attributo; Ciò garantisce che gli eventi della tastiera vengano indirizzati nel posto giusto e che, si concentra su un elemento il cui ruolo viene comunicato con precisione.

La specifica ARIA descrive un tassonomia dei valori possibili per l'attributo role e l'ARIA associato che possono essere utilizzati in combinazione con questi ruoli. Questo è il migliore fonte di informazioni definitive sul funzionamento dei ruoli e degli attributi ARIA e come possono essere utilizzati in un modo supportato dai browser tecnologie per la disabilità.

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

ARIA offre anche ruoli punti di riferimento che estendono le opzioni disponibili in HTML5. Consulta la progettazione dei ruoli dei punti di riferimento Motivi per ulteriori informazioni.