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.