Cosa sono gli attributi Aria in HTML e perché sono importanti?

I web designer che non conoscono l'HTML possono imbattersi in una serie di attributi non familiari. Preceduti dalla parola ARIA, questi attributi compaiono in tutto il Web, ma il loro scopo può essere un mistero per i nuovi utenti.

Gli attributi ARIA hanno uno scopo importante nell'accessibilità dei tuoi siti web. Descrivono sia il contenuto di un dato elemento sia il modo in cui un elemento si relaziona a una pagina o agli altri elementi che la circondano.

L'aggiunta di questi importantissimi attributi al tuo sito contribuirà a garantire che tutti i visitatori ottengano la stessa esperienza, indipendentemente dalla tecnologia che stanno utilizzando.

Cosa sono gli attributi ARIA?

ARIA è l'acronimo di Accessible Rich Internet Applications. Nell'HTML moderno, in particolare nelle applicazioni ricche di JavaScript, non è sempre immediatamente ovvio in base alla sintassi quale ruolo svolgono i singoli elementi.

La difficoltà nel discernere i ruoli può essere un problema quando gli utenti visualizzano il sito utilizzando strumenti di accessibilità come i lettori di schermo. In mancanza dell'HTML semantico appropriato, l'utente finale potrebbe non essere in grado di navigare in un sito quando utilizza gli strumenti di accessibilità.

Mentre il modo preferito per risolvere questo problema è utilizzare gli elementi semantici appropriati in HTML5, questo non è sempre pratico o possibile. È qui che entrano in gioco gli attributi ARIA sugli elementi HTML. Questi attributi aiutano a definire il ruolo e gli attributi del tuo elemento in un modo che gli strumenti di accessibilità sono in grado di elaborare.

Perché gli attributi ARIA sono importanti?

In breve, gli attributi ARIA consentono agli utenti con disabilità di utilizzare il tuo sito web. Questi ruoli e attributi definiscono informazioni aggiuntive su vari elementi del tuo sito che altrimenti potrebbero non essere prontamente disponibili.

C'è un'ampia varietà di attributi ARIA che puoi assegnare. Dovresti usarli ovunque necessiti di un contesto aggiuntivo per consentire al documento di avere un senso in modo non visivo.

Ad esempio, considera un sito che ha una navigazione principale composta da a elemento racchiuso in a elemento, piuttosto che a elemento:

<divclasse="nav">
<Ul>
<li>Casali>
<li>Negozioli>
<li>Dili>
Ul>
div>

Puoi utilizzare gli attributi ARIA per aiutare gli utenti a navigare. Aggiunta degli attributi role e aria-label al file L'elemento consente allo screen reader e alle tecnologie assistive di sapere dove si trova il tuo menu.

<divclasse="nav">
<Ulruolo="navigazione"aria-etichetta="Principale">
<li>Casali>
<li>Negozioli>
<li>Dili>
Ul>
div>

Sebbene nella maggior parte dei casi dovresti utilizzare gli elementi appropriati, ciò potrebbe non essere sempre possibile entro i limiti di ciò che stai facendo. Se, ad esempio, il tuo sito richiede l'uso di una barra di avanzamento, ma desideri un design che la barra standard non consente.

In questo scenario, puoi creare un set personalizzato di elementi per visualizzare la barra di avanzamento. A uno screen reader, tuttavia, questi elementi sembreranno un pasticcio confuso; non sarà in grado di fornire informazioni utili ai visitatori del tuo sito.

Impostando il ruolo del wrapper su barra di avanzamento, e aggiungendo aria-valuenow, aria-valoremin, E aria-valoremax attributi al wrapper, puoi comunque indicare lo stato di avanzamento.

Nell'era moderna, la creazione di siti Web accessibili è più importante che mai. Ci sono diverse librerie di componenti React create pensando all'accessibilità.

Non solo avere un sito web accessibile può aiutarti con il tuo ranking di ricerca per diversi motori di ricerca principali, ma ti assicura di non escludere un potenziale gruppo di utenti dalla tua base di utenti.

L'aggiunta degli attributi ARIA appropriati al tuo sito ti aiuterà a presentare le informazioni a tutti gli utenti. Il risultato finale sarà un sito che accoglie tutti i tipi di pubblico e presenta a tutti la stessa esperienza il più vicino possibile.

Quali attributi ARIA dovrei usare?

Ci sono molti attributi diversi che dovresti utilizzare sul tuo sito. In generale, questi attributi rientrano in due diverse categorie. Il primo sono gli attributi del widget che di solito descrivono un elemento interattivo personalizzato.

L'altra categoria di cui devi essere a conoscenza sono gli attributi di relazione. Si tratta di attributi che trasmettono informazioni alle tecnologie assistive su come un particolare elemento si relaziona al resto del sito o ad altri elementi.

Quando si tratta di considerare quali attributi ARIA dovresti includere, la semplice risposta è il maggior numero possibile. Ovunque l'elemento che stai usando non descriva il ruolo che l'elemento svolge, dovresti usare l'attributo role.

Se hai un campo con un'etichetta, quel campo dovrebbe avere l'estensione aria-etichettato da attributo. Finché gli attributi che stai utilizzando hanno un senso, stai solo rendendo il tuo sito più accessibile aggiungendoli.

Gli attributi del widget sono la categoria molto più ampia. Contiene la maggior parte degli attributi ARIA che dovrai aggiungere a un sito standard. Nell'esempio precedente della barra di avanzamento personalizzata, aria-valuenow, aria-valuemin e aria-valuemax sono tutti attributi del widget. Descrivono lo stato o i possibili stati dell'elemento su cui si trovano.

Ci sono molti attributi diversi che puoi usare per descrivere lo stato di un elemento. Uno dei più comuni è aria-etichetta. Questo attributo applica un'etichetta all'elemento su cui lo posizioni che è visibile solo alle tecnologie assistive.

Un'altra coppia comune di attributi ARIA che rientrano in questa categoria sono aria-nascosto E aria-disabilitato. Questi possono comunicare lo stato corrente di un elemento e se un lettore di schermo deve leggerlo all'utente. Questo è utile per una varietà di dispositivi diversi con i propri lettori di schermo.

Attributi di relazione

A differenza degli attributi widget, gli attributi di relazione forniscono alle tecnologie assistive indicazioni sulla relazione e l'uso di un elemento con altri elementi che lo circondano. Il più comune di questi è l'attributo role. Il ruolo specifica lo scopo di un elemento all'interno di un sito.

Se imposti il ruolo attribuire a navigazione, verrà immediatamente identificato come wrapper di navigazione.

Alcuni attributi di relazione definiscono come un elemento si relaziona ad altri elementi che lo circondano. IL aria-etichettato da attribute, ad esempio, mostra quale elemento funge da etichetta per questo elemento. Questo può essere utile quando si utilizzano layout visivamente sensati ma che hanno etichette per specifici controlli del modulo dopo di essi nel flusso del documento.

Sebbene ci siano meno attributi di relazione rispetto agli attributi del widget, questi attributi spesso hanno un'importanza maggiore. Spesso possono descrivere il flusso e il controllo di un documento e fornire ulteriori dettagli sul modo in cui un utente può navigare nel tuo sito.

Questi attributi sono di particolare importanza quando si progettano moduli ed elementi di navigazione sul proprio sito.

Perché è così importante includere gli attributi ARIA nel tuo codice HTML

Gli attributi ARIA hanno uno scopo semplice e necessario sul tuo sito web. Servono a garantire che il sito sia accessibile a tutti gli utenti, indipendentemente dall'utilizzo di software di accessibilità. Per gli utenti con disabilità, avere questi attributi sul tuo sito può rendere il sito utilizzabile.

Il metodo preferito per lavorare con la tecnologia assistiva consiste nell'utilizzare gli elementi semantici appropriati. Quando ciò non è possibile, tuttavia, gli attributi ARIA consentono di lavorare liberamente senza che gli utenti perdano i contenuti.