Costruire una <nav> semantica e accessibile

Nella pillola sulla semantica HTML abbiamo visto che <nav> racchiude i blocchi di navigazione principali, non ogni gruppo di link. Qui andiamo oltre: cosa succede quando una pagina ha più di un <nav>, e come dire a chi ascolta «sei qui» invece di limitarsi a uno stile diverso via CSS.

1. Più <nav> nella stessa pagina: serve un'etichetta per ciascuno

<nav> è già, di per sé, un landmark: è preferibile usare l'elemento <nav> per definire un landmark di navigazione piuttosto che role="navigation". Ma quando la pagina ha più di un <nav> (menu principale, breadcrumb, footer), ciascuno deve avere un'etichetta univoca con aria-label, altrimenti chi naviga per landmark li sente tutti annunciati semplicemente come «navigazione», senza sapere quale sia quale.

<nav aria-label="Principale"> ... </nav>
<nav aria-label="Breadcrumb"> ... </nav>
<nav aria-label="Pie' di pagina"> ... </nav>

Un caso particolare: se ripeti lo stesso menu due volte nella pagina (per esempio in testa e in fondo), usa la stessa etichetta per entrambi: segnalano lo stesso contenuto, non due navigazioni diverse.

Fonte: MDN Web Docs, «ARIA: navigation role»: se una pagina ha più landmark di navigazione, ciascuno deve avere un'etichetta univoca; landmark ripetuti con contenuto identico condividono la stessa etichetta.

2. aria-current: dire «sei qui», non solo mostrarlo

Quando evidenzi visivamente la voce di menu attiva (un colore diverso, un bordo), quell'informazione resta invisibile a chi usa uno screen reader, a meno di dichiararla anche nel markup. aria-current serve esattamente a questo: informa la tecnologia assistiva di ciò che lo stile comunica solo visivamente.

<nav aria-label="Principale">
    <a href="/">Home</a>
    <a href="/pillole" aria-current="page">Pillole</a>
    <a href="/servizi">Servizi</a>
</nav>

Il valore page è il più comune (pagina corrente in un menu o breadcrumb), ma esistono altri valori per contesti diversi, per esempio step per lo step attivo in un processo a più fasi come un checkout.

Fonte: MDN Web Docs, «ARIA: aria-current attribute»: usato per informare la tecnologia assistiva di ciò che è indicato visivamente tramite stile, come l'elemento corrente in un breadcrumb o menu.

3. Il breadcrumb: la struttura ufficiale

Il breadcrumb (il percorso «Home > Categoria > Pagina») ha un pattern ufficiale, documentato dal W3C WAI-ARIA Authoring Practices Guide: un <nav> etichettato, contenente una lista ordinata (l'ordine è parte del significato, come visto nella pillola sulle liste HTML), con aria-current="page" sull'ultimo elemento.

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/pillole">Pillole</a></li>
        <li><span aria-current="page">Prototype chain</span></li>
    </ol>
</nav>

Nota tecnica: l'ultimo elemento, la pagina in cui ti trovi, di solito non è un link (non ha senso linkare a se stessi), quindi si usa <span> invece di <a>. In quel caso specifico aria-current diventa opzionale, ma resta comunque una buona pratica esplicitarlo.

Fonte: W3C WAI-ARIA APG, «Breadcrumb Pattern»: il breadcrumb va racchiuso in un landmark di navigazione etichettato, con aria-current="page" sul link (o elemento) della pagina corrente.

In sintesi

Una <nav> ben fatta non si limita a raggruppare dei link: etichetta cosa contiene e dichiara dove ti trovi, due informazioni che un menu visivamente chiaro comunica da solo, ma che senza markup corretto restano invisibili a chi non può vederlo.