Accessibilita web: la checklist pratica per non dimenticare nulla

Quando parlo di accessibilita con i clienti, la reazione comune e: "si, certo, ma non e la priorita adesso."

Il problema e che l'accessibilita e molto piu difficile da aggiungere dopo rispetto a farla bene fin dall'inizio. E in Italia, per i siti della Pubblica Amministrazione e per molte aziende con sito istituzionale, le linee guida WCAG non sono raccomandate: sono obbligatorie.

Ecco la checklist che seguo su ogni progetto.

Contrasto colori (WCAG AA)

Il testo normale deve avere un rapporto di contrasto di almeno 4.5:1 rispetto allo sfondo. Il testo grande (18pt o 14pt bold) almeno 3:1.

Strumenti utili: WebAIM Contrast Checker, Chrome DevTools (Accessibility tab).

Un errore comune: testo grigio chiaro su sfondo bianco per dare un look "minimal". Spesso non supera nemmeno 2:1.

Focus visibile su tutti gli elementi interattivi

Ogni link, bottone e campo form deve avere un outline visibile quando e selezionato con la tastiera. Browser diversi mostrano focus diversi, quindi e meglio definirlo esplicitamente nel CSS.

:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}

Non usare `outline: none` senza fornire un'alternativa.

Attributi alt sulle immagini

Ogni immagine informativa deve avere un attributo alt descrittivo. Le immagini decorative devono avere alt="" (stringa vuota) per essere ignorate dagli screen reader.

<img src="team.jpg" alt="Il team di sviluppo di Endrit Morina">
<img src="divider.svg" alt="">

Label sui campi form

Ogni campo form deve essere associato a una label. Non usare solo placeholder: vengono persi appena l'utente inizia a digitare.

<label for="email">Indirizzo email</label>
<input id="email" type="email" name="email">

Struttura heading logica

La gerarchia dei titoli (h1, h2, h3...) deve essere logica e non saltare livelli. Un solo h1 per pagina. I titoli non devono essere usati per lo stile, ma per la struttura semantica del contenuto.

Testo alternativo per icone e bottoni icon-only

Un bottone con solo un'icona deve avere aria-label o aria-labelledby.

<button aria-label="Chiudi finestra">
  <svg>...</svg>
</button>

Test pratico con la tastiera

Naviga tutta la pagina usando solo Tab, Shift+Tab, Enter e le frecce direzionali. Dovresti riuscire a raggiungere e usare ogni elemento interattivo senza mouse.

Test con screen reader

Su Windows: NVDA (gratuito). Su Mac: VoiceOver integrato (Cmd+F5). Su mobile: TalkBack (Android) o VoiceOver (iOS).

Non serve diventare esperti: basta ascoltare come la pagina viene letta e verificare che il flusso abbia senso.

Perche vale la pena

Un sito accessibile e usabile da piu persone, ha SEO migliore (i motori di ricerca apprezzano la struttura semantica), e riduce il rischio legale per i clienti. Nella mia esperienza, implementare l'accessibilita dall'inizio aggiunge circa il 10-15% al tempo di sviluppo. Aggiungerla dopo puo richiedere una riscrittura parziale.