L’attributo aria-hidden: cos’è e quando usarlo

In un precedente articolo abbiamo descritto le specifiche relative all’attributo hidden di HTML 5, si tratta in sostanza di un costrutto di tipo booleano utilizzato per specificare se un elemento della pagina è rilevante o meno e, di conseguenza, se deve essere visualizzato o meno dal browser.

Sbirciando nel codice HTML di molti siti, tuttavia, molti di voi si saranno accorti dell’esistenza di un altro attributo all’apparenza simile: si tratta di aria-hidden.

Quest’ultimo attributo reintra nelle specifiche di WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) cioè un set di attributi specifici concepiti con la finalità di rendere accessibili siti e web application a persone con disabilità.

A cosa serve aria-hidden?

La funzione dell’attributo aria-hidden consiste nel nascondere il contenuto con esso marcato agli screen reader, cioè a quelle applicazioni di aiuto che semplificano la navigazione Internet da parte di utenti non vedenti e ipovedenti. Esso presenta quindi una differenza peculiare rispetto ad hidden che invece nasconde gli elementi da qualsiasi modalità di lettura, compresa quella dei normali browser e degli screen reader.

hidden o aria-hidden?

Quale dei due attributi utilizzare per nascondere un elemento? Anche in questo caso ci affideremo alle specifiche degli standard e, nello specifico, a quelle WAI-ARIA. Queste ultime suggeriscono di non adottare costrutti aria-* nel caso in cui possa essere utilizzata un’alternativa HTML nativa.

Quindi, ad esempio, se si desidera che nessuno (compresi coloro che impiegano tecnologie assistive) possa interagire con una determinata componente di pagina, si dovrà semplicemente ricorrere a hidden.

Quando utilizzare aria-hidden?

L’aggiunta di aria-hidden="true" a un elemento rimuove quell’elemento e tutti i suoi figli dall’albero dell’accessibilità.

L’esperienza degli utenti delle tecnologie assistive può essere migliorata applicando aria-hidden a:

• contenuti puramente decorativi come icone o talune immagini;
• contenuti fuori schermo o collassati (come menu o pannelli nascosti di accordion);
• contenuti duplicati.

Vediamo qualche esempio:

<!-- icona -->
<a href="https://forum.mrw.it">
  <i class="fa fa-comment" aria-hidden="true">
  Forum per Webmaster
</a>

<!-- elemento off-screen -->
<div class="off-screen" aria-hidden="true">
... contenuto off-screen ...
</div>

<!-- contenuto duplicato -->
<a href="#" class="tooltip">
  <span data-content="Testo a comparsa al passaggio del mouse" aria-hidden="true">
  </span>
  Testo a comparsa al passaggio del mouse
</a>

L’utilizzo di aria-hidden è consigliato esclusivamente per nascondere degli elementi che potrebbero peggiorare la user experience sulle tecnologie assistive.

Quando non utilizzare aria-hidden?

• quando l’elemento possiede già l’attributo hidden di HTML 5;
• quando l’elemento è nascosto mediante le regole visibility:hidden o display:none di CSS.

In tutti questi casi l’utilizzo di aria-hidden è inutile in quanto l’elemento è già stato rimosso dall’albero dell’accessibilità.