Come usare i tag HTML semantici per l'accessibilità
Abbiamo visto i tag principali da conoscere per strutturare il contenuto nell’articolo: Come sviluppare un sito web accessibile, ora vale la pena accennare ai tag che si occupano di dividere effettivamente tutte le sezioni principali della pagina.
I tag semantici
Se è vero che i titoli vengono usati per organizzare il contenuto, abbiamo dei tag “contenitori” da usare per creare la struttura che definisce le varie sezioni di un documento web.
Avete forse pensato al tag “div”? Ci siamo vicini, ma non è del tutto esatto: il tag “div” è molto generico e si applica a qualsiasi caso, ma esistono degli elementi molto più “semantici”, cioè con un significato che si adatta al contesto d’utilizzo, che andrebbero utilizzati quando possibile.
I principali sono:
header, indica la testata di una sezione, può essere usato all’interno di alcuni altri tag
footer, indica il fondo di una sezione, può essere usato all’interno di alcuni altri tag
main, generalmente è solo uno per pagina proprio perché è il contenitore “principale”, è buona pratica aprirlo subito dopo l’apertura del body e chiuderlo subito prima della chiusura del body.
section, indica la presenza di una sezione di contenuto, pensiamo ad esempio alle sezioni della pagina che riguardano i “prodotti correlati” o “ultime news”, ognuna potrebbe essere inserita dentro un proprio tag “section”
article, generalmente usato per le singole entità come un prodotto, un articolo di giornale, un post, un commento
nav, si usa per indicare la presenza di elementi di navigazione, come i menù, può ad esempio essere inserito dentro un “aside” e contenere elementi “ul/li” per creare una navigazione laterale
aside, indica la porzione che sta a lato in una pagina, ad esempio per la barra laterale che contiene le ultime news o gli ultimi commenti
Non fraintendiamoci, il classico <div class=”container”> va benissimo per molti casi, tuttavia se dobbiamo racchiudere ciò che riguarda un’entità, come nel caso di un listato di articoli di blog o un elenco di prodotti, meglio usare il tag article> per i singoli elementi.
Ad esempio, per la sezione che contiene i prodotti correlati, potremmo usare una struttura HTML di questo genere:
body > main > section#prodotti-correlati > div.container > ul > li > article > h2 > a
Note: la classe “container” viene generalmente usata in framework CSS come Bootstrap, del quale parleremo prossimamente per quanto riguarda l’accessibilità.
In linea generale, questi tag che abbiamo visto possono avere un uso piuttosto ampio e a volte ambiguo: quando è meglio usare “section” rispetto ad “article”? Oppure, quando dobbiamo considerare un insieme di link come un elemento di navigazione e quindi usare il “nav”? In effetti sono concetti discutibili e non c’è una regola specifica.
L’approccio più logico è usare il buon senso, difficilmente avremo bisogno di un “aside” per il contenuto principale della pagina, o di usare due “header” uno di seguito all’altro.
È anche vero che i tag “header” e “footer” potrebbero essere usati più volte, ad esempio all’interno di ogni tag “article”, ma non dobbiamo per forza scervellarci e impazzire per ogni singolo caso. Cerchiamo quantomeno di impostare correttamente i tag principali, poi con l’esperienza impareremo quale soluzione è più corretta rispetto alle altre.
Esistono poi altri tag, meno diffusi ma comunque importanti, come <search> e <hgroup>, che è utile almeno conoscere.
