HTML semantico come fondamento
Usare elementi HTML nativi come button, nav e heading per ottenere l’accessibilità integrata, prima di ricorrere ad ARIA.
HTML semantico come fondamento è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
L'HTML semantico offre accessibilità gratuitamente
Utilizzare l'elemento HTML corretto offre supporto per la tastiera, annunci da parte degli screen reader e ruoli ARIA corretti, senza costi aggiuntivi. La maggior parte dei problemi di accessibilità deriva dall'utilizzo di div + JavaScript invece dell'elemento nativo.
button vs div con onClick
<button> può ricevere il focus, viene annunciato come «button» dagli screen reader, attiva il click con Invio/Spazio e funziona con l'invio dei moduli. <div onClick> non offre nessuna di queste funzionalità.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Utilizzi button per i pulsanti e a per i link
Se l'azione porta a un URL, utilizzi <a href>. Se l'azione esegue qualcosa nella pagina, utilizzi <button>. Non utilizzi gli anchor come pulsanti (senza href, solo con onclick): sono fonte di confusione per le tecnologie assistive.
Le intestazioni creano la struttura del documento
Utilizzi h1-h6 in ordine per creare una struttura logica. Gli utenti degli screen reader navigano tramite le intestazioni: saltare dei livelli (h1 -> h3) crea lacune difficili da comprendere.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Elementi landmark
Gli elementi landmark di HTML5 (header, nav, main, aside, footer) permettono agli utenti degli screen reader di passare rapidamente da una regione principale all'altra. Utilizzi un solo <main> per pagina.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Elementi per le liste
Utilizzi <ul> per le liste non ordinate, <ol> per quelle ordinate e <dl> per le liste di definizioni. Gli screen reader annunciano «lista di N elementi»: è un'indicazione utile per la navigazione.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Moduli: assegni un'etichetta a ogni campo
Ogni campo di input necessita di un <label> associato. La coppia for/id li collega: facendo clic sull'etichetta si porta il focus sul campo e gli screen reader annunciano l'etichetta quando il campo riceve il focus.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>fieldset e legend per i gruppi
Raggruppi i campi correlati (ad esempio, i pulsanti di opzione) con <fieldset> + <legend>. Gli screen reader annunciano la legend ogni volta che un campo del gruppo riceve il focus.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Elementi table per i dati tabulari
Utilizzi <table> con <thead>, <tbody> e <th scope="col">: non utilizzi mai le tabelle per la struttura grafica. Gli screen reader permettono di navigare tra le celle in due dimensioni e annunciano le intestazioni.
article, section e figure
<article>: contenuto autonomo (articolo di blog, commento). <section>: raggruppamento tematico con un'intestazione. <figure> + <figcaption>: contenuto multimediale con didascalia.
Utilizzi ARIA solo quando necessario
La prima regola di ARIA è: non utilizzi ARIA. L'HTML nativo è sempre la scelta migliore. Ricorra ad ARIA solo quando nessun elemento semantico è adatto al suo widget personalizzato (combobox, tabs, tree).
Controllo rapido
Perché si preferisce <button onclick="..."> a <div onclick="...">?
Riepilogo: HTML semantico
Utilizzi l'elemento corretto: button per le azioni, a per la navigazione, h1-h6 in ordine per la struttura, elementi landmark (header, nav, main, footer), ul/ol per le liste, label per ogni campo, fieldset/legend per i gruppi di pulsanti di opzione e table per le tabelle di dati. L'HTML nativo offre accessibilità gratuitamente. ARIA è l'ultima risorsa.
Domande Frequenti
La lezione «HTML semantico come fondamento» è gratuita?
Sì — il testo completo di «HTML semantico come fondamento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «HTML semantico come fondamento»?
Usare elementi HTML nativi come button, nav e heading per ottenere l’accessibilità integrata, prima di ricorrere ad ARIA. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «HTML semantico come fondamento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Livelli WCAG: A, AA e AAA
- HTML semantico come fondamento
- Ruoli e attributi ARIA
- Navigazione da tastiera e gestione del focus