Verifica accessibilità: contrasto, navigazione da tastiera, screen reader

L’accessibilità non è una rifinitura finale: è parte della qualità del sito. Prima di pubblicare il portfolio, devi verificare almeno contrasto, testi alternativi, navigazione da tastiera, struttura dei titoli e uso corretto degli elementi interattivi.

1. Contrasto dei colori

Un testo grigio chiaro su sfondo bianco può sembrare elegante, ma se il contrasto è basso molte persone faranno fatica a leggerlo.

Per il testo normale, il riferimento WCAG AA richiede un rapporto di contrasto di almeno 4.5:1. Per testo grande, il minimo è 3:1.

Controllo pratico:

1. apri i DevTools;
2. seleziona un testo;
3. clicca sul colore nel pannello Styles;
4. controlla il valore di contrasto indicato dal browser.

Non correggere il contrasto solo “a occhio”: misuralo.

2. Testi alternativi

Ogni immagine informativa deve avere un alt utile.

<img
  src="progetto-dashboard.webp"
  alt="Dashboard con grafico vendite mensili e tabella ordini"
>

Evita:

<img src="progetto-dashboard.webp" alt="immagine">

Per immagini decorative:

<img src="linea-decorativa.svg" alt="">

Il testo alternativo deve comunicare la funzione dell’immagine nel contesto della pagina.

3. Navigazione da tastiera

Posa il mouse e usa solo il tasto Tab.

Devi riuscire a:

• raggiungere tutti i link;
• vedere sempre dove si trova il focus;
• attivare link e bottoni con tastiera;
• seguire un ordine logico.

Non rimuovere l’outline senza sostituirlo.

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--clr-brand);
  outline-offset: 4px;
}

4. Link e bottoni

Usa <a> per navigare verso un’altra risorsa o sezione. Usa <button> per eseguire un’azione nella pagina.

<a href="#portfolio">Guarda i progetti</a>
<button type="button">Apri menu</button>

Non trasformare un <div> in bottone con JavaScript se puoi usare un <button> vero. Gli elementi nativi funzionano meglio con tastiera, focus e tecnologie assistive.

5. Titoli e landmark

Controlla che:

• ci sia un <h1> chiaro;
• i titoli non saltino livelli senza motivo;
• esista un solo <main> visibile;
• la navigazione principale sia dentro <nav>;
• le sezioni importanti abbiano un titolo.

Una pagina accessibile deve essere navigabile anche come struttura, non solo come superficie grafica.

6. Movimento e animazioni

Se hai animazioni o transizioni importanti, rispetta chi preferisce ridurre il movimento.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

Questa regola non sostituisce il buon senso: evita comunque animazioni inutili o troppo aggressive.

Checklist finale

Prima di pubblicare, rispondi si’ a queste domande:

• il testo principale supera il contrasto minimo?
• tutte le immagini informative hanno un alt utile?
• le immagini decorative hanno alt=""?
• posso usare il sito solo con Tab e Invio?
• il focus è sempre visibile?
• link e bottoni sono elementi HTML corretti?
• la gerarchia dei titoli descrive davvero la pagina?
• le animazioni rispettano prefers-reduced-motion?

Se una risposta è no, correggi prima di fare deploy.

---

Esercizi

Base · facile

Usa i DevTools per misurare il contrasto del testo principale del portfolio. Qual è il rapporto minimo WCAG AA per il testo normale?

Soluzione

4.5:1 per il testo normale (3:1 per il testo grande). Si misura selezionando il testo nei DevTools e leggendo il valore di contrasto nel pannello Styles — non si valuta «a occhio».

Intermedio · medio

Esegui l’audit del portfolio con la sola tastiera: raggiungi ogni link/bottone con Tab, verifica che il focus sia sempre visibile (:focus-visible), e controlla la gerarchia dei titoli (un solo h1, niente salti di livello). Annota e correggi un problema trovato.

Sfida · difficile

Conduci una revisione completa di accessibilità usando la checklist finale: contrasto, alt corretti (informativi vs alt=""), navigazione da tastiera, uso di <a> vs <button>, landmark, e prefers-reduced-motion. Per ogni voce non superata, spiega l’impatto sull’utente reale e la correzione.