Quando usare ARIA invece dell’HTML nativo
Seguire la prima regola di ARIA: preferire la semantica nativa
Quando usare ARIA invece dell’HTML nativo è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è ARIA?
ARIA (Accessible Rich Internet Applications) è un insieme di attributi che possono essere aggiunti all'HTML per migliorare l'accessibilità per le tecnologie assistive. Colma le lacune quando la semantica dell'HTML nativo non è sufficiente.
La prima regola di ARIA
La linea guida ARIA più importante è: non utilizzi ARIA se l'HTML nativo può svolgere il compito:
<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>
<!-- GOOD: use a real button -->
<button type="submit">Submit</button>
<!-- Native HTML elements:
- Are keyboard accessible by default
- Have correct semantics built in
- Work in more contexts
- Require less code
-->Quando l'HTML nativo non è sufficiente
ARIA è necessaria quando:
- I componenti UI personalizzati non hanno un equivalente HTML (schede, combobox)
- È necessario sostituire il ruolo dell'elemento nativo
- Gli aggiornamenti dei contenuti dinamici devono essere annunciati
- È necessario rendere esplicite relazioni complesse tra gli elementi
ARIA non aggiunge comportamenti
Un fraintendimento importante: ARIA aggiunge metadati di accessibilità, ma non aggiunge funzionalità:
<!-- Adding role="button" to a div does NOT:
- Make it keyboard-focusable (add tabindex="0")
- Make Enter/Space activate it (add event listeners)
- Make it styled like a button (add CSS)
-->
<!-- You must implement ALL behavior yourself -->
<!-- Native <button> handles all this for free -->La tassonomia ARIA
ARIA comprende tre categorie di attributi:
- Ruoli — definiscono che cosa rappresenta un elemento:
role="button",role="dialog" - Proprietà — descrivono caratteristiche statiche:
aria-label,aria-required - Stati — descrivono condizioni dinamiche:
aria-expanded,aria-checked
HTML semantico ed equivalenti ARIA
La maggior parte degli elementi HTML possiede già ruoli ARIA impliciti:
<nav> ≡ role="navigation"
<main> ≡ role="main"
<aside> ≡ role="complementary"
<header> ≡ role="banner" (page-level)
<footer> ≡ role="contentinfo" (page-level)
<button> ≡ role="button"
<a href> ≡ role="link"
<h1-h6> ≡ role="heading"
<ul> ≡ role="list"Usi validi comuni di ARIA
Esempi di utilizzo legittimo di ARIA:
<!-- 1. Custom dropdown (no native equivalent): -->
<div role="combobox" aria-expanded="false">...</div>
<!-- 2. Loading state announcement: -->
<div role="status" aria-live="polite">Loading results...</div>
<!-- 3. Override landmark label: -->
<nav aria-label="Primary navigation">...</nav>
<!-- 4. Associate error with input: -->
<input aria-describedby="error-msg">
<span id="error-msg" role="alert">Invalid email</span>Uso non valido di ARIA
Errori comuni nell'uso di ARIA:
<!-- BAD: ARIA role contradicts the element -->
<h2 role="button">Heading</h2> <!-- don't turn a heading into a button -->
<!-- BAD: ARIA on an unsupported element -->
<div role="listitem">Item</div> <!-- listitem must be inside list role -->
<!-- BAD: ARIA where HTML works fine -->
<p role="paragraph">Text</p> <!-- p already has paragraph semantics -->
<!-- BAD: aria-label on hidden element -->
<span aria-hidden="true" aria-label="something"> <!-- contradictory -->Ruoli landmark
I ruoli landmark ARIA aiutano gli utenti di screen reader a navigare tra le aree della pagina:
<div role="banner"> <!-- header for the whole page -->
<div role="navigation"> <!-- major navigation -->
<div role="main"> <!-- main content -->
<div role="complementary"> <!-- aside content -->
<div role="contentinfo"> <!-- page footer -->
<div role="search"> <!-- search form -->
<div role="form"> <!-- form with label -->
<!-- These are ONLY needed if using divs instead of semantic elements -->
<!-- Prefer the native HTML elements instead -->Testare l'implementazione di ARIA
Come verificare che ARIA sia corretta:
- Utilizzi il pannello Accessibility in DevTools di Chrome/Firefox
- Ascolti con VoiceOver (Mac) o NVDA (Windows)
- Esegua l'estensione axe DevTools
- Controlli l'albero dell'accessibilità — riflette ciò che si aspetta?
Insidia di aria-hidden
Errore comune con aria-hidden:
<!-- BAD: aria-hidden on element that still receives focus -->
<button aria-hidden="true">Close</button>
<!-- The button is still focusable but invisible to screen readers
Screen reader users reach it via Tab but hear nothing -->
<!-- GOOD: for focus + hide, use hidden attribute or display:none: -->
<button hidden>Close</button> <!-- removes from both tab order and AT -->
<!-- Or: if you must keep visible: -->
<button style="display:none" aria-hidden="true">Close</button>Verifica rapida
Che cosa fornisce automaticamente l'aggiunta di role="button" a un div?
Riepilogo: ARIA e HTML nativo
Elementi essenziali di ARIA:
- Prima regola: utilizzi l'HTML nativo quando possibile
- ARIA aggiunge solo semantica — deve implementare lei il comportamento
- Tre categorie: ruoli, proprietà, stati
- I ruoli landmark facilitano la navigazione degli utenti di screen reader
- Effettui i test con il pannello Accessibility di DevTools e uno screen reader
Domande Frequenti
La lezione «Quando usare ARIA invece dell’HTML nativo» è gratuita?
Sì — il testo completo di «Quando usare ARIA invece dell’HTML nativo» è 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Quando usare ARIA invece dell’HTML nativo»?
Seguire la prima regola di ARIA: preferire la semantica nativa Eserciti HTML 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 HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML 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 1 di 4.
Quanto tempo richiede la lezione «Quando usare ARIA invece dell’HTML nativo»?
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 HTML Academy?
Sì. Ogni lezione HTML 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
- Quando usare ARIA invece dell’HTML nativo
- role button alert dialog e landmark
- aria-label aria-labelledby e aria-describedby
- aria-hidden e aria-live