L’HTML semantico è il fondamento dell’accessibilità di un sito web. Usare i tag giusti — <header>, <nav>, <main>, <article> — permette agli screen reader di interpretare la struttura della pagina e agli utenti con disabilità di orientarsi. Nessun widget o correzione successiva può sostituire un markup scritto bene fin dall’inizio.
In questo articolo vediamo come usare l’HTML per migliorare l’accessibilità: il codice semantico, la formattazione del testo, gli attributi alt per le immagini e i tag per i contenuti multimediali.
Perché l’accessibilità web parte dal codice
Indice
- L’importanza del codice semantico
- Accessibilità e formattazione del testo
- Immagini e contenuti multimediali
L’accessibilità web rende siti e applicazioni utilizzabili da persone con disabilità visive, uditive, motorie, cognitive e neurologiche. Un sito accessibile consente a questi utenti di partecipare pienamente alla vita digitale, con pari opportunità di accesso all’informazione, all’istruzione, al lavoro e all’intrattenimento.
Dal 28 giugno 2025 non è più solo una buona pratica: l’European Accessibility Act ha reso la conformità alle WCAG 2.1 livello AA un obbligo per una parte rilevante delle imprese italiane.
Quanto conta il codice semantico?
Il codice semantico in HTML si riferisce all’uso di tag che descrivono chiaramente il significato del loro contenuto. Migliora la leggibilità e la manutenibilità del sito, ma soprattutto l’accessibilità per gli utenti con disabilità.
I tag <header>, <nav>, <article> e <footer> forniscono un contesto significativo ai contenuti che racchiudono, aiutando sia i browser sia le tecnologie assistive a interpretare correttamente il layout e la struttura della pagina.
La differenza è concreta: uno screen reader può annunciare “navigazione” o “contenuto principale” e permettere all’utente di saltare direttamente dove gli serve. Con un sito costruito solo con <div>, quella possibilità non esiste e l’utente deve attraversare tutta la pagina ogni volta.
Esempi pratici di codice semantico
<header>: per l’intestazione principale della pagina o di una sezione.<nav>: per racchiudere i menu di navigazione.<main>: per il contenuto principale della pagina.<article>: per contenuti indipendenti e autonomi.<section>: per raggruppare contenuti correlati.<aside>: per contenuti correlati ma separati dal flusso principale.<footer>: per il piè di pagina.
Esempio di struttura completa
Accessibilità e formattazione del testo
Uso dei tag per il testo
L’uso corretto dei tag per la formattazione garantisce che il contenuto sia leggibile e comprensibile da tutti gli utenti, compresi quelli che usano tecnologie assistive.
- Tag
<p>: racchiude i paragrafi di testo. È il tag più comune per la formattazione. - Tag
<strong>e<em>: danno enfasi al testo.<strong>indica un’enfasi forte,<em>un’enfasi leggera. A differenza di<b>e<i>, che sono puramente visivi, questi tag comunicano il significato anche agli screen reader. - Tag
<blockquote>: per citazioni lunghe o blocchi di testo ripresi da un’altra fonte.
Chiarezza e leggibilità del testo
Un testo chiaro e leggibile è essenziale per l’accessibilità. Alcuni criteri pratici:
- Spaziatura e margini: spazio sufficiente tra paragrafi e sezioni, per evitare l’effetto “muro di testo”.
- Lunghezza delle righe: circa 50-75 caratteri per riga migliorano sensibilmente la leggibilità.
- Contrasto dei colori: rapporto minimo di 4.5:1 tra testo e sfondo per il testo normale. È anche il punto in cui l’accessibilità entra più spesso in conflitto con i colori del brand: ne parliamo nella guida al contrasto dei colori.
Immagini e contenuti multimediali
Attributi alt per le immagini
L’attributo alt fornisce una descrizione testuale dell’immagine, che gli screen reader leggono agli utenti non vedenti o ipovedenti.
Serve a tre cose:
- descrivere il contenuto e la funzione dell’immagine;
- aiutare i motori di ricerca a indicizzarla;
- fornire l’informazione quando l’immagine non viene caricata.
Una regola utile: se l’immagine è puramente decorativa, usa alt="" vuoto. Un alt generico come “immagine1” è peggio di nessun alt, perché costringe lo screen reader ad annunciare qualcosa di inutile.
Tag per video e audio
Per i contenuti multimediali si usano i tag HTML5 <video> e <audio>, sempre accompagnati da sottotitoli o trascrizioni.
Domande frequenti
Che differenza c’è tra HTML semantico e HTML normale?
L’HTML semantico usa tag che descrivono il ruolo del contenuto (<nav>, <main>, <article>) invece di contenitori generici come <div>. Il risultato visivo può essere identico, ma le tecnologie assistive interpretano correttamente la struttura solo nel primo caso.
Basta l’HTML semantico per rendere accessibile un sito?
No: è la base, non la soluzione completa. Servono anche contrasto adeguato, navigazione da tastiera, alternative testuali, contenuti comprensibili e verifica con utenti reali. L’HTML corretto rende però possibile tutto il resto: senza, gli altri interventi poggiano sul vuoto.
Gli attributi ARIA sostituiscono i tag semantici?
No, li integrano dove l’HTML nativo non basta — tipicamente su componenti dinamici. La regola condivisa è preferire sempre l’elemento HTML nativo quando esiste: un <button> è più affidabile di un <div role="button">.
Come verifico se il markup del mio sito è accessibile?
Con una combinazione di strumenti automatici e verifica manuale. Abbiamo raccolto gli strumenti per il test di accessibilità di un sito web, con quello che ciascuno rileva e quello che invece sfugge.
Conclusione
Implementare le pratiche di accessibilità nel codice HTML migliora l’esperienza utente, permette di rispettare normative e linee guida internazionali come le WCAG, e ha ricadute positive anche sul posizionamento nei motori di ricerca.
Il codice però è solo una parte del lavoro: contrasto, tipografia, layout responsivo e documenti scaricabili richiedono attenzioni diverse. Le trovi raccolte nella guida pratica per rendere accessibile un sito web.
Se vuoi sapere a che punto è il tuo sito, offriamo una verifica gratuita di accessibilità: analizziamo il codice, identifichiamo le barriere reali e ti indichiamo le priorità.
