Test di accessibilità: color-contrast e focus

Il CSS controlla il contrasto dei colori, la visibilità dell'indicatore di focus, la visibilità degli elementi (display:none li rimuove dall'albero dell'accessibilità) e l'ordine di lettura (il riordino visivo tramite flexbox order rispetto all'ordine nel DOM). Le scelte CSS influiscono direttamente sulla possibilità per le persone con disabilità di utilizzare l'interfaccia.

WCAG 2.1 AA richiede un rapporto di contrasto di 4.5:1 per il testo normale e di 3:1 per il testo grande (18px+ in grassetto oppure 24px+ normale). Il livello AAA richiede rispettivamente 7:1 e 4.5:1. Questi rapporti confrontano la luminanza del colore del testo in primo piano con quella del colore di sfondo.

Faccia clic su qualsiasi elemento di testo in DevTools → pannello Styles. Il campione di colore mostra un badge con il rapporto di contrasto. Un segno di spunta indica il superamento del requisito; una X indica un errore. Il selettore del colore mostra le linee delle soglie AA/AAA sul gradiente dei colori.

axe-core, Lighthouse e Pa11y verificano automaticamente i rapporti di contrasto di tutti gli elementi di testo. Esegua axe-core con @axe-core/react durante lo sviluppo per ricevere avvisi sul contrasto in tempo reale nella console del browser.

CSS outline: none o outline: 0 su :focus rimuove l'anello di focus predefinito del browser, rendendo invisibile la navigazione da tastiera. Si tratta di un grave problema di accessibilità. Lo sostituisca con uno stile di focus personalizzato e visibile invece di rimuovere completamente gli indicatori di focus.

:focus si applica a tutti gli eventi di focus, inclusi i clic del mouse, causando un anello visibile al clic che spesso non è gradito ai designer. :focus-visible si applica solo quando il browser determina che è in uso la navigazione da tastiera: in questo modo gli utenti da tastiera vedono l'anello di focus, mentre non viene mostrato ai clic del mouse.

WCAG 2.2 introduce il Criterio di successo 2.4.11 (Aspetto del focus AA): gli indicatori di focus devono avere un contrasto di almeno 3:1 rispetto ai colori adiacenti e comprendere il perimetro del componente. Gli stili di focus personalizzati devono soddisfare questi requisiti, non limitarsi a essere presenti.

La modalità Contrasto elevato di Windows sostituisce i colori CSS con colori di sistema definiti dall'utente. Utilizzi @media (forced-colors: active) per fornire stili alternativi compatibili con la modalità a contrasto elevato. Esegua i test tramite Impostazioni di Windows → Accessibilità → Contrasto elevato.

WCAG 1.4.1 vieta di utilizzare il colore come unico mezzo per comunicare informazioni. Uno stato di errore che diventa semplicemente rosso non soddisfa questo criterio. Combini il colore con icone, etichette di testo, motivi o sottolineature, così che sia sempre presente anche un'informazione indipendente dal colore.

WCAG 1.4.4 richiede che il testo possa essere ridimensionato al 200% senza perdita di contenuto. WCAG 1.4.12 richiede che le modifiche alla spaziatura del testo, come l'aumento di letter-spacing e line-height, non compromettano il layout. Utilizzi unità relative (rem, em) per la tipografia, così da soddisfare entrambi i requisiti.

Per test CSS completi sull'accessibilità, utilizzi l'estensione per browser axe DevTools durante lo sviluppo, Lighthouse CI per i controlli automatizzati nella pipeline, Pa11y per gli audit delle pagine dalla riga di comando e test manuali della navigazione da tastiera con Tab/Shift+Tab per verificare visibilità e ordine degli indicatori di focus.

Perché outline: none non dovrebbe mai essere il CSS definitivo per lo stato :focus di un elemento?

I test CSS per l'accessibilità coprono i rapporti di contrasto dei colori (minimo 4.5:1 per AA), indicatori di focus visibili e conformi a WCAG 2.2 tramite :focus-visible, l'evitare di usare il colore come unica fonte di informazione, il supporto alla modalità forced-colors e le unità tipografiche relative per la conformità al ridimensionamento. Gli strumenti automatizzati, insieme ai test manuali con la tastiera, garantiscono una copertura completa.