Navigation

Come hai appreso nella sezione Link, l'elemento <a> con l'attributo href crea link che gli utenti possono seguire facendo clic o toccando. Nelle liste hai imparato a creare elenchi di contenuti. In questo modulo, scoprirai come raggruppare elenchi di link per creare la navigazione.

Esistono diversi tipi di navigazione e diversi modi per visualizzarli. Le ancore con nome all'interno del testo che rimandano ad altre pagine dello stesso sito web sono considerate 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 che l'utente ha seguito per raggiungere la pagina corrente, è chiamata breadcrumb.

L'indice di una pagina è un altro tipo di navigazione locale. Una pagina che contiene link gerarchici a ogni singola pagina di un sito è 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 comparsa. Lo stesso sito può visualizzare la navigazione globale in modo diverso, a seconda delle dimensioni dell'area visibile.

Assicurati sempre che gli utenti possano navigare in qualsiasi pagina del tuo sito con il minor numero di clic possibile, assicurandoti al contempo che la navigazione sia intuitiva e non eccessiva. Detto questo, non esistono 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, dove i siti multipagina spesso inseriscono la navigazione globale.

Link "Vai ai contenuti"

Alcuni siti includono un link "Vai ai contenuti", spesso come primo elemento nell'ordine di messa a fuoco. Potrebbe avere un aspetto simile al seguente:

<a href="#main" class="skip-link button">Skip to main</a>

Quando viene fatto clic o quando è attivo e l'utente preme Enter, la pagina scorre e l'elemento con un ID main, presumibilmente i contenuti principali, diventa attivo.

<main id="main">

Per migliorare l'usabilità e l'accessibilità, è importante consentire agli utenti di bypassare i blocchi di contenuti ripetuti in ogni pagina, ad esempio un titolo condiviso e le voci di navigazione principali. Con uno skip link, quando un utente che utilizza la tastiera preme tab, può passare rapidamente ai nuovi contenuti della pagina. In questo modo, non devono scorrere un menu esteso.

La maggior parte dei designer non apprezza la presenza di un link di questo tipo nella parte superiore della pagina. Puoi nascondere questo link dalla visualizzazione. Tuttavia, ricorda che quando il link riceve lo stato attivo, ovvero quando un utente che utilizza la tastiera scorre il link nella pagina, il link deve essere visibile all'utente.

Nascondi i contenuti solo in uno stato non attivo e non selezionato utilizzando un selettore simile a .visually-hidden:not(:focus):not(:active).

Come tutto il testo dei link, il nome deve indicare chiaramente dove porta il link 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 è seguita 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 visualizzato in una barra laterale allineata a destra.

L'elemento migliore da utilizzare per le sezioni di navigazione è <nav>. Comunica automaticamente allo screen reader e al motore di ricerca che una sezione ha un ruolo di 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 di questo attributo sarebbe ridondante rispetto al testo "In questa pagina". Per fare riferimento al testo visibile, utilizza invece aria-labelledby.

Utilizzando un id, potrebbe avere il seguente aspetto:

<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 esserlo. Se possibile, se è presente un testo che fornisce un'etichetta adeguata, fai riferimento a quel testo anziché utilizzare il testo dell'attributo.

La navigazione "In questa pagina" è l'indice. 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 a 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", in quanto 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 di elenco e quindi quanti 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

Il sommario potrebbe essere visualizzato dopo l'intestazione, sugli schermi più piccoli o in una barra laterale allineata a destra. Includere due set di navigazione identici, solo per mostrarne uno, sarebbe un anti-pattern.

Abbiamo utilizzato CSS per visualizzare la navigazione come barra laterale nelle pagine più larghe di 1254 px.

Gli utenti sono abituati a contenuti reattivi e a cambiare posizione quando cambiano dispositivo o aumentano le dimensioni del carattere, ma non si aspettano che l'ordine delle schede cambi quando lo fanno. I layout di pagina devono essere accessibili, prevedibili e coerenti in tutto il sito. In questo caso, la posizione del sommario non è prevedibile.

Breadcrumb della 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 degli 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 potrebbe differire dalla struttura dei file sul server e va bene così. L'utente non deve sapere come organizzi i tuoi 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 navigare in qualsiasi sezione principale senza dover tornare indietro in ogni pagina visitata in precedenza, utilizzando la funzione back.

Se il sito ha una struttura di directory gerarchica, come nel caso di web.dev, la navigazione breadcrumb spesso include un link alla home page o al nome host e un link al file indice di ogni directory nel percorso URL. L'inclusione della pagina corrente è facoltativa e richiede un po' più di attenzione.

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 Learn HTML ha la stessa navigazione breadcrumb, che mostra la gerarchia delle lezioni HTML all'interno della 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 riferimento, indica alla tecnologia assistiva 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 un link e l'altro è presente un separatore dei contenuti. Questi separatori potrebbero essere generati con CSS, da visualizzare 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 della breadcrumb devono essere nascosti agli screen reader. Inoltre, devono avere un contrasto sufficiente rispetto allo sfondo, come qualsiasi altro testo ed elemento visivo della pagina.

Il nostro codice di esempio utilizza un elenco ordinato, preferibile a un elenco non ordinato in quanto gli elementi 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 una breadcrumb dovrebbe essere "home" anziché il nome o il logo del sito. Poiché la breadcrumb si trova nella parte superiore del documento, è comprensibile il motivo per cui è stato utilizzato questo anti-pattern.

La pagina corrente, Navigazione, non è inclusa nella breadcrumb.

Pagina corrente

Quando la pagina corrente è inclusa in una breadcrumb, il testo non deve preferibilmente essere un link e aria-current="page" deve essere incluso nell'elemento della lista della pagina corrente. Se non è incluso, è utile indicare che l'intestazione che segue è la pagina corrente con un'icona o un altro simbolo.

Dai un'occhiata a una versione alternativa della breadcrumb con 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 seguiti da un utente per raggiungere la 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 Learn HTML. Questi link e la barra dei filtri costituiscono la navigazione delle località.

Se visiti questo sito su un dispositivo mobile o hai uno schermo più stretto, quando carichi questa pagina, la barra laterale è nascosta. Puoi accedervi con menu nella navigazione in alto.

La differenza principale tra la navigazione locale permanente sugli schermi larghi e la navigazione locale sugli schermi più stretti è la freccia che riporta alla navigazione principale in alto, quindi chiude la navigazione.

Il link a questo documento ha lo stesso aspetto degli altri link nella navigazione locale. Tuttavia, potrebbe avere un aspetto leggermente diverso dagli altri link per indicare agli utenti vedenti che questa è la pagina corrente. Questa differenza visiva deve essere creata con CSS.

La pagina corrente può essere identificata anche con l'attributo aria-current="page". Informa le tecnologie assistive che i link rimandano alla pagina corrente.

Idealmente, l'HTML per questa voce di elenco all'interno della 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 porta alle pagine di primo livello del sito web ed è la stessa in ogni pagina di un sito. La navigazione globale di un sito può anche essere costituita da schede che aprono elenchi nidificati di link che rimandano a tutte le sottosezioni 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. Ciò che è richiesto è che la navigazione venga visualizzata su ogni pagina e sia la stessa su ogni pagina, con aria-current="page" su tutti i link alla pagina corrente, ovviamente.

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! lo fa. Sebbene tutte le principali proprietà di Yahoo! abbiano stili diversi, i contenuti della maggior parte delle sezioni sono gli stessi.

I contenuti delle intestazioni di navigazione globale di notizie e sport sono gli stessi. Tuttavia, l'icona che indica che l'utente si trova nella pagina dello 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 per la sezione sottostante.

Come per la navigazione globale, i piè di pagina devono essere identici in tutte le pagine. Ma è l'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 dichiarazioni legali, informazioni sull'azienda, una pagina delle carriere e link a fonti esterne pertinenti, come i social media.

Il piè di pagina di questa pagina contiene due gruppi di elementi di navigazione: un gruppo di tre colonne di navigazione web.dev correlata e un gruppo separato di navigazione di termini e privacy di Google. La navigazione nel piè di pagina include informazioni su come contribuire a web.dev, contenuti correlati forniti dal team di web.dev e link esterni ai social media.

Successivamente, vedremo come contrassegnare le tabelle di dati.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulla navigazione.