Le pratiche CSS che possono danneggiare l'accessibilità

I CSS sono diventati un linguaggio onnipotente. Quello che è iniziato come un mezzo per aggiungere uno stile di base al testo e ad altri elementi di design è ora in grado di fare molto di più.

Possiamo usarlo per creare praticamente qualsiasi layout immaginabile. Gli effetti speciali e l'interattività che prima richiedevano JavaScript o plug-in del browser sono ora supportati in modo nativo. Il linguaggio è passato da uno strumento di base a una delle tecnologie fondamentali alla base di ogni sito web.

Ma come ogni potente strumento, i CSS possono anche avere effetti collaterali indesiderati. L'accessibilità è tra le maggiori aree di preoccupazione. Alcune implementazioni possono davvero fare più male che bene.

Con questo in mente, diamo un'occhiata ad alcune pratiche CSS che possono danneggiare l'accessibilità. Includono funzionalità comuni che richiedono un'attenta considerazione prima di iniziare a scrivere codice. Iniziamo!

Visualizzazione di testo importante utilizzando la proprietà content

La proprietà del content CSS offre un modo semplice per aggiungere miglioramenti visivi a un elemento. Ad esempio, potresti usarlo in combinazione con uno pseudo-elemento per aggiungere un'icona prima di un passaggio di testo o di una voce di elenco. Può anche visualizzare immagini o stringhe di testo.

Ma quest'ultimo può essere particolarmente fastidioso. Il testo aggiunto tramite la proprietà del content non è incluso nel modello a oggetti del documento (DOM). Ciò significa che la tecnologia assistiva come i lettori di schermo potrebbe non riconoscerla.

Questo va bene per oggetti puramente decorativi. Tuttavia, potrebbe portare a problemi di accessibilità se il testo fornisce un contesto vitale a una pagina. Gli utenti potrebbero perdere informazioni importanti.

Pertanto, è meglio evitare di utilizzare la proprietà del content per la visualizzazione del testo. Questo a meno che tu non sia sicuro che non interferirà con la capacità di un utente di comprendere la pagina.

Creazione di intense sequenze animate lampeggianti

L'animazione è un'area in cui i CSS hanno visto una grande evoluzione. Gli effetti che una volta erano il territorio delle librerie di terze parti ora possono essere realizzati con relativa facilità. E poiché sono supportati in modo nativo, possono sfruttare funzionalità come l'accelerazione hardware per migliorare le prestazioni.

Le transizioni e le trasformazioni di base possono fare miracoli per creare uno stato d'animo e catturare l'attenzione di un utente. Ed è anche possibile costruire effetti incredibilmente realistici con l'aiuto di JavaScript.

Ma alcuni stili di animazione possono avere effetti negativi. Per alcuni utenti, troppo movimento può essere disorientante o molto peggio. Lampi intensi o effetti stroboscopici possono portare a convulsioni. Questo è possibile sul web, proprio come nei film, nei programmi televisivi e nei videogiochi.

Le WCAG 2.0 offrono alcune indicazioni supportate dalla ricerca per la creazione di animazioni che non provochino convulsioni o altre reazioni avverse. Ad esempio, si consiglia di impostare una presentazione in modo che lampeggi non più di tre volte al secondo, oltre a mantenere le dimensioni ridotte ed evitare il colore rosso.

Per fortuna, questo non limita la nostra capacità di impressionare gli utenti con il movimento. Ci sono ancora molte opportunità per migliorare il nostro lavoro. Ma i tipi di animazione utilizzati e il loro potenziale impatto devono essere esaminati attentamente.

Stati non intuitivi :hover o :focus sugli elementi interattivi

I CSS sono esperti nello styling di elementi interattivi. Considera cosa è possibile fare con oggetti di uso quotidiano come collegamenti ipertestuali e campi modulo. Possono essere personalizzati al punto da essere irriconoscibili rispetto al loro aspetto predefinito.

Va tutto bene. Ma è anche importante pensare a cosa succede quando un utente interagisce con un elemento. Immagina di fare clic su un pulsante che non offre alcun segnale visivo per confermare ciò che è accaduto. Oppure utilizzare una tastiera per scorrere un menu che non evidenzia il collegamento corrente.

Possono essere semplici, ma queste micro-interazioni aiutano a fornire agli utenti un contesto. Confermare il clic di un pulsante o capire su quale voce di menu è focalizzato il cursore sono solo due esempi. E ognuno porta un senso di fiducia mentre un visitatore naviga in un sito web.

Lo stile iniziale di un elemento interattivo è solo metà della battaglia. L'offerta di stili intuitivi per le pseudo-classi :hover e :focus completa l'esperienza dell'utente.

Vale la pena notare che questi stili dovrebbero essere facilmente percepibili. In pratica, ciò significa utilizzare qualcosa di più del semplice colore come indicatore. L'aggiunta di animazioni, contorni o icone può aiutare a garantire che nessuno venga escluso.

Dare per scontate le basi del design accessibile

Ci siamo passati tutti. La scadenza di un progetto si sta avvicinando rapidamente e devi portare a termine le cose. Nella corsa al lancio, alcuni elementi relativi all'accessibilità potrebbero passare inosservati.

Molto spesso sono le basi del design accessibile che vengono tralasciate. Quelle pratiche CSS che i progettisti potrebbero dare per scontate e presumere siano già all'altezza degli standard.

I primi esempi includono fondamenti come tipografia leggibile e rapporti di contrasto del colore accettabili. Senza considerare e testare questi elementi, un sito Web potrebbe non essere così accessibile come pensi.

Ecco perché vale la pena prendersi del tempo in più per esaminare gli aspetti più ampi degli stili del tuo sito. Anche se un articolo supera l'ispezione "a bulbo oculare", fai il possibile per eseguire un controllo. Potresti essere sorpreso di quante opportunità di miglioramento sottile troverai.

Si tratta di utilizzare i CSS in modo responsabile

Poiché i CSS sono così potenti, è facile essere tentati dalle possibilità che ha da offrire. Perché accontentarsi di un'animazione di base quando puoi creare qualcosa di cinematografico? E come potremmo non amare la comodità di usarlo per generare contenuti?

Tutto si riduce all'empatia e alla responsabilità. Come ogni strumento, i CSS sono capaci di grandi cose. Ma solo perché possiamo implementare una funzionalità specifica non significa che sia adatta per l'accessibilità. Viviamo in un mondo in cui persone di ogni estrazione sociale consumeranno ciò che costruiamo. Ed è nostro compito assicurarci che possano farlo senza ostacoli.

Il lato positivo è che evitare le pratiche di cui sopra è alla portata di tutti. Per la maggior parte, si tratta di pensare al potenziale impatto di ciò che facciamo. Da lì, i test ci forniscono i dati di cui abbiamo bisogno per perfezionare ulteriormente le cose.

CSS è lì per rendere più facile l'accessibilità. Sta tutto nel modo in cui scegliamo di usarlo.