Come hai appreso nella sezione link, l'elemento <a> con l'attributo href
crea link che gli utenti possono seguire facendo clic o
facendo tap. Nella sezione Elenchi, hai imparato a creare elenchi di contenuti. In questo modulo scoprirai come raggruppare gli elenchi di link per creare la navigazione.
Esistono diversi tipi di navigazione e diversi modi per visualizzarli. Gli ancoraggi con nome all'interno del testo che rimandano ad altre pagine dello stesso sito web sono considerati navigazione locale. La navigazione locale costituita da una serie di link che mostra la gerarchia della pagina corrente rispetto alla struttura del sito o le pagine seguite dall'utente per raggiungere la pagina corrente è chiamata breadcrumb.
Un altro tipo di navigazione locale è l'indice di una pagina. Una pagina contenente link gerarchici a ogni singola pagina di un sito viene chiamata mappa del sito. La navigazione che porta alle pagine di primo livello del sito web, che probabilmente si trova su ogni pagina, è chiamata navigazione globale. La navigazione globale può essere visualizzata in diversi modi, tra cui barre di navigazione, menu a discesa e menu a scomparsa. Lo stesso sito può mostrare la navigazione globale in modo diverso, a seconda delle dimensioni dell'area visibile.
Assicurati sempre che gli utenti possano accedere a qualsiasi pagina del tuo sito con il minor numero di clic, assicurandoti al contempo che la navigazione sia intuitiva e non eccessiva. Detto questo, non sono previsti requisiti specifici per gli elementi di navigazione. MachineLearningWorkshop.com, essendo un sito web di una sola pagina, ha una barra di navigazione locale in alto a destra; è qui che i siti con più pagine inseriscono spesso la navigazione globale.
Link "Vai ai contenuti"
Alcuni siti presentano un link "Vai ai contenuti", spesso come primo elemento nell'ordine di selezione. Potrebbe avere un aspetto simile al seguente:
<a href="#main" class="skip-link button">Skip to main</a>
Quando viene selezionato o quando è impostato lo stato attivo e l'utente fa clic su Enter, scorre la pagina
e imposta lo stato attivo sull'elemento con un ID main, presumibilmente il contenuto principale.
<main id="main">
Per migliorare l'usabilità e l'accessibilità, è importante consentire agli utenti di ignorare i blocchi di contenuti ripetuti in ogni pagina, ad esempio una intestazione condivisa e gli elementi di navigazione principali. Con uno skip link, quando un utente della tastiera preme tab, può passare rapidamente ai nuovi contenuti della pagina. In questo modo, non devono scorrere un menu ampio.
La maggior parte dei designer non ama l'aspetto di un link simile nella parte superiore della pagina. Questo link può essere nascosto dalla visualizzazione. Tuttavia, ricorda che quando il link diventa lo stato attivo, che si verifica quando una tastiera utilizza il link nella pagina, il link deve essere visibile all'utente.
Nascondi solo i contenuti in uno stato non attivo e non attivo utilizzando un selettore simile a .visually-hidden:not(:focus):not(:active).
Come per tutto il testo del link, il nome deve indicare chiaramente dove indirizza l'utente. La destinazione del link deve essere l'inizio dei contenuti principali della pagina.
Sommario
Il primo elemento dei contenuti principali è l'intestazione <h1> con il titolo di questa pagina: <h1>Navigation</h1>. L'intestazione principale è followed da una breve descrizione dei contenuti di questo tutorial.
Sugli schermi più piccoli, il sommario viene visualizzato dopo l'intestazione. Su schermi più grandi, viene visualizzata in una barra laterale allineata a destra.
L'elemento migliore da utilizzare per le sezioni di navigazione è <nav>.
Informo automaticamente lo screen reader e il motore di ricerca che una sezione ha un ruolo navigation, un ruolo di punto di riferimento.
Includi l'attributo aria-label per una breve descrizione dello scopo della navigazione. In questo
caso, il valore dell'attributo sarebbe ridondante rispetto al testo "In questa
pagina". Per fare riferimento al testo visibile, utilizza invece
aria-labelledby.
Con un elemento id, il risultato potrebbe essere il seguente:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
...
</nav>
Oltre a ridurre la ridondanza, il testo visibile viene tradotto dai servizi di traduzione, mentre i valori degli attributi potrebbero non essere tradotti. Se possibile, se è presente un testo che fornisce un'etichetta adeguata, fai riferimento a quel testo anziché utilizzare il testo dell'attributo.
Il menu di navigazione "In questa pagina" è il sommario. Se vuoi utilizzare
aria-label, fornisci questo contesto anziché ripetere il testo visibile:
<nav aria-label="Table of Contents">
<p>On this page</p>
...
</nav>
Per fornire un nome accessibile su un elemento, non devi includere il nome
dell'elemento. Gli screen reader forniscono all'utente il nome dell'elemento.
Ad esempio, quando utilizzi l'elemento <nav>, non includere la parola "navigazione", poiché queste informazioni sono già incluse negli elementi semantici.
Sebbene gli elementi di navigazione non debbano essere nidificati in un elenco, l'utilizzo di un elenco consente agli utenti di screen reader di sapere quanti elementi dell'elenco e, di conseguenza, i link sono presenti nella navigazione.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
Evita di modificare l'ordine delle schede
L'indice può essere visualizzato dopo l'intestazione, su schermi più piccoli o in una barra laterale allineata a destra. Includere due insiemi di navigazione identici, solo per mostrarne uno, sarebbe un anti-pattern.
Abbiamo utilizzato CSS per visualizzare il menu di navigazione come barra laterale nelle pagine più larghe di 1254 pixel.
Sebbene gli utenti siano abituati a contenuti responsivi e che cambiano posizione quando cambiano dispositivo o aumentano le dimensioni dei caratteri, non si aspettano che l'ordine delle schede cambi in questo caso. I layout delle pagine devono essere accessibili, prevedibili e coerenti in un sito. In questo caso, la posizione del sommario non è prevedibile.
Breadcrumb di pagina
I breadcrumb forniscono una navigazione secondaria per aiutare gli utenti a capire dove si trovano su un sito web. I breadcrumb in genere indicano la gerarchia dell'URL del documento corrente e la posizione della pagina corrente all'interno della struttura del sito.
La struttura del sito dal punto di vista dell'utente può essere diversa dalla struttura dei file sul server e non c'è problema. L'utente non deve sapere come organizzi i file, ma deve essere in grado di navigare tra i tuoi contenuti.
I breadcrumb offrono agli utenti informazioni sull'organizzazione del tuo sito. In questo modo, gli utenti possono accedere a qualsiasi sezione principale senza dover riaprire tutte le pagine visitate in precedenza utilizzando la funzione back.
Se il sito ha una struttura di directory gerarchica, come nel caso di web.dev, la navigazione a breadcrumb spesso include un link alla home page o al nome host e un link al file indice di ogni directory nel percorso dell'URL. L'inserimento della pagina corrente è facoltativo e richiede un po' di attenzione in più.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Le sezioni del breadcrumb mostrano il percorso dalla pagina corrente alla home page, mostrando ogni livello intermedio.
Ogni pagina del modulo Impara HTML ha la stessa navigazione con breadcrumb, che mostra la gerarchia delle lezioni HTML nella sezione Learn di web.dev.
Il codice dovrebbe essere simile al seguente:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">web.dev</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">HTML</a>
</li>
</ol>
</nav>
L'elemento <nav>, un ruolo di punto di riferimento, indica alla tecnologia per la disabilità di presentare i breadcrumb come elemento di navigazione nella pagina.
Il nome accessibile di "breadcrumb", fornito con aria-label,
differenzia questa navigazione dagli altri punti di riferimento di navigazione nello stesso
documento.
Tra ogni link è presente un separatore di contenuti. Questi separatori possono essere generati con CSS, in modo da essere visualizzati prima di ogni elemento dell'elenco, a partire dal secondo.
[aria-label^="breadcrumbs" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
Gli screen reader non "vedono" queste icone, il che è una best practice. I separatori tra i link dei breadcrumb devono essere nascosti agli screen reader. Inoltre, devono avere un contrasto sufficiente rispetto allo sfondo, come qualsiasi altro testo ed elemento visivo presente nella pagina.
Il nostro codice di esempio utilizza un elenco ordinato, preferibile a un elenco non ordinato in quanto gli articoli sono enumerati. role="list" è stato aggiunto perché alcuni valori della proprietà CSS display rimuovono la semantica da alcuni elementi.
In genere, il link alla home page in un breadcrumb dovrebbe riportare la dicitura "home" anziché il nome o il logo del sito. Poiché il breadcrumb si trova nella parte superiore del documento, è comprensibile il motivo per cui è stato utilizzato questo anti-pattern.
La pagina corrente, "Navigazione", non è inclusa nel breadcrumb.
Pagina corrente
Quando la pagina corrente è inclusa in un breadcrumb, il testo dovrebbe preferibilmente non essere un link e aria-current="page" deve essere incluso nell'elemento dell'elenco della pagina corrente. Se non è inclusa, è utile indicare che l'intestazione che segue è la pagina corrente con un'icona o un altro simbolo.
Diamo un'occhiata a una versione alternativa del breadcrumb che adotta questa pratica:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
I breadcrumb potrebbero non corrispondere ai passaggi lineari che un utente ha seguito per arrivare
alla pagina corrente. L'elenco dei passaggi seguiti fino a questo punto può essere nidificato
all'interno di un <nav>, ma non deve essere etichettato come breadcrumb.
Navigazione locale
Il componente di navigazione successivo viene visualizzato sulla maggior parte dei dispositivi di medie e grandi dimensioni in una barra laterale sinistra, con una barra dei filtri e link a ciascuna delle sezioni di Impara HTML. Questi link e la barra dei filtri consentono di navigare verso la posizione.
Se visiti questo sito su un dispositivo mobile o hai uno schermo più stretto, quando carichi questa pagina la barra laterale viene nascosta. Puoi accedervi con nel menu di navigazione in alto.
La differenza principale tra la navigazione locale permanente su schermi ampi e la navigazione locale su schermi più stretti è la freccia che rimanda alla navigazione in alto principale e poi chiude la navigazione.
Il link a questo documento è uguale a quello degli altri link nella navigazione locale. Tuttavia, potrebbe avere un aspetto leggermente diverso dagli altri link per indicare agli utenti vedenti che si tratta della pagina corrente. Questa differenza visiva deve essere creata con CSS.
La pagina corrente può essere identificata anche con l'attributo aria-current="page". Questo indica alle tecnologie per la disabilità che i link rimandano alla pagina corrente.
Idealmente, il codice HTML di questo elemento dell'elenco nella navigazione locale dovrebbe essere simile al seguente:
<li>
<a aria-current="page" aria-selected="true" href="/learn/html/navigation">
Navigation
</a>
</li>
Navigazione globale
La navigazione globale rimanda alle pagine di primo livello del sito web ed è la stessa su ogni pagina di un sito.
La navigazione globale di un sito può essere composta anche da schede che aprono elenchi nidificati di link che rimandano a tutte le sezioni di un sito o ad altri menu.
Potrebbero essere incluse sezioni con titolo, pulsanti e widget di ricerca. Queste funzionalità aggiuntive non sono un requisito. È necessario che il menu di navigazione venga visualizzato su ogni pagina e sia uguale su tutte le pagine, con aria-current="page" su tutti i link alla pagina corrente.
La navigazione globale offre un modo coerente per spostarsi ovunque nell'applicazione o nel sito web. Il sito web di Google non ha una navigazione globale nella parte superiore delle pagine. Yahoo! sì. Sebbene tutte le proprietà principali di Yahoo! abbiano stili diversi, i contenuti della maggior parte delle sezioni sono gli stessi.
I contenuti delle intestazioni di navigazione globale per notizie e sport sono gli stessi. Tuttavia, l'icona che indica che l'utente si trova nella pagina relativa agli sport non ha un contrasto sufficiente per essere accessibile, anche per i visitatori con una vista perfetta. Entrambe le sezioni hanno una navigazione globale con una navigazione locale specifica della sezione al di sotto.
Come per la navigazione globale, i piè di pagina devono essere identici su tutte le pagine. Ma si tratta dell'unica somiglianza. La navigazione globale consente di accedere a tutte le parti del sito dal punto di vista del prodotto. Gli elementi di navigazione all'interno di un piè di pagina non hanno requisiti specifici.
In genere, il piè di pagina include link aziendali, come disclaimer legali, informazioni sull'azienda, una pagina delle opportunità di lavoro e link a fonti esterne pertinenti, come i social media.
Il piè di pagina di questa pagina contiene due insiemi di elementi di navigazione: un insieme di tre colonne di navigazione web.dev correlata e un insieme separato di navigazione per i termini e la privacy di Google. La navigazione a piè di pagina include informazioni su come contribuire a web.dev, contenuti correlati forniti dal team di web.dev e link a social media esterni.
Nel prossimo video vedremo come eseguire il markup delle tabelle di dati.
Verificare di aver compreso
Metti alla prova le tue conoscenze sulla navigazione.
Quale elemento viene utilizzato per eseguire il markup della navigazione principale di un sito?
<navigation><breadcrumb><nav>In una pagina possono essere presenti più elementi di navigazione?