Accessibilità web: da cosa cominciare
Il lavoro sull'accessibilità ha una lunga lista di criteri e un breve elenco di cose che spiegano la maggior parte delle barriere reali. Partire dall'elenco breve porta rapidamente utenti veri sul tuo sito; partire da un audit completo di solito produce un documento che nessuno lavora.
Questa guida copre da cosa cominciare, come collaudarlo tu stesso in un pomeriggio, e perché i widget di sovrapposizione non sono la scorciatoia che vendono.
Gli interventi a maggiore effetto#
Sono le barriere che impediscono del tutto di completare un'attività, anziché renderla un po' più difficile. Correggile prima di qualsiasi cosa figuri in un elenco più lungo.
- Accesso da tastiera. Ogni elemento interattivo raggiungibile con Tab e azionabile con Invio o Spazio, in un ordine sensato, con un anello di focus visibile. Se il sito si usa solo con il mouse, nient'altro in questo elenco conta.
- Alternative testuali. Testo alternativo sensato sulle immagini che portano informazione; alt vuoto su quelle decorative. Un alt assente non è la stessa cosa di uno vuoto.
- Etichette dei moduli. Una vera <label> collegata a ogni campo. Il testo di esempio non è un'etichetta: sparisce quando si digita e non viene annunciato in modo affidabile.
- Contrasto. Testo corrente a 4,5:1, testo grande e controlli a 3:1, verificati sullo sfondo reale.
- Titoli. Un H1, nessun livello saltato. Chi usa uno screen reader naviga per titoli più che con qualsiasi altro mezzo.
- Testo dei link. «Leggi di più» ripetuto quattordici volte dà a uno screen reader quattordici destinazioni identiche. Di' dove porta.
- Messaggi di errore. Accanto al campo, in testo, che descrivano cosa fare — non solo il colore, non solo un bordo rosso.
Collaudalo tu stesso in un pomeriggio#
Non serve software specialistico per trovare la maggior parte dei problemi. Questi cinque passaggi richiedono un'ora o due su un sito medio e trovano la maggioranza delle barriere reali.
| Prova | Come | Cosa individua |
|---|---|---|
| Solo tastiera | Stacca il mouse, percorri ogni pagina con Tab | Trappole, focus invisibile, controlli irraggiungibili |
| Zoom al 200 % | Dimensione del testo del browser, non zoom di pagina | Testo tagliato, scorrimento orizzontale, impaginazioni rotte |
| Screen reader | VoiceOver o NVDA sui template principali | Etichette mancanti, link privi di senso, cambiamenti non annunciati |
| Analisi automatica | axe o Lighthouse nel browser | Contrasto, alt mancante, uso improprio di ARIA: circa il 30 % dei problemi |
| Scala di grigi | Filtro del browser o impostazione di sistema | Tutto ciò che viene trasmesso solo con il colore |
Gli strumenti automatici trovano circa un terzo dei problemi di accessibilità. Sono un punto di partenza, non una promozione: un sito con 100 in Lighthouse può restare inutilizzabile da tastiera.
Gli schemi che creano più problemi#
I componenti su misura sono il punto in cui l'accessibilità di solito si rompe, perché gli elementi nativi portano con sé comportamenti che quelli su misura devono reimplementare.
- Menu a tendina su misura fatti di div, senza supporto da tastiera né ruoli. Un <select> nativo è gratis e funziona ovunque.
- Finestre modali che non trattengono il focus, non si chiudono con Esc e lasciano scorrere lo sfondo.
- Caroselli che avanzano da soli senza comando di pausa: sono ostili a quasi tutti, non solo alle persone con disabilità.
- Pulsanti con la sola icona senza nome accessibile. Una X senza etichetta viene annunciata come «pulsante».
- Scorrimento infinito senza modo di raggiungere il piè di pagina.
- Zuppa di div: div cliccabili al posto di pulsanti e link, che elimina in un colpo supporto da tastiera e semantica.
- Movimento che ignora prefers-reduced-motion.
La strategia di accessibilità meno costosa è usare l'elemento HTML nativo previsto per il compito. Ogni sostituto su misura è la promessa di reimplementare un comportamento che arrivava gratis.
Perché i widget di sovrapposizione non sono una soluzione#
Le sovrapposizioni di accessibilità promettono la conformità con un solo script. Non possono darla, perché i problemi di fondo sono strutturali: uno script non può sapere cosa raffigura un'immagine, non può scrivere un'etichetta che corrisponda allo scopo di un campo, e non può riparare una trappola da tastiera in un componente su misura.
Interferiscono inoltre con le tecnologie assistive che le persone già usano e hanno configurato, ed è per questo che diverse organizzazioni di persone con disabilità le sconsigliano. Vale la pena conoscerle soprattutto per poterle rifiutare con una motivazione difendibile.
- Non possono generare un testo alternativo accurato, perché non sanno cosa significhi l'immagine nel contesto.
- Non possono correggere trappole da tastiera in componenti che non hanno costruito.
- Entrano spesso in conflitto con le impostazioni dello screen reader dell'utente.
- Non eliminano l'esposizione legale: le barriere di fondo restano.
- Il denaro rende di più speso nei sette interventi in cima a questa pagina.
Domande frequenti
L'accessibilità è obbligatoria per legge?
In molte giurisdizioni sì, per gli enti pubblici e sempre più per le imprese private: l'European Accessibility Act, l'ADA negli Stati Uniti applicato ai siti web, ed equivalenti altrove. Gli obblighi variano per paese e per settore, quindi verifica localmente. In pratica WCAG 2.2 AA è lo standard a cui quasi ogni normativa rimanda.
Quanto aggiunge l'accessibilità a un progetto?
Pensata dall'inizio, pochissimo: soprattutto disciplina su semantica, contrasto e stati di focus. Aggiunta a un sito su misura già finito può essere un progetto rilevante, perché gli interventi sono strutturali e non cosmetici. Quella differenza è tutto l'argomento per sollevarla nel brief anziché dopo il lancio.
Che differenza c'è tra WCAG A, AA e AAA?
Sono livelli di conformità. A è il minimo e lascia in piedi barriere reali; AA è ciò che le normative in genere richiedono e l'obiettivo della maggior parte delle organizzazioni; AAA comprende criteri non raggiungibili per ogni contenuto, per esempio un requisito di contrasto 7:1 che alcune palette di marca non possono rispettare. Punta ad AA e tratta AAA come un miglioramento criterio per criterio anziché come obiettivo.
L'accessibilità aiuta il SEO?
Indirettamente e realmente. Una struttura di titoli corretta, testi dei link descrittivi, attributi alt, semantica vera e pagine veloci e stabili aiutano entrambi. Ma la sovrapposizione è parziale: un sito può posizionarsi bene e restare inutilizzabile da tastiera. Fai accessibilità perché altrimenti ci sono persone che non possono usare il sito, e prendi il beneficio SEO come effetto collaterale.
accessibilità webwcagweb design accessibilescreen readernavigazione da tastieratest di accessibilità
