Come usare ARIA nell'HTML del tuo sito WordPress

Uno degli obiettivi primari dello sviluppo web è creare un'esperienza utente coinvolgente. Lo farai spesso includendo funzionalità interattive e straordinari elementi visivi sul tuo sito web. Tuttavia, questi aspetti non sono necessariamente accessibili a tutti i potenziali visitatori, in particolare a coloro che si affidano agli screen reader.

Fortunatamente, esiste un sistema in atto per aiutare tutti i tuoi utenti a sperimentare i risultati del tuo duro lavoro. Incorporare Accessible Rich Internet Applications (ARIA) nell'HTML del tuo sito richiede solo un piccolo sforzo in più e può avere enormi vantaggi. Questo post ti introdurrà ad ARIA e come usarlo. Andiamo!

Un'introduzione ad ARIA: che cos'è e perché potresti volerlo usare

In breve, ARIA è un modo per specificare gli attributi dell'HTML in modo che gli screen reader possano identificarli con precisione e quindi trasmetterli ai visitatori. È un aspetto chiave dello sviluppo Web accessibile e aiuta a creare esperienze più accurate per gli utenti di screen reader.

Questo perché incorporare ARIA nel tuo HTML influenza il modo in cui i browser modificano le tue pagine web per gli screen reader. Questo contenuto modificato viene presentato in un albero di accessibilità e ARIA si assume il compito di tradurre i tuoi elementi HTML in esso.

Ad esempio, supponiamo che tu abbia una pagina con una casella di controllo e che tu abbia utilizzato ARIA nel tuo codice HTML. ARIA dirà allo screen reader di informare l'utente che c'è una casella di controllo nella pagina e indicherà se è selezionata o meno. L'HTML nativo non può farlo da solo.

Pensa alla frequenza con cui utilizzi il Web, non solo nel tuo lavoro ma anche nella vita di tutti i giorni. Ora immagina se gran parte del web fosse inutilizzabile per te. Avresti accesso a meno risorse per l'istruzione, l'occupazione, l'assistenza sanitaria, l'informazione, la comunicazione e persino l'intrattenimento.

L'utilizzo delle migliori pratiche per lo sviluppo web accessibile è un modo per fare la propria parte per rendere Internet un luogo di pari opportunità per tutti, indipendentemente dall'età o dalle capacità. Questo è considerato un diritto umano fondamentale dalle Nazioni Unite ed è un obiettivo che vale la pena perseguire per i propri meriti.

Se ciò non è abbastanza per farti investire nell'utilizzo di ARIA, tuttavia, potresti anche voler notare che lo sviluppo accessibile è utile anche da una prospettiva aziendale. Si sovrappone alle best practice per l'ottimizzazione per i motori di ricerca e aumenta la copertura del tuo sito web. Inoltre, in alcuni casi è richiesto dalla legge. In altre parole, ci sono molte ragioni per fare alcuni semplici passi per rendere il tuo sito più accessibile.

Come utilizzare ARIA nell'HTML del tuo sito WordPress (3 pratiche chiave)

Consigliamo vivamente di continuare a informarsi su ARIA e sull'accessibilità del web oltre lo scopo di questo post. In particolare, potresti prendere in considerazione la possibilità di testare l'attuale accessibilità del tuo sito.

Detto questo, ci sono davvero solo tre cose che devi sapere per iniziare a utilizzare ARIA nell'HTML del tuo sito WordPress. L'apprendimento delle pratiche seguenti dovrebbe fornirti una solida base.

1. Utilizzo di ARIA con HTML semantico

Prima di discutere su come applicare ARIA al tuo HTML, è importante notare quando è appropriato usarlo. Sebbene l'HTML nativo da solo non crei contenuti Web accessibili, ci sono alcuni elementi semantici che rendono ARIA non necessaria o entreranno in conflitto con ARIA se non viene utilizzata correttamente.

Gli elementi semantici – come <header> , <figure> e <nav> – descrivono lo scopo del loro HTML. Incorporare ARIA in questi elementi sarebbe ridondante, poiché l'HTML semantico implica già il ruolo dell'elemento (parleremo di più sui ruoli ARIA tra un momento).

Inoltre, ci sono alcune regole che si applicano all'utilizzo di ARIA, al fine di impedire agli sviluppatori di utilizzarlo in un modo in conflitto con l'HTML semantico. Il World Wide Web Consortium (W3C) ha una tabella utile che scompone quali elementi HTML semantici hanno implicato ruoli ARIA:

La prima colonna specifica un elemento HTML, mentre la seconda elenca il ruolo implicito. Se l'elemento ha un ruolo implicito elencato, non è necessario includere un ruolo ARIA aggiuntivo per esso. La terza colonna elenca i ruoli che ogni elemento HTML può avere, secondo le migliori pratiche.

2. Aggiunta di ruoli ai tag HTML

Una volta che sei sicuro che l'elemento HTML su cui stai lavorando richiede l'uso di ARIA, puoi saltare usando "ruoli" e "attributi". Potresti già avere un'idea di cosa fanno i ruoli ARIA dalla sezione precedente. Specificano il tipo di elemento contenuto all'interno del tag e indicano lo scopo dell'elemento.

Quindi, ad esempio, se volessi creare un avviso per informare gli utenti che devono installare un aggiornamento, utilizzerai il ruolo "avviso" in questo modo:

 <div role="alert">
<p>Installa l'ultimo aggiornamento!</p>
</div>

Come abbiamo spiegato in precedenza, non è necessario assegnare un ruolo se l'elemento è semantico e implica il ruolo e non è necessario assegnare un nuovo ruolo a un elemento che è in conflitto con il suo ruolo implicito. Tuttavia, dovresti anche notare che puoi applicare solo un ruolo a ciascun elemento.

Pensate in questo modo - Un ruolo definisce ciò che un elemento è. Un elemento non può essere due cose contemporaneamente, quindi dovresti scegliere il ruolo che meglio lo descrive. Detto questo, quando è necessario, puoi scegliere di annidare un elemento all'interno di un elemento con un ruolo diverso.

Ad esempio, se desideri aggiungere l'avviso sopra all'intestazione, potrebbe essere simile a questo:

 <header><div role="alert">
<p>Installa l'ultimo aggiornamento!</p>
</div></header>

Piuttosto che affermare che un singolo elemento è sia un'intestazione che un avviso, questo chiarisce che c'è un avviso contenuto all'interno dell'intestazione.

3. Inclusione degli attributi negli stati e nelle proprietà delle note

Gli attributi sono il secondo elemento che compone ARIA. Differiscono dai ruoli in quanto dicono agli screen reader qualcosa di importante su un particolare elemento, piuttosto che definire cosa sia quell'elemento. Esistono due tipi di attributi ARIA:

• Gli stati condividono informazioni sulle funzionalità che potrebbero cambiare quando un utente interagisce con loro. Ad esempio, questo potrebbe includere caselle di controllo o pulsanti di opzione.
• Le proprietà indicano le caratteristiche che è improbabile che cambino durante l'uso. Un elemento che etichetta un altro elemento, o il livello gerarchico in cui si trova un elemento, sono entrambe proprietà.

Entrambi sono facili da individuare, poiché iniziano sempre con aria- seguito dallo stato specifico o dalla proprietà utilizzata. Ad esempio, lo stato utilizzato per informare un'utilità per la lettura dello schermo che una casella di controllo è compilata per impostazione predefinita è selezionato come in questo esempio:

 <span role="casella di controllo" 
aria-checked="true"
tabindex="0">
</span>

Allo stesso modo, la proprietà usata per notare quando un elemento sta etichettando un altro è aria-labelledby. Potresti applicare questo attributo a un'immagine, ad esempio, per indicare la didascalia ad essa associata:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption>Abbiamo visto l'opera <cite>Barbiere di Siviglia</cite> qui!</figcaption>
</figure>

Si consiglia di consultare l'elenco di ruoli, stati e proprietà consentiti del W3C per vedere altri esempi di attributi che è possibile utilizzare.

Conclusione

Quando si tratta di sviluppo web, la creazione di contenuti accessibili potrebbe non essere la prima cosa che ti viene in mente. Tuttavia, seguendo le migliori pratiche di accessibilità del Web e incorporando ARIA HTML nel tuo sito, puoi svolgere un ruolo nel rendere il Web disponibile a tutti.

Tre pratiche chiave per l'utilizzo di ARIA sul tuo sito WordPress includono:

1. Utilizzo di ARIA con HTML semantico.
2. Aggiunta di ruoli ai tag HTML.
3. Compresi gli attributi per annotare gli stati e le proprietà.

Hai domande sull'utilizzo di ARIA sul tuo sito WordPress? Fatecelo sapere nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo EgudinKa / shutterstock.com