Aria Roles: cosa sono?
Gli ARIA roles forniscono significato semantico al contenuto HTML. Consentono agli Screen Reader (e altri strumenti) di interagire con un elemento, in modo che le aspettative riguardo a quel tipo di elemento siano soddisfatte. Più facile da dire che da scrivere. Vediamo alcuni casi.
1. HTML Semantico
Molti elementi HTML semantici hanno già un ruolo definito. Ad esempio: <input type=”radio”> ha il ruolo “radio”.
Struttura semantica
Per organizzare la struttura di una pagina usiamo tag HTML comuni che hanno già un ruolo. E va bene così.<header>
<nav><!– menu –></nav>
</header>
<main>
<section>
<!– content page –>
</section>
</main>
<footer>
<!– content footer –>
</footer>2. HTML Non semantico
Gli elementi HTML non semantici invece non hanno un ruolo.
Ad esempio: <div> e <span>.In questo caso, l’attributo role può fornire la semantica.
I ruoli ARIA vengono aggiunti agli elementi HTML usando role=”role type”.
IMPORTANTE: È sempre meglio usare HTML semantico. I ruoli sono da usare con attenzione e solo se necessario.<div role=”banner”>
<nav role=”navigation”></nav>
</div>
<div role=”main”>
<div role=”region”>
<!– content page –>
</div>
</div>
<div role=”contentinfo”>
<!– content footer –>
</div>3. Landmark roles
Gli ARIA roles possono essere di vari tipi. Quelli che formano la struttura di una pagina si chiamano Landmark roles e sono importanti perché:
- Aiutano a organizzare la struttura di una pagina web;
- Aiutano l’esperienza di navigazione con Screen Reader perché facilitano e velocizzano la navigazione verso le sezioni importanti di una pagina (nel post 65 abbiamo visto come usare il Rotor Menu in Voiceover).
4. Ultimo caso: ruoli creativi
Quando mi sono avvicinato agli ARIA roles pensavo che si potessero inventare nuovi ruoli. Ad esempio, avevo creato il role=”topbar” per il div del topbar. Non si può fare. Meglio sfruttare aria-label e usare altre tecniche, cercando di limitare il rumore.
Come usare ARIA roles
Gli ARIA roles forniscono significato semantico al contenuto HTML. Consentono agli Screen Reader (e altri strumenti) di interagire con un elemento, in modo che le aspettative riguardo a quel tipo di elemento siano soddisfatte. Più facile da dire che da scrivere. Vediamo alcuni casi.
