Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

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.

 Slide 1: Come usare WAI-ARIA Roles

Cosa trovi in questa pagina:

  1. Aria Roles: cosa sono?
  2. HTML Semantico
  3. HTML Non semantico
  4. Landmark roles
  5. Header e Footer multipli
  6. Ultimo caso: ruoli creativi
  • 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.

     Slide 2: Definizione
  • 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>

     Slide 3: HTML semantico
  •  Slide 4: HTML semantico, esempio di codice HTML
  • 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>

     Slide 5: HTML non semantico, esempio di codice HTML
  •  Slide 6: L'attributo role può essere semantico
  • 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).
     Slide 7: Landmark roles
  • Header e Footer multipli

    I landmark roles introducono una regola speciale da tenere a mente. Se in HTML usiamo più tag Header e Footer, ad esempio per costruire delle card, bisogna inserire dei role speciali negli elementi principali.

    <header role="banner">
    <footer role="contentinfo">

    In questo modo diciamo allo Screen Reader quali sono gli Header e Footer principali della pagina rispetto a quelli della card. IMPORTANTE: Non possiamo usarli più di una volta.

     Slide 8: Header e Footer multipli (codice HTML)
  • 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.

     Slide 9: Ruoli creativi (codice HTML)
  •  Slide 10: Ti serve aiuto?