Jak dowiedzieliśmy się z linków, element <a> z atrybutem href tworzy linki, które użytkownicy mogą kliknąć, aby kliknąć. Wiesz już, jak tworzyć listy treści dzięki listom. Z tej sekcji dowiesz się, jak grupować listy połączeń, aby utworzyć nawigację.
Istnieje kilka typów nawigacji i kilka sposobów ich wyświetlania. Kotwice nazwane w tekście, który prowadzi do innych stron w tej samej witrynie, są uznawane za nawigację lokalną. Lokalna nawigacja, która składa się z serii linków wyświetlających hierarchię bieżącej strony w odniesieniu do struktury witryny lub stron, z których użytkownik przeszedł, aby dotrzeć do bieżącej strony, jest nazywana menu nawigacyjnym. Spis treści strony to kolejny typ nawigacji lokalnej. Strona zawierająca hierarchiczne linki do każdej strony w witrynie jest nazywana mapą witryny. Sekcja nawigacyjna prowadząca do najważniejszych stron w witrynie, znajdująca się na każdej stronie, to tzw. nawigacja globalna. Globalną nawigację można wyświetlić na kilka różnych sposobów, w tym za pomocą paska nawigacyjnego, menu i menu wysuwanego. Globalny interfejs nawigacji może być wyświetlany w tej samej witrynie w różny sposób w zależności od rozmiaru widocznego obszaru.
Upewnij się, że użytkownicy mogą przejść na dowolną stronę w witrynie o jak najmniejszej liczbie kliknięć, oraz że nawigacja musi być intuicyjna i nie przytłaczać. Nie ma jednak szczególnych wymagań dotyczących elementów nawigacyjnych. MachineLearningWorkshop.com, to witryna składająca się z jednej strony, w prawym górnym rogu ma lokalny pasek nawigacyjny. W tym miejscu w witrynach wielostronicowych często znajduje się globalna nawigacja.
Jeśli wyświetlasz tę stronę w witrynie web.dev, możesz zauważyć kilka funkcji nawigacyjnych. Nad tytułem znajduje się menu nawigacyjne, spis treści „na tej stronie” po tytule oraz spis treści „Dowiedz się więcej na temat kodu HTML”, który – w zależności od szerokości ekranu – wyświetla się zawsze lub jest widoczny po kliknięciu przycisku menu. Pierwszym elementem na stronie jest ukryty link do #main, który umożliwia pominięcie zarówno paska bocznego, jak i linków menu nawigacyjnego.
Link „Przejdź do treści”
Pierwszym elementem na stronie jest link wewnętrzny:
<a href="#main" class="skip-link button">Skip to main</a>
który po kliknięciu lub gdy użytkownik kliknie Enter, przewija stronę i wyróżnia główną treść: punkt orientacyjny <main> z id o wartości main:
<main id="main">
Być może nigdy nie zobaczysz tego linku w tej witrynie, nawet jeśli przeczytałeś(-aś) wszystkie poprzednie sekcje. Wyświetla się tylko wtedy, gdy jest zaznaczona:
Ze względu na łatwość obsługi i dostępność ważne jest umożliwienie użytkownikom pomijania bloków treści, które powtarzają się na każdej stronie.
Link pomijania jest dołączany, więc gdy podczas wczytywania użytkownik naciśnie klawisz tab, użytkownik może szybko przejść do głównej treści strony. Dzięki temu nie będzie musiał korzystać z dużych klawiszy Tab. Link pomijania na tej stronie pomija nawigację po pasku bocznym obejmującym całą sekcję oraz menu nawigacyjne, przekierowując użytkownika bezpośrednio do tytułu strony.
Większość projektantów nie lubi, jak link u góry strony jest widoczny. Możesz ukryć link, ale pamiętaj, że po zaznaczeniu linku, gdy użytkownik klawiatury kliknie link na stronie, musi on być widoczny dla wszystkich użytkowników.
Treści, które są nieaktywne lub nieaktywne, ukrywaj tylko za pomocą selektora podobnego do funkcji .visually-hidden:not(:focus):not(:active).
Tekst linku brzmi „Przejdź do głównej strony”. Jest to nazwa dostępności linku. Jest to witryna techniczna, a użytkownicy prawdopodobnie wiedzą, co znaczy termin „główna”.
Podobnie jak w przypadku tekstu linku, nazwa ułatwień dostępu powinna jasno wskazywać, dokąd prowadzi link. Miejsce docelowe linku powinno znajdować się na początku głównej treści strony. Aby to sprawdzić, po załadowaniu strony przejdź do linku „Przejdź do głównej strony” za pomocą klawisza Tab. Następnie naciśnij Enter, aby mieć pewność, że „przeskoczy” do głównej treści.
Spis treści
Link pominięcia do treści przewija główną treść, tak aby była widoczna na ekranie. Pierwszym elementem jest nagłówek <h1> z tytułem tej sekcji.
W tym przypadku jest to <h1>Marking up navigation</h1>. Po głównym nagłówku znajduje się slogan, czyli krótki opis treści samouczka. To, czy nawigacja po spisie treści znajduje się przed nagłówkiem w bazie kodu, czy po nim, zależy od szerokości przeglądarki.
Jeśli długość przeglądarki jest szersza niż 80 em, spis treści znajduje się przed nagłówkiem w znacznikach i jest podobny do tego (nazwy klas zostały usunięte, aby uprościć znaczniki):
<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>
W przypadku sekcji nawigacji najlepiej nadaje się element <nav>, który automatycznie informuje czytnik ekranu i wyszukiwarkę, że sekcja ma rolę navigation (punkt orientacyjny).
Atrybut aria-label zawiera krótki opis przeznaczenia nawigacji. W tym przypadku, ponieważ wartość atrybutu jest nadmiarowa w stosunku do tekstu widocznego na stronie, lepiej jest użyć aria-labelledby, aby odwoływać się do widocznego tekstu.
Możemy zmienić niesemantyczną właściwość <div> na <p>, a następnie dodać id, aby można było się do niej odwoływać. Następnie używamy aria-labelledby:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
Oprócz zmniejszania nadmiarowości widoczny tekst jest tłumaczony przez usługi tłumaczeniowe, natomiast wartości atrybutów mogą nie być obsługiwane. Jeśli to możliwe, użyj tekstu z odpowiednią etykietą, zamiast tekstu atrybutu.
To menu nawigacyjne jest spisem treści. Jeśli chcesz używać aria-label, podaj te informacje, zamiast powtarzać widoczny tekst:
<nav aria-label="Table of Contents">
<p>On this page</p>
Podając nazwę elementu na potrzeby ułatwień dostępu, nie podawaj nazwy elementu. Czytniki ekranu przekazują te informacje użytkownikowi.
Na przykład w elemencie <nav> nie dodawaj słowa „nawigacja”, ponieważ jest ona uwzględniana, gdy używasz elementów semantycznych.
Same linki znajdują się na liście nieuporządkowanej. Chociaż nie muszą one być zagnieżdżone w liście, korzystanie z listy pozwala użytkownikom czytników ekranu wiedzieć, ile elementów listy, a tym samym linków, stanowi pojedynczą listę w nawigacji.
<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>
Jeśli szerokość przeglądarki jest mniejsza niż 80 metrów, widżet „Na tej stronie” znajduje się pod nagłówkiem i sloganem. Polega to na dodaniu 2 komponentów nawigacyjnych tabeli treści i ukryciu jednego z nich za pomocą CSS display: none; na podstawie zapytania o multimedia.
Uwzględnienie 2 identycznych widżetów, aby wyświetlić tylko jeden, to antywzór. Dodatkowe bajty są nieistotne. Można ukryć treść HTML przed wszystkimi użytkownikami za pomocą CSS display: none. Problem polega na tym, że na szerokich ekranach spis treści znajduje się przed elementem #main, a na węższych ekranach spis treści jest umieszczony w elemencie #main. Przejście do treści za pomocą klawiatury
pomija spis treści na szerokim ekranie. Użytkownicy są przyzwyczajeni do elastyczności treści i zmiany lokalizacji, gdy zmieniają urządzenie lub zwiększają rozmiar czcionki, ale nie spodziewają się, że kolejność kart zmieni się, gdy to zrobi. Układy stron powinny być dostępne, przewidywalne i spójne w całej witrynie. W tym przypadku umiejscowienie spisu treści nie jest przewidywalne.
Menu nawigacyjne strony
Menu nawigacyjne zapewnia dodatkową nawigację, która pomaga użytkownikom w określeniu pozycji w witrynie, w której się znajdują. Zwykle pokazują one hierarchię adresów URL bieżącego dokumentu oraz lokalizację bieżącej strony w strukturze witryny. Struktura witryny z perspektywy użytkownika może się różnić od struktury plików na serwerze. Nie ma sprawy. Użytkownik nie musi wiedzieć, jak porządkujesz pliki, ale musi mieć możliwość poruszania się po nich.
Menu nawigacyjne pomaga użytkownikom poruszać się po stronie i lepiej poznawać jej organizację. Pozwala im to szybko przechodzić w dowolne miejsca do dowolnej sekcji elementów nadrzędnych bez konieczności przechodzenia przez każdą z poprzednich odwiedzonych stron, aby przejść do bieżącej strony za pomocą funkcji back.
Jeśli witryna ma prostą hierarchiczną strukturę katalogów, tak jak w przypadku web.dev, menu nawigacyjne często zawiera link do strony głównej (lub nazwy hosta) z linkiem do pliku indeksu poszczególnych katalogów w nazwie ścieżki adresu URL. Włączenie bieżącej strony jest opcjonalne i wymaga dodatkowej uwagi.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Sekcje menu nawigacyjnego pokazują ścieżkę od bieżącej strony do strony głównej, pokazując każdy kolejny poziom.
Każda strona modułu Nauka kodu HTML zawiera takie samo menu nawigacyjne, które wyświetla hierarchię lekcji HTML w sekcji learn obiektu web.dev. Kod jest podobny do pokazanego poniżej, ale dla jasności zostały usunięte klasy i szczegóły SVG:
<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>
Menu nawigacyjne jest zgodne ze sprawdzonymi metodami. Wykorzystuje element <nav>, rolę punktu orientacyjnego, dzięki czemu technologia wspomagająca prezentuje menu nawigacyjne jako element nawigacyjny strony.
Nazwa menu nawigacyjnego dostępna wraz z tagiem aria-label odróżnia go od innych punktów orientacyjnych nawigacji w bieżącym dokumencie.
Między linkami znajdują się separatory treści generowanych przez CSS. Separatory znajdują się przed każdym elementem listy, zaczynając od drugiego <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
}
Czytniki ekranu ich nie „widzą”, a najlepsza praktyka: separatory między linkami menu nawigacyjnego powinny być ukryte przed czytnikami ekranu. Muszą też wyraźnie kontrastować z tłem, tak jak w przypadku zwykłego tekstu.
Ta wersja korzysta z listy i elementów nieuporządkowanej. Preferowana jest lista uporządkowana, ponieważ jej elementy są wyliczane.
Jest to również lista: dodano z powrotem właściwość role="list", ponieważ niektóre wartości właściwości displayowych CSS usuwają semantykę z niektórych elementów.
Ogólnie link do strony głównej w menu nawigacyjnym powinien zawierać wyrażenie „strona główna”, a nie logo witryny z nazwą witryny jako etykietą. Menu nawigacyjne znajduje się u góry dokumentu i jedynie pojawia się na stronie logo, więc ma sens, dlaczego użyto tego antywzorca.
Ostatni element to niestandardowy element <share-action>. Elementy niestandardowe zostały omówione w sekcji 15. Ten element niestandardowy nie jest częścią menu nawigacyjnego, ale w tagu <nav> można umieścić niepowiązany element, o ile uwzględnienie jest spójne na wszystkich stronach.
Bieżąca strona
Bieżąca strona „Nawigacja” na tej stronie nie jest uwzględniona w menu nawigacyjnym. Jeśli bieżąca strona jest uwzględniona w menu nawigacyjnym, preferowany tekst nie powinien być linkiem, a element aria-current="page" powinien się znajdować w elemencie listy bieżącej strony. Jeśli go nie podasz, warto wskazać bieżącą stronę w nagłówku za pomocą ikony lub innego symbolu.
Na wypadek zmiany projektu menu można użyć innej wersji:
<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>
Menu nawigacyjne nie jest przeznaczone do kroków liniowych. Na przykład lista ścieżki, którą użytkownik przeszedł, aby przejść do bieżącej strony, lub lista czynności do tego miejsca w przepisie, może być zagnieżdżona w elemencie <nav>, ale nie powinna być oznaczona jako menu nawigacyjne.
Lokalna nawigacja
Na tej stronie jest inny komponent nawigacyjny. Jeśli korzystasz z szerokiego ekranu, po lewej stronie znajduje się pasek boczny z logo „Nauka kodu HTML”, paskiem wyszukiwania oraz linkami do każdej z 20 sekcji w sekcji Nauka kodu HTML. Każdy link zawiera numer rozdziału, tytuł sekcji i znacznik wyboru po prawej stronie odwiedzonych wcześniej sekcji – prawdopodobnie ten, który warto sprawdzić, jeśli zamkniesz stronę, a potem wrócisz. Linki do wszystkich sekcji w języku HTML (wraz z nagłówkiem wyszukiwania i lokalnym) to elementy nawigacji po lokalizacji.
Jeśli odwiedzasz tę stronę na tablecie lub urządzeniu mobilnym albo masz węższy ekran, po wczytaniu strony pasek boczny będzie ukryty. Możesz go wyświetlić, korzystając z menu na górnym pasku nawigacyjnym (tak, nagłówek jest niestandardowym elementem <web-header> z zestawem role="navigation").
Główną różnicą między stałą lokalną nawigacją na szerokich ekranach a lokalną nawigacją na węższych ekranach, które mogą się pojawiać i znikać, jest wyświetlanie przycisku zamykania w wersji, którą można ukryć. Ta ikona jest ukryta na szerokich ekranach w aplikacji display: none;.
Link do tego dokumentu, sekcja 010, wygląda trochę inaczej niż inne linki w nawigacji lokalnej, aby pokazać użytkownikom widzącym, że jest to bieżąca strona. Ta różnica wizualna jest tworzona za pomocą CSS. Bieżąca strona jest też oznaczona atrybutem aria-current="page". Informuje to technologie wspomagające, że jest to link do bieżącej strony. Kod HTML tego elementu listy w tym lokalnym menu nawigacyjnym jest podobny do:
<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>
Jeśli odwiedzasz tę stronę po raz pierwszy, znacznik wyboru nie będzie widoczny. Jeśli ta strona była już odwiedzana, atrybut niestandardowy data-complete jest ustawiony na true i jest tam widoczny znacznik wyboru. Znacznik wyboru jest umieszczony w każdym linku, ale CSS ukrywa je przed użytkownikami, którzy nie odwiedzili wcześniej tej strony display: none ze względu na brak atrybutu i wartości data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Gdy w polu display jest ustawiona wartość inna niż none, role informuje technologię wspomagającą, że wbudowany plik SVG jest obrazem, a aria-label działa jak atrybut alt w elemencie <img>.
Ogólna nawigacja
Globalna nawigacja to sekcja nawigacyjna prowadząca do stron najwyższego poziomu w witrynie, która jest taka sama na każdej stronie w witrynie.
Globalna nawigacja w witrynie może też składać się z kart, które otwierają zagnieżdżone listy linków do wszystkich podsekcji witryny lub innych menu.
Może ona zawierać zatytułowane sekcje, przyciski oraz widżety wyszukiwania. Te dodatkowe funkcje nie są wymagane. Trzeba więc zadbać o to, aby elementy nawigacyjne pojawiły się na każdej stronie i były takie same na każdej stronie. Oczywiście element aria-current="page" na każdym linku do bieżącej strony.
Globalna nawigacja umożliwia podróżowanie w dowolnym miejscu aplikacji lub witryny w spójny sposób. W Google nie ma globalnej nawigacji u góry strony. W Yahoo! Wszystkie główne usługi Yahoo! mają różne style, ale zawartość większości sekcji jest taka sama.
Zawartość nagłówków globalnych nawigacji z wiadomościami i sportu jest taka sama, ale ikona informująca, że użytkownik korzysta ze sportu, nie ma wystarczającego kontrastu, aby była dostępna nawet w przypadku osób niedowidzących. Pod każdą z nich dostępna jest nawigacja globalna, pod którą znajduje się nawigacja lokalna specyficzna dla danej sekcji.
Podobnie jak w przypadku globalnych elementów nawigacyjnych, stopki powinny być takie same na wszystkich stronach. To jednak jedyne podobieństwo. Globalna nawigacja umożliwia nawigację do wszystkich części witryny z perspektywy usługi. Elementy nawigacyjne w stopce nie mają określonych wymagań. Zwykle stopka zawiera linki firmowe, np. oświadczenia prawne, informacje o firmie czy karierach, i może prowadzić do źródeł zewnętrznych, takich jak ikony w mediach społecznościowych.
Stopka tej strony zawiera 3 dodatkowe elementy <nav>: nawigację w stopce, Google Developers oraz warunki i zasady, przy czym każdy z nich jest linkiem. Nawigacja w stopce zawiera informacje o tym, jak współtworzyć web.dev na GitHubie, inne treści edukacyjne udostępniane przez Google poza web.dev oraz zewnętrzne linki „jak nawiązać połączenie”.
Te 3 elementy nawigacyjne w obrębie <footer> to elementy <nav>, które aria-label określają łatwo dostępne role tych punktów orientacyjnych.
Wszystkie elementy nawigacyjne, które dostrzegliśmy, to linki zagnieżdżone na listach w nawigacji. Podaliśmy wszystko, co musisz wiedzieć, aby utworzyć własne nawigację.
W następnej kolejności przyjrzymy się tagowaniu tabel danych.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę z zakresu nawigacji
Który element służy do zaznaczania głównego obszaru nawigacji w witrynie?
<navigation><breadcrumb><nav>Na jednej stronie może znajdować się wiele elementów nawigacyjnych.