Il 28 giugno 2025 è scattato l’obbligo di conformità all’European Accessibility Act (EAA) in tutta l’Unione Europea. Oggi chi fornisce servizi digitali al pubblico in UE deve rispettare le WCAG 2.1 Level AA. Non è più una raccomandazione, è un requisito di legge (Direttiva 2019/882/UE).

La buona notizia? Un sito accessibile funziona meglio per tutti, migliora la SEO e aumenta la qualità percepita del brand. Accessibile significa più utenti, più conversioni, meno problemi legali.

WCAG: lo standard globale del web

Le WCAG (Web Content Accessibility Guidelines) sono pubblicate dal W3C e costituiscono lo standard internazionale per l’accessibilità digitale. Se rispetti le WCAG, sei conforme alla grande maggioranza delle normative del mondo.

Livelli di conformità

Le WCAG hanno tre livelli di conformità:

  • Level A: requisiti minimi essenziali
  • Level AA: obbligatorio per l’EAA
  • Level AAA: livello massimo, ma spesso irrealistico su ogni contenuto

La legge europea (e quella italiana) richiede il Level AA. Quindi concentrati su quello.

WCAG 2.2: stato attuale nel 2025

L’ultima versione stabile è WCAG 2.2, pubblicata a ottobre 2023 dal W3C. Molti enti europei stanno raccomandando di adottarla per futura-proofing, anche se l'obbligo legale minimo resta WCAG 2.1 AA.

Le WCAG 2.2 aggiungono 9 nuovi criteri che migliorano usabilità e accesso da mobile.

Nuovi criteri WCAG 2.2

  1. 2.4.11 Focus Not Obscured (Minimum) - Level AA
    • il focus della tastiera non deve essere completamente oscurato da altri contenuti
  2. 2.4.12 Focus Not Obscured (Enhanced) - Level AAA
    • versione più stringente del criterio precedente
  3. 2.4.13 Focus Appearance - Level AAA
    • requisiti specifici per la visualizzazione del focus
  4. 2.5.7 Dragging Movements - Level AA
    • fornire alternative ai movimenti di trascinamento
  5. 2.5.8 Target Size (Minimum) - Level AA
    • dimensione minima dei target interattivi di 24x24 pixel
  6. 3.2.6 Consistent Help - Level A
    • meccanismi di aiuto consistenti attraverso il sito
  7. 3.3.7 Redundant Entry - Level A
    • evitare di richiedere ripetutamente le stesse informazioni
  8. 3.3.8 Accessible Authentication (Minimum) - Level AA
    • autenticazione accessibile senza test cognitivi
  9. 3.3.9 Accessible Authentication (Enhanced) - Level AAA
    • versione più stringente del criterio precedente

I quattro principi WCAG (POUR)

Le WCAG si basano su quattro principi fondamentali, acronimo POUR:

1. Perceivable (percepibile)

Il contenuto e i componenti dell'interfaccia devono essere presentabili agli utenti in modi che possano percepire.

Requisiti principali:

  • Alternative testuali per contenuti non testuali (alt text per immagini)
  • Sottotitoli e trascrizioni per contenuti multimediali
  • Contrasto colori sufficiente (minimo 4.5:1 per testo normale)
  • Contenuto adattabile a diverse presentazioni

Implementazione:

html
<!-- ✅ Corretto: immagine con alt text descrittivo -->
<img src="/logo.png" alt="Logo PerSeoDesign - Web Agency Firenze">

<!-- ❌ Errato: immagine senza alt text -->
<img src="/logo.png">

<!-- ✅ Corretto: video con sottotitoli -->
<video controls>
  <source src="/video.mp4" type="video/mp4">
  <track kind="captions" src="/captions-it.vtt" srclang="it" label="Italiano">
</video>

2. Operable (operabile)

I componenti dell'interfaccia e la navigazione devono essere operabili da tutti gli utenti.

Requisiti principali:

  • Tutte le funzionalità accessibili da tastiera
  • Tempo sufficiente per leggere e utilizzare i contenuti
  • Nessun contenuto che possa causare attacchi epilettici (flash)
  • Facilitazione della navigazione e ricerca dei contenuti

Implementazione:

html
<!-- Skip link per navigazione da tastiera -->
<a href="#main-content" class="skip-link">
  Salta al contenuto principale
</a>

<!-- Focus visibile con CSS -->
<style>
:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* Evitare outline: none senza alternativa visibile */
</style>

<!-- Bottone accessibile da tastiera -->
<button type="button" aria-label="Chiudi menu" onclick="closeMenu()">
  <span aria-hidden="true">×</span>
</button>

3. Understandable (comprensibile)

Le informazioni e l'interfaccia devono essere comprensibili.

Requisiti principali:

  • Testo leggibile e comprensibile
  • Contenuto prevedibile e coerente
  • Assistenza nell'inserimento dati e prevenzione errori
  • Messaggi di errore chiari e suggerimenti per la correzione

Implementazione:

html
<!-- Form accessibile con label e messaggi di errore -->
<form>
  <div class="form-group">
    <label for="email">Indirizzo Email *</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-error"
      aria-invalid="false"
    >
    <span id="email-error" class="error-message" role="alert">
      <!-- Inserito dinamicamente in caso di errore -->
    </span>
  </div>

  <div class="form-group">
    <label for="password">Password *</label>
    <input
      type="password"
      id="password"
      name="password"
      required
      aria-required="true"
      aria-describedby="password-requirements"
    >
    <p id="password-requirements" class="help-text">
      La password deve contenere almeno 8 caratteri, una lettera maiuscola e un numero.
    </p>
  </div>

  <button type="submit">Invia</button>
</form>

4. Robust (robusto)

Il contenuto deve essere sufficientemente robusto da essere interpretato affidabilmente da una vasta gamma di user agent, comprese le tecnologie assistive.

Requisiti principali:

  • HTML semantico e valido
  • ARIA (Accessible Rich Internet Applications) attributes corretti
  • Compatibilità con screen reader e altre tecnologie assistive

Implementazione:

html
<!-- HTML semantico -->
<header role="banner">
  <nav role="navigation" aria-label="Navigazione principale">
    <!-- Menu -->
  </nav>
</header>

<main role="main" id="main-content">
  <article>
    <h1>Titolo articolo</h1>
    <!-- Contenuto -->
  </article>
</main>

<footer role="contentinfo">
  <!-- Footer -->
</footer>

<!-- ARIA per componenti interattivi -->
<div role="tablist" aria-label="Sezioni del contenuto">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Sezione 1
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Sezione 2
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  <!-- Contenuto pannello 1 -->
</div>

Checklist WCAG 2.2 Level AA

Perceivable

  • Alt text descrittivo su tutte le immagini informative
  • Alt vuoto (alt="") su immagini decorative
  • Contrasto colori minimo 4.5:1 per testo normale (< 18pt)
  • Contrasto colori minimo 3:1 per testo grande (≥ 18pt o 14pt bold)
  • Sottotitoli (captions) per tutti i contenuti video
  • Trascrizioni testuali per contenuti solo audio
  • Controlli per mettere in pausa/fermare contenuti in movimento

Operable

  • Tutte le funzionalità accessibili tramite tastiera (Tab, Enter, Space, Arrow keys)
  • Focus visibile con outline di almeno 2px
  • Skip links per saltare navigazione ripetitiva
  • Nessun limite di tempo su azioni critiche (o estendibile dall'utente)
  • Target interattivi di almeno 24x24 pixel (WCAG 2.2)
  • Nessun contenuto che lampeggia più di 3 volte al secondo
  • Titoli di pagina descrittivi (<title>)
  • Ordine di focus logico e prevedibile

Understandable

  • Attributo lang corretto su elemento <html>
  • Label esplicite su tutti gli input di form
  • Messaggi di errore chiari con suggerimenti per la correzione
  • Istruzioni fornite per form complessi
  • Navigazione coerente tra le pagine
  • Identificazione chiara di componenti con stessa funzionalità
  • Prevenzione errori per invii con conseguenze legali/finanziarie

Robust

  • HTML valido secondo standard W3C
  • ARIA roles, states e properties corretti
  • Nomi, ruoli e valori disponibili via API accessibilità
  • Compatibilità testata con screen reader (NVDA, JAWS, VoiceOver)
  • Status messages comunicati a tecnologie assistive

Strumenti per testare l'accessibilità

Strumenti automatizzati

  1. axe DevTools (Extension Chrome/Firefox) - testing automatizzato completo
  2. WAVE (WebAIM) - Visualizzazione problemi direttamente sulla pagina
  3. Lighthouse Accessibility (Chrome DevTools) - Audit integrato nel browser
  4. Pa11y - Testing automatizzato da linea di comando

Testing manuale

  1. Navigazione da tastiera - Test fondamentale: navigare l'intero sito usando solo Tab, Enter, Space e frecce
  2. Screen reader:
    • NVDA (Windows, gratuito)
    • JAWS (Windows, commerciale ma molto diffuso)
    • VoiceOver (macOS/iOS, integrato)
  3. Zoom testo - Verificare usabilità con zoom fino al 200%
  4. Contrast checker - Tool online per verificare rapporti di contrasto

European Accessibility Act: situazione nel 2025

Dal 28 giugno 2025 l’EAA è pienamente in vigore in tutti gli Stati membri.

Siti e servizi obbligati

  • Siti di e-commerce e marketplace
  • Servizi bancari e finanziari online
  • Servizi pubblici digitali
  • Piattaforme di social media
  • Servizi di trasporto (biglietteria online, prenotazioni)
  • Servizi di telecomunicazione
  • Contenuti audiovisivi (streaming, VOD)

Conseguenze della non conformità

Le sanzioni variano per stato membro, con multe che possono raggiungere:

  • Italia: Fino a €50.000
  • Germania: Fino a €100.000
  • Altri stati UE: Sanzioni proporzionali al fatturato

Oltre alle sanzioni, la non conformità può comportare:

  • Azioni legali da parte di associazioni di consumatori e disabilità
  • Esclusione da appalti pubblici
  • Danno reputazionale significativo

Mettiti in regola (prima che sia troppo tardi)

Guarda, l'accessibilità è una di quelle cose che conviene fare prima della deadline, non il 27 giugno alle 23:59. Perché?

  1. Eviti le multe - che in Italia possono arrivare a €50.000
  2. Apri il sito al 15% della popolazione EU che ha qualche forma di disabilità
  3. Google ti premia - molti criteri WCAG sono anche best practice SEO
  4. Il sito funziona meglio per tutti, non solo per chi usa screen reader
  5. Fai pure bella figura - mostra che ti importa davvero degli utenti

Da dove comincio?

Il mio consiglio? Fai una scansione con PerSeo Insights, poi passa alla checklist manuale per i dettagli.