Gli errori WCAG più comuni

Gli errori WCAG più comuni sono sei: contrasto insufficiente, testo alternativo mancante, campi senza etichetta, link vuoti, bottoni vuoti e lingua del documento assente. Nel campione WebAIM Million di febbraio 2026 coprono il 96% degli errori rilevati, e il 95,9% delle homepage ha almeno una violazione WCAG 2.

Contrasto: si misura, non si guarda

Il criterio 1.4.3 chiede un rapporto di 4,5:1 per il testo normale e 3:1 per quello grande; il 83,9% delle homepage non lo rispetta. Il fix non sta nel singolo componente: sta nei token del tema. Correggi la coppia sfondo/testo e ricalcola i contrasti una volta, invece di rincorrere i casi. La palette misurata del catalogo è in palette e contrasto misurato.

Alt, etichette, nomi accessibili

• Immagini (1.1.1): un'alt informativa descrive la funzione dell'immagine; un'immagine decorativa porta alt="" e non viene annunciata.
• Campi di form (3.3.2): ogni input ha un <label for> o un nome accessibile; il placeholder non è un'etichetta e sparisce quando si scrive.
• Bottoni con icona (4.1.2): il nome arriva dal testo visibile o da aria-label. Un SVG dentro il bottone resta decorativo con aria-hidden="true".

Link e bottoni vuoti

Il 46,3% delle pagine ha almeno un link senza nome accessibile e il 30,6% almeno un bottone vuoto. Il caso tipico è l'icona social con dentro solo un SVG: il nome manca, il controllo resta raggiungibile da tastiera e il lettore di schermo annuncia «link». Non aggiungere aria-label se il testo visibile c'è già: crea una discrepanza tra ciò che si vede e ciò che si pronuncia.

La lingua del documento

Il 13,5% delle pagine non dichiara la lingua. Serve un attributo sull'elemento radice, <html lang="it">, e un lang diverso sui blocchi scritti in un'altra lingua. Senza, il lettore di schermo applica la fonetica sbagliata e la pagina diventa incomprensibile anche se il testo è corretto.

Come trovarli in fretta

Pa11y è open source con licenza LGPL-3.0 e applica le regole WCAG alla pagina renderizzata. Il comando sotto controlla l'intero sitemap e restituisce una riga per URL.

npx --yes pa11y-ci --sitemap https://example.com/sitemap.xml --standard WCAG2AA

Poi fai il controllo che nessuno strumento sostituisce: tab attraverso la pagina, Enter e Space sul primo controllo, e ascolta l'annuncio con VoiceOver o NVDA. Un errore di contrasto lo vede il tool, un nome che descrive la cosa sbagliata lo sente solo chi ascolta.

Il catalogo EneUI

EneUI indicizza i componenti della categoria accessibilità e i componenti di form. Un record verificato è dialog di Origin UI, licenza MIT dichiarata a monte: dipende da @radix-ui/react-dialog, quindi nome, focus e chiusura con Escape arrivano dalla primitiva. Controllo eseguito il 1 novembre 2026 sul catalogo da 111.985 componenti.

La limitazione

Un audit automatico misura ciò che è decidibile senza contesto. Non distingue un alt utile da uno inutile, non vede se il focus torna al punto giusto dopo la chiusura di un modale e non sente un annuncio sbagliato. Il conteggio di 56,1 errori per pagina è quindi un limite inferiore: la pagina conformità non arriva da nessuno strumento.

Dove continuare

Il processo completo è in come fare un audit di accessibilità; la checklist operativa per i componenti è in componenti React accessibili. Per capire quali attributi servono davvero, leggi il confronto fra primitive headless in Radix, Base UI e React Aria.