Accessibilità Web:
Usare le liste per
Elementi ripetibili

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 4

Data di pubblicazione: 19 Aprile 2022

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 gruppi 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.”