Le liste e i ruoli ARIA in HTML

Continua la nostra esplorazione dei tag HTML per formattare il testo, in questo approfondimento parliamo di liste. Ne abbiamo diverse e tutte meritano un approfondimento.

Liste ordinate e non ordinate

Per creare liste ordinate e non ordinate abbiamo a disposizione due tag:

• <ul>: il cui significato è unordered list ed è il tag che usiamo per le liste non ordinate, quindi quelle dove l’ordine degli elementi non è importante.
• <ol>: il significato è ordered list ed è il tag che usiamo per le liste ordinate, quindi quelle dove l’ordine degli elementi è più importante, una ricetta, una guida passo passo, sono i classici esempi dove l’ordine è importante, ma non solo. Anche una lista di commenti ad un articolo di un blog è una lista di elementi ordinati, ordinati in ordine cronologico.

Per poter creare gli elementi delle liste possiamo avvalerci del tag <li> il cui significato è list item.

Un primo esempio di liste quindi potrebbe essere:

1<ul>
2<li>Elemento 1</li>
3    <li>Elemento 2</li>
4    <li>Elemento 3</li>
5</ul>
6<ol>
7    <li>Elemento 1</li>
8    <li>Elemento 2</li>
9    <li>Elemento 3</li>
10</ol>

La prima quindi verrà renderizzata come una lista, dove gli elementi sono preceduti da un bullet point. Se volessimo cambiare l’aspetto di questo pallino dobbiamo usare CSS, esistevano degli attributi per farlo, ma sono stati deprecati a favore delle proprietà di CSS per l’appunto.

La seconda lista, quella ordinata, non ha degli anonimi pallini, ma dei numeri. La cosa bella di <ol> è che possiamo controllare alcuni aspetti grazie all’uso degli attributi, nello specifico:

• reverse: permette di invertire l’ordine dei numeri, partirà dal più alto e arriverà ad uno. Attenzione: non inverte l’ordine dei list item, cambia solo il numerino.
• start: qualora fosse necessario possiamo modificare l’inizio del conteggio ad un numero a nostro piacimento
• type: tipo di numerazione che si vuole mostrare, il valori possibili sono:
  • a: lettere minuscole
  • A: lettere maiuscole
  • i: numeri romani minuscoli
  • I: numeri romani maiuscoli
  • 1: numeri (valore di default)

Liste annidate

Le liste possono essere annidate. Questo ci permetterà di creare dei sotto listati, un po’ come quello che ho fatto nel paragrafo precedente. HTML non prevede un limite al numero di annidamenti e non ci sono restrizioni in termini di tipo di lista da utilizzare, si può tranquillamente alternare liste ordinate e non ordinate.

1<ul>
2<li>Elemento 1</li>
3    <li>
4        Elemento 2
5        <ul>
6            <li>Elemento 1</li>
7            <li>Elemento 2</li>
8            <li>Elemento 3</li>
9            <li>Elemento 4</li>
10        </ul>
11    </li>
12    <li>Elemento 3</li>
13</ul>

Il tag per le liste interattive

Esiste un tag, che personalmente reputo un po’ inutile, <menu> che da specifica è descritto come la versione semantica di <ul>, ma il bello è che è identico a quest’ultimo, in tutto e per tutto.

Semanticamente non c’è alcuna differenza, ma la documentazione consiglia, per quanto poi evidenzi che non c’è alcuna differenza in un approccio piuttosto che un’altro, di usare <menu> per rappresentare una lista di elementi interattivi, come dei bottoni o dei link, mentre <ul> può essere usato allo scopo di rappresentare un normale listato.

Per rappresentare gli elementi del menu si usano sempre i <li>, al posto dei <menuitem>, elemento che è stato deprecato.

<menu> quindi possiamo usarlo per creare delle toolbar, ma usarlo o usare <ul> non fa alcuna differenza.

Description list

Decisamente molto più interessanti di <menu> sono le description list. Le quali sono uno speciale tipo di lista che raccoglie termini e definizioni.

I tag da usare in questo caso non sono quelli visti finora, ma sono:

• <dl>: sta per description list ed è il contenitore di termini e definizioni
• <dt>: sta per description term ed è il termine che vogliamo definire
• <dd>: sta per description details ed è la definizione del termine

1<dl>
2    <dt>HTML</dt>
3    <dd>Hyper Text Markup Language usato per costruire pagine web.</dd>
4    <dt>CSS</dt>
5    <dd>Cascading Style Sheet usato per dare stile ai documenti HTML.</dd>
6    <dt>JS</dt>
7    <dd>JavaScript linguaggio di programmazione usato per rendere dinamica la pagina web.</dd>
8</dl>

Per ogni <dt> possiamo avere più <dl> e viceversa, perché in fondo esistono termini che hanno più definizioni e definizioni che vanno bene per più termini.

Accessibilità delle liste HTML

Dopo aver introdotto le description list voglio agganciarmi al discorso accessibilità ed introdurre un concetto che per ora ho solo accennato.

Ma prima ricordati sempre di non usare le description list e i listati non ordinati per mero scopo di indentazione/stilistico. Per quanto funzioni, è considerata una bad practice ed è quindi da evitare per non rendere vano il ruolo di questi due listati.

Proprio su questo ultimo concetto di ruolo mi voglio soffermare un attimo.

I ruoli degli elementi HTML

Tutti gli elementi visti in questa lezione e anche nelle lezioni precedenti hanno quasi sempre un ruolo predefinito. Ma cosa vuol dire?

In HTML ci sono ruoli e attributi che appartengono al gruppo ARIA (Accessible Rich Internet Applications) i quali permettono di rendere le web application più accessibili a persone con disabilità.

Fare attenzione al ruolo degli elementi ci permette di creare applicazioni accessibili ed evitare, in alcuni casi, anche delle sovra ottimizzazioni.

Per capire meglio le sovra ottimizzazioni prendiamo in considerazione ancora una volta la description list.

<dl> di per sé non ha un ruolo specifico, lo si può notare alla voce implicit ARIA role della documentazione su MDN, ma se andiamo a vedere i ruoli impliciti di <dt> e <dd>, allora in quel caso il discorso cambia, perché il primo ha ruolo term, mentre il secondo ha ruolo definition.

Il significato di questi due ruoli è abbastanza intuitivo:

• term: è il ruolo che viene usato per una parola o frase che può avere una definizione opzionale
• description: è la definizione del term

Se volessimo creare una definizione di un termine in HTML sfruttando elementi generici possiamo scrivere:

1<p>
2  <span role="term">Spada Laser</span>,
3  <span role="definition">
4    arma dei cavalieri Jedi. Non è goffa o erratica come un fulminatore. È elegante, invece, per tempi più civilizzati
5  </span>
6</p>

Non c’è niente di sbagliato in questo codice, abbiamo usato un elemento generico privo di ruolo <span> e gliene abbiamo assegnato uno grazie all’uso dell’attributo role.

Quando si parla di accessibilità però il consiglio generale è quello di usare sempre i tag semanticamente corretti prima di ricorrere a <span> e <div> (entrambi sono tag generici di cui parleremo più nel dettaglio più avanti).

Volendo quindi, l’esempio qui sopra possiamo modificarlo con un tag di nostra conoscenza, <dfn>, visto nella lezione sui tag per formattare il testo in HTML.

1<p>
2  <dfn>Spada Laser</dfn>, arma dei cavalieri Jedi. Non è goffa o erratica come un fulminatore. È elegante, invece, per tempi più civilizzati.
3</p>

E se invece fosse stata una lista di definizioni? Beh in quel caso una description list sarebbe stata la scelta ideale:

1<dl>
2    <dt>Spada Laser</dt>
3    <dd>arma dei cavalieri Jedi. Non è goffa o erratica come un fulminatore. È elegante, invece, per tempi più civilizzati.</dd>
4<dt>Wookie</dt>
5    <dd>gli Wookiee, il cui nome tradotto di per sé significa il Popolo degli Alberi, erano una specie di umanoidi bipedi pelosi che erano abitanti del pianeta Kashyyyk</dd>
6</dl>

Tornando quindi al discorso sovra ottimizzazioni se avessimo scritto <dt><dfn>Spada laser</dfn></dt> avremmo sovra ottimizzato l’accessibilità perché sia dt che dfn hanno lo stesso medesimo ruolo e cioè term.

Quindi fai sempre attenzione ai ruoli e tiene sempre sotto mano la documentazione. I veri pro sono quelli che la leggono e lo ammettono :)