HTML semantico

Definizione — L’HTML semantico impiega gli elementi nativi per comunicare significato e struttura (titoli, liste, tabelle, navigazione, regioni, pulsanti). Questa semantica viene sfruttata da tecnologie assistive, browser, motori di ricerca e strumenti di trasformazione (lettura ad alta voce, braille, indicizzazione). È centrale per WCAG 2.1 (1.3.1, 4.1.2) e per la conformità EN 301 549.

Principi chiave

• Prima l’HTML, poi ARIA: se esiste un elemento nativo (button, a, details/summary) usalo. ARIA serve solo quando l’HTML non basta.
• Struttura: usa header, main, footer, nav, aside per le regioni; h1–h6 per i titoli gerarchici.
• Dati tabellari: table con caption, th, scope o headers/id per associare celle e intestazioni.
• Form: label associati, fieldset/legend per gruppi, aria-describedby per aiuti; Form accessibili.

Esempi

Pulsante vero vs div “finto”

<!-- Corretto -->
<button type="button">Apri menu</button>

<!-- Da evitare -->
<div class="btn" role="button" tabindex="0">Apri menu</div> 
<!-- richiede JS extra per tastiera, aria-pressed, ecc. -->

Nav con lista

<nav aria-label="Principale">
  <ul>
    <li><a class="text-primary" href="/servizi/">Servizi</a></li>
    <li><a class="text-primary" href="/prezzi/">Prezzi</a></li>
    <li><a class="text-primary" href="/contatti/">Contatti</a></li>
  </ul>
</nav>

Tabella dati

<table>
  <caption>Report accessibilità Q2</caption>
  <thead>
    <tr><th scope="col">Pagina</th><th scope="col">Conforme</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Home</th><td>Sì</td></tr>
  </tbody>
</table>

Benefici

• Accessibilità: i ruoli/relazioni sono impliciti; meno ARIA necessaria, meno errori.
• SEO: titoli e strutture chiare migliorano l’indicizzazione e i rich result (es. breadcrumb, FAQ).
• Robustezza: maggiore interoperabilità, manutenzione più semplice, compatibilità futura.

Errori comuni

• Abusare di div/span per tutto (bottoni, link, liste) perdendo semantica e tastierabilità.
• Usare tabelle per il layout (crea rumore per gli screen reader e complica il reflow).
• Saltare i titoli o usarli per sola grafica; mancare di testo alternativo per immagini informative.

Checklist rapida

• Ogni funzione usa l’elemento nativo corretto?
• Le regioni sono marcate con main/nav/aside/footer e i titoli sono gerarchici?
• Form e tabelle dati hanno associazioni semantiche esplicite?