Liste HTML e screen reader

Non tutti i lettori di schermo annunciano la presenza di una lista se l’aspetto viene modificato tramite CSS.

Gli screen reader sono uno strumento utile, per qualcuno indispensabile, ma a volte si comportano in maniera diversa da quello che ci si potrebbe aspettare.

Una di queste situazioni è stata descritta pochi giorni fa su 456 Berea Street, e riguarda le liste HTML: i classici tag <ol> e <ul>. Quando l’aspetto della lista viene nascosto tramite fogli di stile, molti screen reader non la annunciano come tale, anche se il codice HTML dice il contrario.

Questo si verifica utilizzando gli attributi CSS:

list-style-type: none

oppure

list-style: none

In questi casi NVDA su Firefox, Orca e VoiceOver non dichiareranno la presenza di una lista. Non è un problema gravissimo, ma questo comportamento peggiora l’esperienza di navigazione degli utenti che usano uno screen reader. Non saranno infatti in grado di capire quando inizia o finisce un elemento.

Una informazione del genere ovviamente va valutata a seconda delle situazioni e del target di utenti: nessuno vi impedisce di usare list-style: none, ma se lavorate su un sito dove tenete all’accessibilità, considerate l’ipotesi di mostrare le liste come tali, senza ricorrere a immagini in background per i puntatori o stratagemmi simili.

Se vi interessa approfondire l’argomento screen reader e volete testare il vostro sito, trovate altre informazioni utili in questo post: Uno screen reader per i test.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

2 commenti su “Liste HTML e screen reader”

  1. Tom, preziosa notizia!
    Ormai ci si aspetta da un sito accessibile che sia oltre che bello anche indistinguibile da quelli che hanno raggiunto buoni standard di qualità e diffusione.
    Perciò è difficile avere la fantasia per includere link dai colori tradizionali e punti di elenco in un menu.
    Penso dovrebbero adeguarsi i browser.
    Inizialmente annunciavo la presenza di una lista con un tag inizio menu: x voci, seguito da analoga indicazione per la fine dell’elenco. Ma ho pensato che aggiungesse troppa informazione non di sostanza.
    Si può ovviare con appropriate intestazioni.