L’accessibilità (A11a) è spesso considerata “bello da avere”. Non lo è.

Rischio legale: ai siti web si applica l’ADA (Americans with Disabilities Act). Le cause legali sono aumentate del 300%.
Dimensione del mercato: il 15% della popolazione mondiale ha una disabilità. Questo è un enorme segmento di clienti.
SEO: A11y e SEO si sovrappongono al 90%. L’HTML semantico vince entrambi. Se blocchi un utente non vedente, blocchi GoogleBot.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

Perché Maison Code dà priorità all’A11a

Non lo facciamo solo per le cause legali. Lo facciamo perché la “Sterlina Viola” (potere di spesa delle famiglie disabili) vale 274 miliardi di dollari solo nel Regno Unito. Lo facciamo perché esistono gli “effetti di taglio del marciapiede”. (I tagli sui cordoli sono stati fatti per le sedie a rotelle, ma aiutano i passeggini e le valigie). I sottotitoli sono stati realizzati per i non udenti, ma aiutano le persone a guardare i video in metropolitana. A11y migliora l’esperienza per tutti.

1. HTML semantico: le basi

Smetti di usare "

" per tutto.

Pulsante: <pulsante>, non <div onClick>.
Intestazione: <h1>, non <div class="text-3xl">.
Navigazione: <nav>, non <div>. Gli screen reader si affidano a questi tag per navigare. Se usi un pulsante “div”, un utente non vedente non potrà “Tab” su di esso. Non possono fare clic su di esso. È un muro.

2. Lo stile “Anello di messa a fuoco”.

I designer odiano il contorno blu: outline: none. Non rimuovere MAI il contorno a meno che non lo sostituisca. Gli utenti con tastiera (con difficoltà motorie) si affidano all’anello di messa a fuoco per sapere dove si trovano. Utilizza :focus-visible per mostrarlo solo agli utenti di tastiera, non a quelli di mouse.

/* Buona UX */
pulsante: messa a fuoco {
  contorno: nessuno; /* Nascondi predefinito */
}

pulsante:focus-visibile {
  contorno: 2px solido var(--colore-elettrico);
  offset contorno: 2px;
}

3. Etichette ARIA (Colmare il divario)

Quando i segnali visivi falliscono, usa ARIA. Esempio: un’icona “X” per chiudere una modale. Visivamente: è ovvio. In modo udibile: si legge “Immagine”. Correzione: <button aria-label="Chiudi modale">X</button>. Regola: utilizza prima l’HTML nativo. Utilizza ARIA solo quando l’HTML non è sufficiente. Non utilizzare role="button" su un div se puoi utilizzare un <button>.

4. Contrasto del colore (il fallimento n. 1)

Il testo grigio su uno sfondo grigio leggermente più chiaro sembra “Moderno”. È illeggibile per gli utenti ipovedenti (e per le persone che guardano il telefono al sole). È necessario un rapporto di contrasto di 4,5:1 per il corpo del testo. Utilizza la “Panoramica CSS” di Chrome DevTools per controllare tutti i colori. Inoltre, supporta correttamente la Modalità oscura. La modalità a contrasto elevato è fondamentale per gli anziani.

5. Test automatizzati (la pipeline)

Integriamo Axe-core nel processo di sviluppo. Un essere umano non può catturare tutto.

Linting: eslint-plugin-jsx-a11y rileva i tag <img> mancanti alt.
Runtime: @axe-core/react registra gli errori sulla console durante lo sviluppo.
CI/CD: Pa11y è in cantiere. Se l’accessibilità scende al di sotto del 90%, la compilazione fallisce.

“bash.”

Esecuzione di Pa11y sulla CLI

npx pa11y https://maisoncode.paris


## 6. Il collegamento "Vai al contenuto".

Un utente cieco non vuole ascoltare il tuo Mega Menu (50 link) ad ogni caricamento della pagina.
Aggiungi un collegamento nascosto in alto: "Vai al contenuto principale".
Diventa visibile su Focus.
`<a href="#main" class="sr-only focus:not-sr-only">Vai al contenuto</a>`
Questo è il segno distintivo di un sito professionale.

## 7. Sensibilità al movimento (disturbi vestibolari)

Alcune animazioni provocano nausea.
Rispettare l'impostazione del sistema operativo dell'utente: "preferisce il movimento ridotto".
```css
@media (preferisce il movimento ridotto: riduci) {
  * {
    durata dell'animazione: 0,01 ms! importante;
    durata della transizione: 0,01 ms! importante;
  }
}

Se chiedono quiete, dagli la quiete.

8. Test del lettore di schermo (manuale)

L’automazione rileva il 30% degli errori. È necessario eseguire il test manualmente. Attiva VoiceOver (Mac) o NVDA (Windows). Chiudi gli occhi. Prova ad acquistare un prodotto sul tuo sito. Se non puoi… sei distrutto. Questo esercizio di empatia cambia il modo in cui codifichi.

10. Il carico cognitivo (Neurodiversità)

L’accessibilità non è solo fisica. È mentale. Per gli utenti con ADHD o autismo, un’interfaccia caotica è travolgente. Linee guida:

Coerenza: la navigazione dovrebbe trovarsi nello stesso posto su ogni pagina.
Chiarezza: nessun gergo. Usa un linguaggio semplice.
Calma: evita la riproduzione automatica dei video. Evitare luci lampeggianti (rischio epilessia). Un’interfaccia calma è un’interfaccia ad alta conversione.

11. La rivoluzione del controllo vocale (Siri/Dragon)

Gli utenti con disabilità motorie utilizzano il controllo vocale. “Fai clic su Aggiungi al carrello.” Se il tuo pulsante è codificato come "

", il software vocale non può vederlo. Cerca “Pulsanti”. Se utilizzi HTML semantico, il controllo vocale funziona immediatamente. “Scorri verso il basso. Fai clic su Checkout.” Questo è il futuro del commercio “a mani libere” (guida, cucina). A11y abilita il commercio vocale.

12. La prova dello zoom (ipovisione)

Gli utenti ipovedenti ingrandiscono al 200% o al 400%. Il tuo layout si rompe? Le lettere si sovrappongono? Tipografia fluida: utilizza le unità “rem”, non “px”. “font-size: 1rem” rispetta le impostazioni del browser dell’utente. “dimensione carattere: 16px” forza l’impostazione. Metti alla prova il tuo sito con uno zoom del 200%. Se il menu scompare, hai fallito.

13. Il caso legale (Domino’s)

Nel caso Robles v. Domino’s Pizza, la Corte Suprema ha respinto la petizione di Domino. La sentenza è valida: l’ADA vale per il mondo digitale. Domino’s sostiene: “La legge è stata scritta nel 1990, prima del web”. La Corte ha affermato: “L’intento è la parità di accesso. Il mezzo non ha importanza”. La Lezione: Aspettare una specifica “Legge sul Web” è una strategia perdente. Il rischio è retroattivo. Potresti essere citato in giudizio oggi per un sito che hai costruito 3 anni fa. La bonifica è 10 volte più costosa che realizzarla correttamente la prima volta.

14. La lista di controllo dell’audit (WCAG 2.1 AA)

Non indovinare. Segui l’elenco.

Percepibile: Testo alternativo, Didascalie, Contrasto.
Utilizzabile: navigazione tramite tastiera, senza lampeggiamento, limiti di tempo regolabili.
Comprensibile: navigazione coerente, identificazione degli errori, prevedibile.
Robusto: compatibile con la tecnologia assistiva (ARIA). Stampa questo elenco. Fissalo al tuo monitor. Ogni PR deve superare questa checklist.

15. Il futuro dell’A11a (Assistenza AI)

L’intelligenza artificiale rivoluzionerà l’accessibilità. Testo alternativo generativo: modelli come GPT-4 Vision possono aggiungere didascalie automatiche a 10.000 immagini in 1 ora. Semplificazione in tempo reale: l’intelligenza artificiale può riscrivere testi legali complessi in “inglese semplice” per gli utenti con disabilità cognitive. Navigazione vocale: “Agente, comprami le scarpe rosse.” Stiamo sviluppando queste funzionalità oggi. L’accessibilità si sta spostando da “Conformità” ad “Assistenza”.

16. L’esperienza dello sviluppatore (DX)

Scrivere codice accessibile è un codice più pulito. L’HTML semantico è più facile da leggere rispetto alla zuppa “div”. button è più chiaro di div class="btn". L’applicazione di A11y migliora l’integrità della base di codice. Riduce il debito tecnico. Rende più veloce l’onboarding di nuovi sviluppatori. Buona DX = buona UX.

17. La trappola dell’indice delle schede (non utilizzare numeri interi positivi)

Un errore comune è tabindex="1". Questo forza l’ordine. Se riorganizzi il DOM, l’ordine di tabulazione si interrompe. Regola:

tabindex="0": rende un div focalizzabile (in ordine naturale).
tabindex="-1": rendilo focalizzabile a livello di programmazione (JS), ma salta tramite Tab.
tabindex="1": MAI UTILIZZARE QUESTO. Combatte il browser. Lascia che sia il DOM a dettare l’ordine.

18. Il requisito HTML valido (analisi)

I lettori di schermo sono browser. Analizzano il tuo HTML. Se hai tag non chiusi o ID duplicati, il parser indovina. A volte sbaglia. Regola: il tuo codice HTML deve essere convalidato. Utilizza il validatore W3C. HTML non funzionante = Accessibilità non funzionante. È l’errore inaspettato che uccide l’esperienza. Scrivi un codice valido.

19. Il costo di manutenzione (codice pulito)

Il codice accessibile è più economico da mantenere. Perché? Perché forza la struttura. Se usi <div> ovunque, il tuo CSS diventa un incubo di selettori nidificati .card div div span. Se usi <article> <h1> <p>, il tuo CSS è semplice. Disaccoppia lo stile dalla struttura. Ciò rende il refactoring più sicuro. A11y è tecnicamente una metrica di qualità del codice. Investi in esso.

20. Conclusione

L’accessibilità è codificata per l’empatia. Significa che ti preoccupi di tutti gli utenti, non solo di quelli con una vista perfetta e un controllo motorio fine. Ti protegge dalle cause legali. Migliora il tuo SEO. Apre il tuo mercato. Non c’è alcun aspetto negativo.

Sei stato denunciato di recente?

Controlliamo e risolviamo le violazioni dell’accessibilità.

Audit My A11y. Assumi i nostri architetti.