La prima regola: nessuna ARIA è meglio di una ARIA errata
Scopra perché l'HTML nativo è quasi sempre la scelta migliore.
La prima regola: nessuna ARIA è meglio di una ARIA errata è una lezione Web Accessibility 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 Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Che cos'è realmente ARIA
ARIA è un insieme di attributi HTML che comunica alle tecnologie assistive che cosa sia un elemento e che cosa faccia, quando il markup da solo non è sufficiente.
ARIA non modifica il comportamento
Ecco il punto: ARIA modifica solo ciò che viene annunciato. Da sola non aggiunge mai clic, focus o supporto per la tastiera.
<div role="button">Save</div>
<!-- looks like a button, does nothing -->La prima regola di ARIA
La prima regola ufficiale è: se un elemento HTML nativo può svolgere il compito, lo usi invece di ricrearlo con ARIA.
Gli elementi nativi sono completi
Un vero button può ricevere il focus, si attiva con Enter e Space e annuncia gratuitamente il proprio ruolo. Non deve scrivere nulla di tutto questo manualmente.
<button>Save</button>
<!-- focus, keyboard, role: all built in -->Perché una ARIA errata è peggiore
Un ruolo errato mente attivamente agli utenti. Una ARIA errata è peggiore dell'assenza di ARIA perché può nascondere contenuti o descriverli in modo scorretto.
La trappola dell'override
ARIA sovrascrive la semantica nativa. Se applicate role=presentation a un'intestazione, gli screen reader smettono del tutto di trattarla come un'intestazione.
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->Tre aspetti forniti da ARIA
ARIA fornisce esattamente tre tipi di informazioni: un ruolo (che cosa rappresenta), stati e proprietà. Questo è l'intero insieme di strumenti.
ARIA non modifica il CSS
Impostare aria-hidden su un elemento lo nasconde agli screen reader, ma l'elemento rimane completamente visibile sullo schermo. I due livelli sono separati.
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->Quando è opportuno usare ARIA
Ricorrete ad ARIA quando nessun elemento nativo è adatto, ad esempio per un tablist o uno slider personalizzato. Poi usatela con precisione e verificatene il funzionamento.
Abbinare ARIA a JavaScript
Se dovete creare un widget personalizzato, ARIA e JavaScript vanno usati insieme. ARIA lo identifica, mentre JS fornisce la logica per la gestione del focus e della tastiera.
Meno è meglio
Spesso le pagine più accessibili usano pochissima ARIA. Prima di tutto HTML semantico, e ARIA solo per colmare le lacune che rimangono.
Verifica rapida
Vi serve un controllo Salva attivabile con un clic. Qual è la scelta più accessibile?
Riepilogo: usare ARIA con criterio
Avete imparato che ARIA descrive, non definisce il comportamento. Preferite l'HTML nativo, aggiungete ARIA solo per colmare lacune reali e verificatela ogni volta. 🎯
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «La prima regola: nessuna ARIA è meglio di una ARIA errata» è gratuita?
Sì — il testo completo di «La prima regola: nessuna ARIA è meglio di una ARIA errata» è 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 Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «La prima regola: nessuna ARIA è meglio di una ARIA errata»?
Scopra perché l'HTML nativo è quasi sempre la scelta migliore. Eserciti Web Accessibility 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 Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility 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 «La prima regola: nessuna ARIA è meglio di una ARIA errata»?
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 Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility 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
- La prima regola: nessuna ARIA è meglio di una ARIA errata
- I ruoli definiscono che cosa è un elemento
- Stati e proprietà: expanded, checked, disabled
- Leggere l'albero dell'accessibilità per eseguire il debug di ARIA