Navigazione

Come hai imparato in link, l'elemento <a> con l'attributo href crea link che gli utenti possono seguire facendo clic o toccare. Con gli elenchi, hai imparato a creare elenchi di contenuti. In questa sezione, scoprirai come raggruppare gli elenchi per creare una navigazione.

Esistono diversi tipi di navigazione e diversi modi per visualizzarli. Ancoraggi con nome all'interno del testo che rimandano ad altre pagine all'interno di sullo stesso sito web sono considerate navigazione locale. La navigazione locale consiste in una serie di link che mostrano la gerarchia di la pagina corrente in relazione alla struttura del sito o le pagine che l'utente ha seguito per arrivare alla pagina corrente sono chiamate breadcrumb. Il sommario di una pagina è un altro tipo di navigazione locale. Una pagina contenente link gerarchici a ogni singola pagina di un sito viene chiamata una mappa del sito. La sezione di navigazione che rimanda alle pagine di primo livello del sito web presente 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 potrebbe visualizzare la navigazione globale in modo diverso, a seconda delle dimensioni dell'area visibile.

Assicurati sempre che gli utenti possano raggiungere qualsiasi pagina del tuo sito con il minor numero di clic, assicurandoti inoltre che la navigazione è intuitivo e non faticoso. Detto questo, non ci sono requisiti specifici per gli elementi di navigazione. MachineLearningWorkshop.com essendo un sito web di una sola pagina, presenta una barra di navigazione locale in alto a destra; è qui che i siti con più pagine inseriscono la navigazione globale.

Se stai visualizzando questa pagina su web.dev, puoi notare alcune funzionalità di navigazione. C'è un breadcrumb sopra il titolo, un "in questa pagina" sommario dopo il titolo e una sezione "Impara HTML" che, a seconda della larghezza dello schermo, viene sempre visualizzato o reso visibile con un clic su un pulsante di menu. Il primo elemento della pagina è un link nascosto a #main, che ti consente di saltare sia la barra laterale che i link breadcrumb.

"Vai ai contenuti" collegamento

Il primo elemento della pagina è un link interno:

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

che, se selezionato o quando è impostato sullo stato attivo e l'utente fa clic su Enter, scorre la pagina e imposta lo stato attivo sui contenuti principali: un punto di riferimento <main> con id di main:

<main id="main">

Potresti non aver mai visto il link su questo sito, anche se hai letto tutte le sezioni precedenti. Viene visualizzato solo quando è impostato lo stato attivo:

Per una migliore usabilità e accessibilità, è importante consentire agli utenti di bypassare i blocchi di contenuti che si ripetono su ogni pagina. Lo skip link è incluso in modo che quando un utente della tastiera preme tab durante il caricamento, possa passare rapidamente ai contenuti principali del sito, evitando dover passare attraverso lunghi collegamenti. In questa pagina, il link Ignora consente di saltare la navigazione nella barra laterale a livello di sezione e la navigazione nei breadcrumb, indirizzando l'utente direttamente al titolo della pagina.

La maggior parte dei designer non apprezza l'aspetto di un link nella parte superiore della pagina. È consentito nascondere il link durante la memorizzazione che quando viene impostato lo stato attivo del link, che si verifica quando un utente utilizza una tastiera per aprire il link nella pagina, il link deve essere visibile a tutti gli utenti. Nascondi solo i contenuti nello stato non attivo e non attivo utilizzando un selettore simile a .visually-hidden:not(:focus):not(:active).

Il testo del link è "Vai a principale". Questo è il nome accessibile del link. Questo è un sito tecnico e gli utenti probabilmente sanno cosa e i relativi vantaggi. Come per tutti i testi dei link, il nome accessibile deve indicare chiaramente la destinazione del link all'utente. La destinazione del link deve essere l'inizio contenuti principali della pagina. Per verificarlo, quando viene caricata la pagina, premi Tab fino al pulsante . Quindi premi Enter per assicurarti che "salti" ai contenuti principali.

Sommario

Il link Salta ai contenuti consente di scorrere i contenuti principali. Il primo elemento è l'intestazione <h1> con il titolo di questa sezione. In questo caso, <h1>Marking up navigation</h1>. L'intestazione principale è seguita dallo slogan, una breve descrizione dei contenuti tutorial di Google Cloud. La presenza o meno della navigazione del sommario prima o dopo l'intestazione nel codebase dipende dalla larghezza del browser.

di Gemini Advanced.

Se il tuo browser è più largo di 80 em, il sommario si trova prima dell'intestazione nel markup ed è simile al seguente (i nomi delle classi sono stati rimossi per semplificare il markup):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

<nav> è l'elemento migliore da utilizzare per le sezioni di navigazione: informa automaticamente lo screen reader e il motore di ricerca che una sezione ha il ruolo navigation, che ha il ruolo di punto di riferimento.

Includere l'attributo aria-label fornisce una breve descrizione dello scopo della navigazione. In questo caso, poiché il valore dell'attributo è ridondante visibile sulla pagina, è preferibile usare aria-labelledby per fare riferimento al testo visibile.

Possiamo cambiare il valore non semantico <div> in un paragrafo <p>, quindi aggiungere un id in modo da potervi fare riferimento. Quindi usiamo aria-labelledby:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>

Oltre a ridurre la ridondanza, il testo visibile viene tradotto dai servizi di traduzione, al contrario dei valori degli attributi. Se possibile, se è presente del testo che fornisce un'etichetta adeguata, daresti la priorità al testo dell'attributo.

Questa navigazione è il sommario. Se vuoi utilizzare aria-label, fornisci queste informazioni anziché ripetere il testo visibile:

<nav aria-label="Table of Contents">
  <p>On this page</p>

Quando fornisci un nome accessibile su un elemento, non includere il nome dell'elemento. Gli screen reader forniscono queste informazioni all'utente. Ad esempio, quando utilizzi l'elemento <nav>, non includere "navigazione"; che informazioni sono incluse quando si usano elementi semantici.

I link si trovano in un elenco non ordinato. Sebbene non siano necessariamente nidificati in un elenco, l'utilizzo di un elenco consente agli utenti di screen reader di sapere quanti le voci dell'elenco, e di conseguenza i link, sono un singolo elenco in una 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>

Se la larghezza del browser è inferiore a 80 em, il pulsante "In questa pagina" si trova sotto l'intestazione e la descrizione. Per farlo, devi includere due componenti di navigazione del sommario e nascondendo l'uno o l'altro con il CSS display: none; in base a una query multimediale.

L'inclusione di due widget identici per mostrarne solo uno è un'azione anti-pattern. I byte aggiuntivi sono trascurabili. Nascondere i contenuti HTML di tutti gli utenti che utilizzano il CSS display: none sono appropriati. Il problema è che, sugli schermi larghi, il sommario precede #main. mentre, negli schermi più stretti, il sommario è nidificato all'interno di #main. Utilizzando la tastiera per passare ai contenuti si salta la tabella delle i contenuti su uno schermo largo. Anche se gli utenti sono abituati a fare in modo che i contenuti siano reattivi e che cambino località quando cambiano dispositivo o aumentano le dimensioni dei caratteri, non si aspettano che l'ordine delle schede cambi quando lo fanno. I layout delle pagine devono essere accessibili, prevedibili e coerente su tutto il sito. In questo caso, la posizione del sommario non è prevedibile.

Breadcrumb pagina

I breadcrumb forniscono una navigazione secondaria per aiutare gli utenti a capire dove si trovano su un sito web. Mostrano in genere la gerarchia degli URL del documento corrente e la posizione della pagina corrente nella struttura del sito. La struttura del sito dal punto di vista dell'utente può essere diversa dalla struttura dei file sul server. Va bene così. L'utente non ha bisogno di sapere come organizzi i tuoi file, ma deve essere in grado di per navigare tra i tuoi contenuti.

I breadcrumb aiutano gli utenti a navigare e comprendere l'organizzazione del tuo sito, consentendo loro di navigare rapidamente ovunque fino a qualsiasi predecessore senza dover ripercorrere ogni pagina visitata in precedenza per arrivare alla pagina corrente utilizzando la funzionalità di back.

Se il sito ha una struttura di directory gerarchica semplice, come nel caso di web.dev, la navigazione tramite breadcrumb spesso viene composta di un link alla home page, o nome host, con un link al file di indice di ogni directory nel nome del percorso dell'URL. L'inclusione delle la pagina corrente è facoltativa 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, con i singoli livelli intermedi.

Ogni pagina del modulo Impara HTML utilizza la stessa navigazione tramite breadcrumb, in cui è visualizzata la gerarchia delle lezioni HTML all'interno della Sezione learn di web.dev. Il codice è simile al seguente, con classi e dettagli SVG rimossi per maggiore chiarezza:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

Questo breadcrumb segue le best practice. Utilizza l'elemento <nav>, un ruolo punto di riferimento, quindi le tecnologie per la disabilità presentano i breadcrumb come elemento di navigazione nella pagina. Il nome accessibile di "breadcrumb", fornito con aria-label, lo differenzia dagli altri punti di riferimento di navigazione nel documento corrente.

Tra i link sono presenti separatori di contenuti generati da CSS. I separatori si trovano prima di ogni voce dell'elenco che inizia con il secondo <li>.

[aria-label^="breadcrumb" 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" come best practice: i separatori tra i link dei breadcrumb devono essere nascosti agli screen reader. Devono anche avere un contrasto sufficiente rispetto allo sfondo, come avviene per il testo normale.

Questa versione utilizza un elenco non ordinato e voci elenco. È preferibile un elenco ordinato perché gli elementi sono enumerati. Inoltre è un elenco: role="list" è stato aggiunto di nuovo perché alcuni valori delle proprietà di visualizzazione CSS rimuovono la semantica da alcuni elementi.

In genere, il link alla home page in un breadcrumb dovrebbe essere "home" invece che essere il logo del sito con il nome del sito l'etichetta. Ma poiché il breadcrumb si trova nella parte superiore del documento ed è l'unica occorrenza del logo nella pagina, ha senso sul perché è stato utilizzato questo anti-pattern.

L'ultimo elemento è un elemento <share-action> personalizzato. Gli elementi personalizzati sono trattati nella sezione 15. Anche se questo elemento personalizzato non fa parte del breadcrumb, è possibile includere un elemento non correlato in un <nav>, a condizione che l'inclusione sia coerente in tutte le pagine.

Pagina corrente

In questa pagina, la pagina corrente, "Navigazione", non è inclusa nel breadcrumb. Quando la pagina corrente è inclusa in una breadcrumb, è preferibile che il testo non sia un link e aria-current="page" deve essere incluso nel tag della pagina corrente voce dell'elenco. Se non è inclusa, è utile indicare che l'intestazione che segue è la pagina corrente con un'intestazione o un altro simbolo.

Se il design dovesse cambiare, potrebbe essere utilizzata una versione alternativa del breadcrumb:

<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 non sono per passaggi lineari. Ad esempio, un elenco del percorso seguito dall'utente per arrivare alla pagina corrente oppure L'elenco dei passaggi seguiti fino a questo punto in una formula può essere nidificato all'interno di un elemento <nav>, ma non deve essere etichettato come breadcrumb.

Navigazione locale

In questa pagina c'è un altro componente di navigazione. Se ti trovi su uno schermo largo, c'è una barra laterale sulla sinistra con "Impara HTML" logo, una barra di ricerca e link a ciascuna delle 20 sezioni di Impara HTML. Ogni link contiene il numero del capitolo, il titolo della sezione e un segno di spunta a destra sulle sezioni che hai già visitato, probabilmente questo se sei uscito e sei tornato. I link a tutte le sezioni di Impara HTML, insieme all'intestazione locale e di ricerca, costituiscono la navigazione verso la posizione.

Se visiti il sito da un tablet o da un dispositivo mobile oppure hai uno schermo più stretto, quando carichi questa pagina la barra laterale è nascosta. Puoi renderla visibile tramite il menu a tre linee nella barra di navigazione in alto (sì, l'intestazione è un elemento <web-header> personalizzato con l'impostazione role="navigation").

La differenza principale tra la navigazione locale permanente su schermi ampi e la navigazione locale su schermi più piccoli che può essere fatta apparire e scomparire è la visualizzazione del pulsante di chiusura sulla versione che può essere nascosta. Questa icona è nascosta sugli schermi larghi con display: none;.

Il link a questo documento, sezione 010, ha un aspetto leggermente diverso dagli altri link nella navigazione locale per indicare agli utenti vedenti che questa è la pagina corrente. Questa differenza visiva viene creata con CSS. La pagina corrente è anche identificata con l'attributo aria-current="page". Questa informazione indica alle tecnologie per la disabilità che si tratta di un link alla pagina corrente. Il codice HTML di questo elemento dell'elenco all'interno di questa navigazione locale è simile al seguente:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Se non è la prima volta che visiti questa pagina, il segno di spunta non sarà visibile. Se hai visitato questa pagina in passato, il L'attributo personalizzato data-complete è impostato su true e verrà visualizzato il segno di spunta. Il segno di spunta è incluso in ogni link, ma il CSS nasconde la casella di controllo agli utenti che non hanno mai visitato questa pagina con display: none in base all'assenza della Attributo e valore data-complete="true":

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Se il criterio display è impostato su un valore diverso da none, role indica alle tecnologie per la disabilità che il file SVG incorporato è un'immagine, e aria-label agisce come l'attributo alt su <img>.

Navigazione globale

La navigazione globale è la sezione di navigazione che rimanda alle pagine di primo livello del sito web, uguali su tutte le pagine dei siti. 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. Può includere sezioni con titolo, pulsanti e widget di ricerca. Queste funzionalità aggiuntive non sono un requisito. È necessario la navigazione viene visualizzata su ogni pagina ed è la stessa in ogni pagina. con aria-current="page" su eventuali link alla pagina corrente, ovviamente.

La navigazione globale offre un mezzo coerente per spostarsi in qualsiasi punto dell'applicazione o del sito web. Google non dispone di navigazione nella parte superiore della pagina. Funzionalità di Yahoo! encoder-decoder. Sebbene tutte le principali campagne di Yahoo! hanno stili diversi, i contenuti la maggior parte delle sezioni è la stessa.

I contenuti delle intestazioni di navigazione globale Notizie e Sport sono gli stessi, ma l'icona che mostra che l'utente sta attualmente degli sport non ha un contrasto sufficiente per essere accessibile; anche per i visitatori ipovedenti. Entrambe le sezioni hanno una dimensione con una navigazione locale specifica per la sezione in basso.

Analogamente alle navigazioni globali, i piè di pagina devono essere identici in tutte le pagine. Ma questa è l'unica somiglianza. Navigazione globale consente la navigazione in tutte le parti del sito da un 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, ad esempio dichiarazioni legali, sull'azienda e sulle opportunità di lavoro e può indirizzare a link come le icone dei social media.

Il piè di pagina di questa pagina contiene tre elementi <nav> aggiuntivi: la navigazione a piè di pagina, gli sviluppatori di Google e i termini e le norme. e ognuno di essi è un link. La navigazione a piè di pagina include come contribuire a web.dev su GitHub, ad altri contenuti didattici forniti da Google al di fuori di web.dev e "come connettersi" esterno .

Queste tre navigazioni in <footer> sono elementi <nav> con un aria-labelnome accessibile per questi ruoli dei punti di riferimento. Tutte le navigazioni che abbiamo visto sono state link nidificati in elenchi all'interno di un menu di navigazione. Abbiamo esaminato tutto ciò che devi sapere per creare le tue navigazioni. Nel prossimo video vedremo come eseguire il markup delle tabelle di dati.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di navigazione.