Panoramica

L’accessibilità web garantisce che siti e applicazioni siano utilizzabili da tutte le persone, incluse quelle con disabilità visive, uditive, motorie e cognitive. In questa guida vedrai il quadro normativo, i principi WCAG, esempi pratici di implementazione e come testare il tuo progetto per raggiungere almeno la conformità WCAG 2.2 livello AA.

Fondamentali e normative

Le WCAG (Web Content Accessibility Guidelines) definiscono i requisiti tecnici per contenuti accessibili. In Europa la EN 301 549 recepisce le WCAG per i servizi digitali pubblici; in molti Paesi esistono anche leggi nazionali e, in contesti extra-UE, riferimenti come ADA e Section 508.

• Ambito: contenuti, interfacce, documenti, multimedia.
• Livelli: A (base), AA (consigliato), AAA (avanzato).
• Benefici: inclusione, migliore UX, vantaggi SEO, riduzione rischi legali.

<!-- Esempio: struttura semantica e landmark -->
<header role="banner">...</header>
<nav aria-label="Breadcrumb">...</nav>
<main id="contenuto" role="main" tabindex="-1">...</main>
<footer role="contentinfo">...</footer>

Principi WCAG (POUR)

• Percepibile: testo alternativo per immagini, sottotitoli per video, sufficiente contrasto colore.
• Operabile: tutto controllabile da tastiera, focus visibile, evitare trappole di focus.
• Comprensibile: linguaggio semplice, etichette chiare, messaggi di errore utili.
• Robusto: markup valido, ruoli/attributi ARIA corretti, compatibilità con assistive technologies.

<!-- Form accessibile: label, help text, errori -->
<form novalidate aria-describedby="f-help">
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input id="email" name="email" type="email" class="form-control" aria-describedby="email-help email-err" required>
    <div id="email-help" class="form-text">Usa un indirizzo valido.</div>
    <div id="email-err" class="invalid-feedback" role="alert">Inserisci una email valida.</div>
  </div>
  <button class="btn btn-primary">Invia</button>
</form>

/* Focus visibile e contrastato */
:focus { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* Media prefers-reduced-motion già rispettato nel tema */

Audit, testing e SEO

Integra l’accessibilità nel ciclo di sviluppo: design system con componenti accessibili, linting, test automatici e manuali.

• Strumenti rapidi: Lighthouse, axe DevTools, WAVE, Color Contrast Analyser.
• Screen reader: NVDA/JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android).
• Test tastiera: Tab/Shift+Tab per raggiungere tutti i controlli; usa Skip to content e gestisci il focus dopo modali.
• SEO: semantica, heading gerarchici e alternative text migliorano findability e rich snippet.

// Gestione focus su modale Bootstrap come esempio
const modalEl = document.getElementById('myModal');
modalEl?.addEventListener('shown.bs.modal', () => {
  modalEl.querySelector('[autofocus]')?.focus();
});

Checklist rapida

• Contrasto testo/sfondo conforme (almeno 4.5:1, 3:1 per testo grande).
• Navigazione solo tastiera possibile e focus sempre visibile.
• Immagini con alt descrittivo; decorative con alt="".
• Form con <label> associati e messaggi d’errore utili.
• Heading e landmark semantici; nessun salto di livello ingiustificato.
• Contenuti non dipendono solo dal colore; stati forniti anche testualmente.
• Componenti interattivi con ruoli/attributi ARIA corretti e nome accessibile.
• Preferenze utente rispettate (reduced motion, zoom/resize, tema contrasto).

FAQ