perché i filtri nel mio negozio online non funzionano con uno screen reader

I filtri spesso mancano di nome, ruolo o notifica di stato

I filtri dei prodotti di solito non funzionano con un'utilità di lettura dello schermo perché non è sufficientemente chiaro cosa sia un filtro, quale sia lo stato corrente o cosa accada quando l'utente fa una scelta. Su molti negozi online i filtri sono costituiti da caselle di controllo o pulsanti che funzionano bene visivamente, ma che sono costruiti in modo incompleto dal punto di vista programmatico: una casella di controllo senza etichetta associata, un pulsante che mostra un filtro attivo solo attraverso un cambio di colore, oppure un pannello di filtri che si apre senza che un'utilità di lettura dello schermo lo comunichi. Per un visitatore che vede non è un problema, perché percepisce il cambiamento. Per un'utilità di lettura dello schermo quel cambiamento visivo non esiste — ha bisogno di un annuncio tecnico.

Un altro problema ricorrente è che l'elenco dei risultati cambia, ma un'utilità di lettura dello schermo non se ne accorge. Ad esempio, viene visualizzato "24 risultati" sotto il filtro, ma senza che questo sia comunicato come notifica di stato, quindi l'utente deve cercare da solo cosa è cambiato. Questo è strettamente legato a come le intestazioni e la struttura della pagina sono costruite, perché un'utilità di lettura dello schermo spesso naviga attraverso quella struttura per determinare dove iniziano i risultati — maggiori dettagli sono disponibili in perché uno screen reader non legge correttamente i titoli sulla mia pagina. Anche il modo in cui lo stato attivo (focus) si comporta dopo l'applicazione di un filtro gioca un ruolo: se lo stato attivo salta inaspettatamente in un'altra parte della pagina, l'utente di un'utilità di lettura dello schermo perde il filo, come descritto in perché il cursore o lo stato attivo si muove in modo confuso sul mio sito web.

Cosa prescrive WCAG al riguardo

Il fatto che i filtri debbano comunicare un nome, un ruolo e uno stato alla tecnologia di assistenza come un'utilità di lettura dello schermo, e che i cambiamenti di stato come un numero di risultati modificato siano annunciati, deriva dai criteri su nome, ruolo e valore e su messaggi di stato in WCAG 2.1 (W3C) — il livello che in pratica ci si aspetta attraverso EN 301 549. Una scansione automatica riconosce alcuni di questi difetti, come una casella di controllo senza etichetta, ma se una notifica di stato sia effettivamente comprensibile per un utente richiede una valutazione che una scansione non può fare — vedi un test di accessibilità automatico può trovare tutto.