L’utilità delle liste nell’accessibilità web
Gli elementi HTML si dividono in 2 macro-gruppi:
- HTML non semantico, cioè gli elementi che non possiedono funzionalità aggiuntive. Servono solamente per creare dei contenitori astratti. Div e Span fanno parte di questo gruppo;
- HTML semantico, cioè tutti gli elementi che hanno un significato preciso e, di conseguenza, delle funzioni associate. Servono per organizzare in modo funzionale e gerarchico i contenuti e la struttura del sito. Fanno parte di questo gruppo gli elementi: header, nav, footer, ul, ol ,li, a (link), H1 – H6 (tutti gli heading), button, e altri ancora.
Perché HTML semantico è utile per l’accessibilità?
Gli Screen Reader usano gli elementi dell’HTML semantico per navigare sul sito e per dare utili indizi. Annuncia i link, quindi capiamo che l’elemento è cliccabile. Comunica che un titolo è un H3, quindi capiamo che probabilmente siamo all’interno di una sezione con del testo.
1. Elementi Div
Il Div non è un elemento semantico e non comunica alcuna informazione allo Screen Reader.
2. Elementi Lista ul/ol/li
Meglio usare la lista html. Il vantaggio è che:
- Lo Screen Reader riconosce la lista e legge l’elemento come parte di quella lista;
- In pratica, se hai 3 cards, dice qualcosa come“list, 3 items”;
- In questo modo si può sapere quanti elementi sono presenti.
- Si può usare per elementi ripetuti, come le cards del blog o del team.
Nel libro Inclusive Components, Heydon Pickering scrive: “Importantly, it belongs to a list item because – like playing cards – you rarely see one card on its own.”
Usare le liste per elementi ripetibili
Gli Screen Reader usano gli elementi dell’HTML semantico per navigare sul sito e per dare utili indizi. Annuncia i link, quindi capiamo che l’elemento è cliccabile. Comunica che un titolo è un H3, quindi capiamo che probabilmente siamo all’interno di una sezione con del testo.
