Semantica HTML e WAI-ARIA per l’accessibilità

Manfredi Annibaldis

Pubblicato il 10 Luglio 2024

L’accessibilità web è un principio fondamentale che mira a garantire che tutti gli utenti, indipendentemente dalle loro abilità, possano accedere e navigare sui siti web senza difficoltà. Due strumenti cruciali per migliorare l’accessibilità sono la semantica HTML e le WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). 

Che cos’è la semantica HTML?

La semantica HTML si riferisce all’uso di tag HTML che descrivono in modo preciso il contenuto che racchiudono. Ad esempio, <header> indica un’intestazione, <article> rappresenta un articolo indipendente, e <footer> definisce il piede di pagina. 

L’uso corretto della semantica HTML aiuta non solo i browser a interpretare meglio il contenuto, ma è anche essenziale per screen readers e altri strumenti di assistenza utilizzati dalle persone con disabilità.

Perché è importante?

1. Miglior esperienza utente: La semantica HTML rende più facile per tutti gli utenti comprendere e navigare un sito web. I tag semantici forniscono un contesto chiaro che può migliorare l’interazione dell’utente con il sito.
2. SEO: I motori di ricerca utilizzano i tag semantici per comprendere meglio il contenuto delle pagine web. Un uso appropriato della semantica HTML può quindi migliorare il posizionamento nei risultati di ricerca.
3. Accessibilità: Gli screen readers e altre tecnologie assistive si affidano alla semantica HTML per fornire una navigazione efficace agli utenti con disabilità visive o cognitive.

Esempi di tag semantici

• <header>: Contiene l’intestazione di una sezione o di un’intera pagina.
• <nav>: Definisce una sezione di navigazione.
• <main>: Identifica il contenuto principale della pagina.
• <article>: Rappresenta un articolo indipendente.
• <section>: Raggruppa contenuti tematicamente correlati.
• <aside>: Contiene contenuti marginali o supplementari.
• <footer>: Definisce il piede di pagina.

Che cosa sono i WAI-ARIA ?

Le WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) sono attributi HTML progettati per rendere le applicazioni web più accessibili alle persone con disabilità. Lo standard ARIA consente di aggiungere informazioni semantiche ai controlli dinamici, come le modali, le schede e i menu a tendina, che altrimenti non sarebbero facilmente interpretabili dalle tecnologie assistive.

Perché utilizzarli?

1. Accessibilità migliorata: ARIA aiuta a creare contenuti web interattivi che possono essere utilizzati da tutti, compresi coloro che utilizzano tecnologie assistive.
2. Esperienza utente uniforme: Fornisce informazioni aggiuntive sui ruoli, gli stati e le proprietà degli elementi interattivi, migliorando l’esperienza utente.
3. Compatibilità cross-browser: ARIA è supportato dalla maggior parte dei browser moderni e delle tecnologie assistive, garantendo un accesso universale ai contenuti.

Principali attributi ARIA

• aria-label: Fornisce una descrizione di un elemento. Viene utilizzato quando non c’è un contenuto testuale visibile che possa essere utilizzato come etichetta per l’elemento.
  html
  
  <button aria-label=”Chiudi finestra”>X</button>

• aria-labelledby: Collega un elemento a un’altra etichetta che ne descrive il contenuto. L’attributo punta all’ID di un altro elemento che contiene l’etichetta descrittiva.
  html
  <h1 id=”titolo”>Benvenuto</h1>

          <button aria-labelledby=”titolo”>Apri</button>

• aria-hidden: Indica che un elemento non è visibile alle tecnologie assistive. È utile per nascondere elementi che non devono essere annunciati dagli screen readers come ad esempio elementi grafici decorativi
  html
  
  <div aria-hidden=”true”>[Contenuto nascosto]</div>

• aria-live: Indica come gli aggiornamenti dinamici dovrebbero essere comunicati agli screen readers. Può assumere valori come off, polite, e assertive.
  html
  
  <div aria-live=”polite”>Aggiornamento in corso…</div>
• role: Assegna un ruolo specifico a un elemento per definirne lo scopo. È utile quando un elemento non semantico (come un <div>) deve comportarsi come un elemento interattivo (come un pulsante o un avviso).
  html
  
  <div role=”alert”>Errore: campo obbligatorio</div>

Best practice

1. Combina semantica HTML e ARIA

Per garantire la massima accessibilità, utilizza innanzitutto i tag semantici HTML. Quando questi non sono sufficienti per fornire tutte le informazioni necessarie, integra con gli attributi ARIA. Ad esempio, un <button> semantico è sempre preferibile a un <div> con role=”button”.

2. Fornisci alternative testuali

Assicurati che tutte le immagini, i video e gli elementi multimediali abbiano descrizioni testuali alternative. Usa l’attributo alt per le immagini e considera l’uso di aria-label o aria-labelledby per altri tipi di contenuti.

3. Mantieni un focus chiaro

Gestisci il focus degli elementi interattivi per garantire che gli utenti possano navigare facilmente con la tastiera. Utilizza tabindex per controllare l’ordine del focus e aria-live per notificare aggiornamenti dinamici.

4. Testa l’accessibilità

Utilizza strumenti di verifica dell’accessibilità, come Lighthouse di Google o WAVE, per identificare e correggere i problemi. Inoltre, effettua test manuali con screen readers e altri strumenti di assistenza per assicurarti che tutti gli utenti possano navigare il sito senza difficoltà.

5. Aggiorna continuamente

L’accessibilità non è un compito una tantum, ma un processo continuo. Mantieni aggiornato il tuo sito web, introducendo nuove tecniche e strumenti man mano che diventano disponibili.

Caso di studio: implementazione pratica

Supponiamo di voler creare una pagina web accessibile per un blog di tecnologia. Di seguito, un esempio di come possiamo combinare la semantica HTML e attributi ARIA.

<!DOCTYPE html>

<html lang=”it”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta name=”title” content=”Blog di Tecnologia”>

   <title>Blog di Tecnologia</title>

</head>

<body>

   <header>

       <h1>Blog di Tecnologia</h1>

       <nav>

           <ul>

               <li><a href=”#home”>Home</a></li>

               <li><a href=”#articoli”>Articoli</a></li>

               <li><a href=”#contatti”>Contatti</a></li>

           </ul>

       </nav>

   </header>

   <main>

       <article aria-labelledby=”titolo-articolo-1″>

           <h2 id=”titolo-articolo-1″>Ultime novità sul 5G</h2>

           <p>Il 5G sta rivoluzionando la connettività…</p>

       </article>

       <section aria-labelledby=”titolo-sezione-1″>

           <h3 id=”titolo-sezione-1″>Approfondimenti</h3>

           <p>Scopri di più sulle nuove tecnologie…</p>

       </section>

   </main>

   <aside aria-labelledby=”titolo-aside-1″>

       <h3 id=”titolo-aside-1″>Risorse Utili</h3>

       <ul>

           <li><a href=”#guida-5g”>Guida al 5G</a></li>

           <li><a href=”#smart-home”>Smart Home</a></li>

       </ul>

   </aside>

   <footer>

       <p>&copy; 2024 Blog di Tecnologia</p>

   </footer>

</body>

</html>

Analisi del codice

1. Header e nav: Il tag <header> contiene il titolo del blog e la navigazione, definita con <nav>.
2. Main e articoli: La sezione principale utilizza <main> e <article> per il contenuto principale, con l’uso di aria-labelledby per collegare le intestazioni agli articoli.
3. Section e aside: Una sezione di approfondimenti è definita con <section>, mentre il contenuto marginale è contenuto in <aside>, entrambi con attributi ARIA per migliorare l’accessibilità.
4. Footer: Il piede di pagina utilizza <footer> per informazioni di copyright.

La combinazione di semantica HTML e attributi ARIA è essenziale per creare siti web accessibili e inclusivi. Utilizzando questi strumenti, possiamo migliorare significativamente l’esperienza utente per le persone con disabilità, garantendo che tutti possano accedere alle informazioni e interagire con i contenuti web senza ostacoli.