Come hai appreso nei link, l'elemento <a> con l'attributo href crea link che gli utenti possono seguire facendo clic o toccando. Negli elenchi hai imparato a creare elenchi di contenuti. In questa sezione scoprirai come raggruppare
elenchi di link per creare la navigazione.
Esistono diversi tipi di navigazione e modi per visualizzarli. Gli ancoraggi con nome all'interno del testo che rimanda ad altre pagine dello stesso sito web sono considerati navigazione locale. La navigazione locale, composta da una serie di link che visualizzano la gerarchia della pagina corrente in relazione alla struttura del sito o delle pagine che l'utente ha seguito per arrivare alla pagina corrente viene chiamata breadcrumb. Il sommario di una pagina è un altro tipo di navigazione locale. Una pagina contenente link gerarchici a ogni singola pagina di un sito è chiamata mappa del sito. La sezione di navigazione che rimanda alle pagine di primo livello del sito web che si trova in ogni pagina si chiama navigazione globale. La navigazione globale può essere visualizzata in diversi modi, ad esempio con barre di navigazione, menu a discesa e menu a discesa. Lo stesso sito potrebbe mostrare la navigazione globale in modo diverso a seconda delle dimensioni dell'area visibile.
Assicurati sempre che gli utenti possano navigare su qualsiasi pagina del tuo sito con il minor numero di clic e che la navigazione sia intuitiva e non ingombrante. Detto questo, non ci sono requisiti specifici per gli elementi di navigazione. Essendo un sito web di una sola pagina, MachineLearningWorkshop.com ha una barra di navigazione locale in alto a destra; è qui che spesso i siti con più pagine inseriscono la navigazione globale.
Se stai visualizzando questa pagina su web.dev, puoi individuare alcune funzionalità di navigazione. Sopra il titolo è presente un breadcrumb, un sommario "in questa pagina" dopo il titolo e un sommario "Impara HTML" che, a seconda della larghezza dello schermo, viene sempre visualizzato o reso visibile facendo clic su un pulsante del menu. Il primo elemento della pagina è un link nascosto a #main, che ti consente di saltare sia i link della barra laterale che quelli breadcrumb.
Link "Vai ai contenuti"
Il primo elemento della pagina è un link interno:
<a href="#main" class="skip-link button">Skip to main</a>
che, se selezionato o quando l'elemento è attivo e l'utente fa clic su Enter, scorre la pagina e mette in evidenza i 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 visualizzata solo quando è impostato lo stato attivo:
Per migliorare l'usabilità e l'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 preme tab al caricamento, l'utente può passare rapidamente ai contenuti principali del sito, evitando
di dover premere il tasto Tab per collegamenti estesi. In questa pagina, il link Salta salta la navigazione nella barra laterale a livello di sezione e la navigazione nei breadcrumb, portando l'utente direttamente al titolo della pagina.
Alla maggior parte dei designer non piace la presenza di un link nella parte superiore della pagina. È possibile nascondere il link tenendo presente che, quando il link viene attivato, il che accade quando l'utente della tastiera seleziona il link nella pagina, il link deve essere visibile a tutti gli utenti.
Nascondi i contenuti solo nello stato non attivo e non attivo utilizzando un selettore simile a .visually-hidden:not(:focus):not(:active).
Il testo del link è "Passa a principale". Questo è il nome accessibile del link. Questo è un sito tecnico e gli utenti probabilmente sanno cosa significa "principale".
Come per tutti i testi dei link, il nome accessibile deve indicare chiaramente dove il link rimanda l'utente. La destinazione del link deve essere l'inizio
dei contenuti principali della pagina. Per fare un test, premi Tab fino al link "Vai alla pagina principale" quando la pagina si carica. Premi quindi Enter per assicurarti che "salga" ai contenuti principali.
Sommario
Il link passa ai contenuti consente di visualizzare 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 di questo
tutorial. La presenza o meno della navigazione del sommario prima o dopo l'intestazione nel codebase dipende dalla larghezza del browser.
Se il tuo browser è più largo di 80 em, il sommario viene visualizzato 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: comunica automaticamente allo screen reader e al motore di ricerca che una sezione ha il ruolo navigation, ovvero un ruolo di riferimento.
L'inclusione dell'attributo aria-label fornisce una breve descrizione dello scopo della navigazione. In questo caso, poiché il valore dell'attributo è ridondante rispetto al testo visibile nella pagina, è preferibile utilizzare aria-labelledby per fare riferimento al testo visibile.
Possiamo cambiare il valore non semantico <div> in un paragrafo <p>, quindi aggiungere un valore id in modo da potervi fare riferimento. Dopodiché 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, da preferire il testo dell'attributo se è presente un testo che fornisce un'etichetta adeguata.
Questa navigazione è il sommario. Se vuoi utilizzare aria-label, fornisci questa informazione 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 la "navigazione"; queste informazioni vengono incluse quando utilizzi gli elementi semantici.
I link stessi sono in un elenco non ordinato. Anche se non è necessario nidificarli in un elenco, l'utilizzo di un elenco consente agli utenti di screen reader di sapere quanti elementi dell'elenco, e quindi i link, costituiscono 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, sotto l'intestazione e lo slogan si trova il widget "In questa pagina". Ciò avviene includendo due componenti di navigazione nella tabella dei contenuti e nascondendo l'uno o l'altro con il CSS display: none; in base a una query supporti.
L'inclusione di due widget identici per mostrarne solo uno è un anti-pattern. I byte aggiuntivi sono trascurabili. È opportuno nascondere i contenuti HTML a tutti gli utenti utilizzando display: none CSS. Il problema è che, sugli schermi larghi, il sommario è precedente al giorno #main, mentre sugli schermi più stretti il sommario è nidificato all'interno di #main. Se usi la tastiera per passare ai contenuti, puoi saltare la tabella dei contenuti su uno schermo largo. Gli utenti sono abituati a pubblicare contenuti adattabili e a cambiare posizione quando cambiano dispositivo o
aumentano le dimensioni dei caratteri, ma non si aspettano che l'ordine delle schede cambi quando lo fanno. I layout delle pagine devono essere accessibili, prevedibili
e coerenti in 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 in che punto si trovano su un sito web. In genere mostrano la gerarchia 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 file, ma deve essere in grado di esplorarli.
I breadcrumb consentono agli utenti di esplorare e comprendere l'organizzazione del tuo sito, consentendo loro di passare rapidamente da una sezione all'altra fino a qualsiasi sezione predecessore senza dover tornare indietro a ogni pagina visitata in precedenza per accedere alla pagina corrente utilizzando la funzionalità back.
Se il sito ha una struttura di directory gerarchica semplice, come nel caso di web.dev, la navigazione dei breadcrumb sarà spesso composta da un link alla home page, o nome host, con un link al file di indice di ogni directory nel percorso dell'URL. L'inclusione della pagina corrente è facoltativa e richiede un'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 tutti i livelli intermedi.
Ogni pagina del modulo di apprendimento HTML utilizza la stessa navigazione breadcrumb, che mostra la gerarchia delle lezioni HTML nella 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 di riferimento, quindi le tecnologie per la disabilità presentano i breadcrumb come elemento di navigazione nella pagina.
Il nome accessibile dei "breadcrumb", fornito con aria-label, lo distingue dagli altri punti di riferimento di navigazione nel documento corrente.
Tra i link sono presenti separatori di contenuti generati da CSS. I separatori sono posizionati prima di ogni voce dell'elenco e iniziano 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 li "vedranno", secondo la best practice: i separatori tra i link breadcrumb devono essere nascosti agli screen reader. Inoltre, il contrasto rispetto allo sfondo deve essere sufficiente, come il testo normale.
Questa versione utilizza un elenco non ordinato e voci di elenco. È preferibile avere un elenco ordinato in quanto vengono enumerate le voci dell'elenco ordinato.
È anche un elenco: role="list" è stato aggiunto di nuovo perché alcuni valori delle proprietà display CSS rimuovono la semantica da alcuni elementi.
In genere, il link alla home page in un breadcrumb dovrebbe essere "home" anziché essere il logo del sito con il nome del sito come etichetta. Tuttavia, poiché il breadcrumb si trova nella parte superiore del documento ed è l'unica occorrenza del logo nella pagina, ha senso sapere perché è stato utilizzato questo anti-pattern.
L'ultimo elemento è un elemento <share-action> personalizzato. Gli elementi personalizzati vengono discussi nella sezione 15. Anche se questo elemento personalizzato non fa parte del breadcrumb, includere un elemento non correlato in un <nav> è consentito, 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 un breadcrumb, preferibilmente il testo non dovrebbe essere un link e aria-current="page" deve essere incluso nell'elemento dell'elenco della pagina corrente. Quando non è incluso, è utile indicare che l'intestazione che segue è la pagina corrente con un'icona o un altro simbolo.
Se la struttura dovesse cambiare, è possibile utilizzare 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 adatti a passaggi lineari. Ad esempio, un elenco del percorso seguito dall'utente per arrivare alla pagina corrente o l'elenco dei passaggi seguiti fino a questo punto in una formula possono essere nidificati all'interno di un <nav>, ma non devono essere etichettati come breadcrumb.
Navigazione locale
In questa pagina è presente un altro componente di navigazione. Se utilizzi uno schermo largo, a sinistra è presente una barra laterale con il logo "Impara l'HTML", una barra di ricerca e i 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, magari questo se sei uscito e sei tornato. I link a tutte le sezioni in Impara HTML, insieme alla ricerca e all'intestazione locale, rappresentano la navigazione della località.
Se visiti questo sito da un tablet o un dispositivo mobile, oppure hai uno schermo più stretto, quando carichi questa pagina la barra laterale è nascosta. Puoi renderla visibile tramite il menu menu nella barra di navigazione in alto (sì, l'intestazione è un elemento <web-header> personalizzato con role="navigation" impostato).
La differenza principale tra la navigazione locale permanente su schermi larghi e la navigazione locale su schermi più stretti che è possibile fare apparire e scomparire è la visualizzazione del pulsante di chiusura nella versione che può essere nascosta. Questa icona è nascosta sugli schermi larghi con display: none;.
Il link a questo documento, la sezione 010, ha un aspetto leggermente diverso dagli altri link nella navigazione locale per indicare agli utenti vedenti che si tratta della pagina corrente. Questa differenza visiva viene creata con il CSS. La pagina corrente è inoltre identificata con l'attributo aria-current="page". Questo comunica alle tecnologie per la disabilità che si tratta di un link alla pagina corrente. L'HTML per 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, 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 in precedenza con display: none in base all'assenza dell'attributo e del valore data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Se il valore display è impostato su un valore diverso da none, role informa le tecnologie per la disabilità che l'SVG incorporato è un'immagine, mentre aria-label agisce come attributo alt su <img>.
Navigazione globale
La navigazione globale è la sezione di navigazione che conduce alle pagine di primo livello del sito web che è la stessa in ogni pagina del 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.
Potrebbe includere sezioni con titolo, pulsanti e widget di ricerca. Queste funzionalità aggiuntive non sono obbligatorie. È necessario che la navigazione sia visualizzata in ogni pagina ed è la stessa in tutte le pagine; ovviamente, con aria-current="page" in tutti i link che rimandano alla pagina corrente,
La navigazione globale consente di spostarsi costantemente in qualsiasi punto dell'applicazione o del sito web. Google non dispone di una navigazione globale nella parte superiore della pagina. Yahoo! sì. Sebbene tutte le principali proprietà Yahoo! abbiano stili diversi, i contenuti per la maggior parte delle sezioni sono gli stessi.
I contenuti delle intestazioni di navigazione globali di notizie e sport sono gli stessi, ma l'icona che indica che l'utente è attualmente impegnato nello sport non ha un contrasto sufficiente per essere accessibile, anche per i visitatori ipovedenti. Entrambe le sezioni dispongono di una navigazione globale con una navigazione locale specifica per la sezione sottostante.
Analogamente alle navigazioni globali, i piè di pagina devono essere identici su tutte le pagine. Ma questa è l'unica somiglianza. La navigazione globale consente di raggiungere 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 carriere, e può indirizzare a fonti esterne, ad esempio le icone dei social media.
Il piè di pagina di questa pagina contiene tre elementi <nav> aggiuntivi: la barra di navigazione a piè di pagina, gli sviluppatori Google e i termini e le norme, ognuno dei quali è un link. Il piè di pagina di navigazione include come contribuire a web.dev su GitHub, altri contenuti didattici forniti da Google al di fuori di web.dev e link esterni per "come connetterti".
Queste tre navigazioni in <footer> sono elementi <nav> con un nome aria-labelche fornisce un nome accessibile per i ruoli dei punti di riferimento.
Tutte le navigazioni che abbiamo riscontrato sono state link nidificate in elenchi all'interno di una navigazione. Abbiamo visto tutto ciò che devi sapere per creare le tue navigazioni.
In seguito, esamineremo il markup delle tabelle di dati.
Verifica la tua comprensione
Verifica le tue conoscenze della navigazione.
Quale elemento viene utilizzato per il markup della navigazione principale di un sito?
<navigation><breadcrumb><nav>In una pagina possono essere presenti più elementi di navigazione?