Nawigacja

Jak już wiesz z sekcji linki, element <a> z atrybutem href tworzy linki, które użytkownicy mogą otwierać, klikając lub dotykając. W sekcji Listy dowiesz się, jak tworzyć listy treści. Z tego modułu dowiesz się, jak grupować listy linków, aby tworzyć nawigację.

Istnieje kilka typów nawigacji i kilka sposobów ich wyświetlania. Nazwane kotwicy w tekście, które prowadzą 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 stosunku do struktury witryny lub stron, po których użytkownik dotarł do bieżącej strony, nazywana jest menu nawigacyjnym.

Spis treści strony to inny typ lokalnej nawigacji. Strona zawierająca hierarchiczne linki do każdej strony w witrynie to mapa witryny. Nawigacja do stron najwyższego poziomu w witrynie, którą zazwyczaj można znaleźć na każdej stronie, nosi nazwę globalnej nawigacji. Globalną nawigację można wyświetlać na kilka różnych sposobów, m.in. za pomocą pasków nawigacyjnych, menu i menu. Ta sama witryna może wyświetlać globalną nawigację w różny sposób w zależności od rozmiaru widocznego obszaru.

Zawsze zadbaj o to, aby użytkownicy mogli przejść na dowolną stronę w Twojej witrynie, wykonując jak najmniej kliknięć. Pamiętaj też, aby nawigacja była intuicyjna i nie przytłaczająca. Nie ma jednak żadnych konkretnych wymagań dotyczących elementów nawigacyjnych. Witryna MachineLearningWorkshop.com jest witryną jednostronicową, która ma pasek nawigacji lokalnej w prawym górnym rogu. Witryny wielostronicowe często umieszczają nawigację globalną właśnie w tym miejscu.

Link „Przejdź do treści”

Niektóre witryny zawierają link „Pomiń treść”, który często jest pierwszym elementem w kolejności fokusowania. Może on wyglądać mniej więcej tak:

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

Po kliknięciu lub gdy ma fokus i użytkownik naciśnie Enter, przewija stronę oraz ustawia fokus na elemencie o identyfikatorze main, który jest prawdopodobnie główną treścią.

<main id="main">

Dla ułatwienia obsługi i ułatwienia dostępu należy umożliwić użytkownikom pomijanie bloków treści, które powtarzają się na każdej stronie, takich jak wspólny nagłówek czy główne elementy nawigacyjne. Dzięki linku pomijania po naciśnięciu przez użytkownika klawiatury tab użytkownik może szybko przejść do nowej treści na stronie. Dzięki temu nie muszą przewijać długiego menu.

Większość projektantów nie lubi, gdy taki link znajduje się u góry strony. Możesz ukryć ten link. Pamiętaj jednak, że gdy link zostanie zaznaczony (co dzieje się, gdy użytkownik przełącza się na link za pomocą klawiatury), musi być widoczny dla użytkownika.

Ukrywaj tylko treści w stanie nieaktywnego i nieaktywnego za pomocą selektora podobnego do .visually-hidden:not(:focus):not(:active).

Podobnie jak w przypadku innych tekstów linków, nazwa powinna wyraźnie wskazywać, dokąd prowadzi link. Elementem docelowym linku powinna być początek głównej treści strony.

Spis treści

Pierwszym elementem treści głównej jest nagłówek <h1> z nazwą tej strony: <h1>Navigation</h1>. Po nagłówku głównym znajduje się krótki opis zawartości samouczka.

Na mniejszych ekranach spis treści jest wyświetlany po nagłówku. Na większych ekranach jest ona wyświetlana na pasku bocznym wyrównanym do prawej.

Najlepszym elementem do tworzenia sekcji nawigacji jest <nav>. Automatycznie informuje czytnik ekranu i wyszukiwarkę, że dana sekcja ma rolę navigation, czyli jest punktem orientacyjnym.

Użyj atrybutu aria-label, aby krótko opisać cel nawigacji. W tym przypadku wartość tego atrybutu byłaby zbędna, ponieważ tekst „Na tej stronie” jest zbędny. Aby odwoływać się do widocznego tekstu, użyj znaku aria-labelledby.

Korzystając z id, możesz ustawić takie ustawienia:

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

Oprócz zmniejszenia nadmiarowości tekst widoczny jest tłumaczony przez usługi tłumaczeniowe, podczas gdy wartości atrybutów mogą nie być tłumaczone. Jeśli jest dostępny tekst, który zapewnia odpowiednią etykietę, odwołać się do niego, zamiast używać tekstu atrybutu.

Sekcja „Na tej stronie” to spis treści. Jeśli chcesz użyć znaku aria-label, podaj kontekst, zamiast powtarzać widoczny tekst:

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

Aby podać nazwę elementu na potrzeby ułatwień dostępu, nie podawaj nazwy elementu. Czytniki ekranu podają użytkownikowi nazwę elementu. Na przykład podczas korzystania z elementu <nav> nie dodawaj słowa „nawigacja”, ponieważ te informacje są już zawarte w elementach semantycznych.

Elementy nawigacyjne nie muszą być zagnieżdżone w liście, ale dzięki listom użytkownicy czytników ekranu mogą dowiedzieć się, ile elementów listy, a tym samym linków, znajduje się w obszarze nawigacyjnym.

<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>

Unikaj zmiany kolejności kart

Spis treści może być wyświetlany po nagłówku, na mniejszych ekranach lub na pasku bocznym wyrównanym do prawej strony. Umieszczanie 2 identycznych zestawów elementów nawigacji, z których wyświetla się tylko jeden, jest niewskazane.

Za pomocą CSS dodaliśmy nawigację jako pasek boczny na stronach szerszych niż 1254 piksele.

Użytkownicy są przyzwyczajeni do tego, że treści dostosowują się do ekranu i zmieniają położenie, gdy zmieniają urządzenie lub zwiększają rozmiar czcionki, ale nie oczekują, aby kolejność kart się zmieniała. Układy stron powinny być dostępne, przewidywalne i spójnie stosowane w całości witryny. W tym przypadku lokalizacja spisu treści nie jest przewidywalna.

menu nawigacyjne strony,

Ścieżki menu nawigacyjnego zapewniają użytkownikom dodatkową nawigację, która pomaga im zorientować się w strukturze witryny. Menu nawigacyjne zwykle wskazują hierarchię adresów URL bieżącego dokumentu i lokalizację bieżącej strony w strukturze witryny.

Struktura witryny z perspektywy użytkownika może różnić się od struktury plików na serwerze i jest to w porządku. Użytkownik nie musi wiedzieć, jak porządkujesz pliki, ale musi mieć możliwość poruszania się po treściach.

Ścieżka chleba pozwala użytkownikom poznać strukturę Twojej witryny. Dzięki temu użytkownicy mogą przechodzić do dowolnych stron nadrzędnych bez konieczności wracania do każdej wcześniej odwiedzonej strony za pomocą funkcji back.

Jeśli witryna ma hierarchiczną strukturę katalogów, jak w przypadku web.dev, nawigacja w postaci menu poziomego często zawiera link do strony głównej lub nazwy hosta oraz link do pliku indeksu każdego katalogu na ścieżce adresu URL. Dodanie 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, z wyróżnieniem poszczególnych poziomów.

Każda strona modułu Naucz się HTML ma takie samo menu nawigacyjne, które wyświetla hierarchię lekcji HTML w sekcji Learn w web.dev.

Kod powinien być podobny do tego:

<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>

Element <nav>, który ma rolę punktu orientacyjnego, informuje technologie wspomagające, aby wyświetlały elementy menu nawigacyjnego jako element nawigacji na stronie. Dostępna nazwa „wykaz ścieżek” wyświetlana z ikoną aria-label odróżnia tę nawigację od innych punktów nawigacyjnych w tym samym dokumencie.

Między każdym linkiem znajduje się separator treści. Separatory te można generować za pomocą CSS, aby wyświetlać je przed każdym elementem listy, zaczynając od drugiego.

[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
}

Czytniki ekranu nie widzą tych ikon, co jest jedną ze sprawdzonych metod. Odstępy między linkami w ścieżce nawigacyjnej powinny być ukryte przed czytnikami ekranu. Muszą też odpowiednio kontrastować z tłem, tak jak każdy inny tekst i element wizualny na stronie.

Nasz przykładowy kod używa uporządkowanej listy, która jest preferowana w stosunku do nieuporządkowanej listy, ponieważ elementy są ponumerowane. Dodano role="list", ponieważ niektóre wartości właściwości wyświetlania CSS usuwają semantykę z niektórych elementów.

Zasadniczo link do strony głównej w menu nawigacyjnym powinien zawierać tekst „Strona główna”, a nie nazwę ani logo witryny. Ponieważ menu nawigacyjne znajduje się u góry dokumentu, można zrozumieć, dlaczego zastosowano ten antywzorzec.

Bieżąca strona, „Navigation”, nie jest uwzględniona w menu nawigacyjnym.

Bieżąca strona

Jeśli bieżąca strona jest uwzględniona w elementach nawigacyjnych, tekst powinien być preferowany jako link, a element listy na bieżącej stronie powinien zawierać aria-current="page". Jeśli go nie ma, warto wskazać, że następny nagłówek dotyczy bieżącej strony, za pomocą ikony lub innego symbolu.

Przyjrzyjmy się innej wersji menu nawigacyjnego, która stosuje tę praktykę:

<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>

Ścieżka przewijania może nie być taka sama jak sekwencja kroków, które użytkownik wykonał, aby dotrzeć do bieżącej strony. Lista kroków wykonanych do tego momentu może być zagnieżdżona w elemencie <nav>, ale nie powinna być oznaczona jako menu nawigacyjne.

Nawigacja lokalna

Następny element nawigacyjny wyświetla się na większości urządzeń średniej i dużej wielkości na pasku bocznym po lewej stronie. Zawiera pasek filtrów i linki do poszczególnych sekcji w sekcji Poznaj HTML. Te linki oraz pasek filtrów umożliwiają nawigację po lokalizacji.

Jeśli otworzysz tę stronę na urządzeniu mobilnym lub na ekranie o węższej rozdzielczości, pasek boczny będzie ukryty. Możesz go otworzyć, klikając menu w górnej części menu.

Podstawową różnicą między stałą lokalną nawigacją na szerokich ekranach a nawigacją lokalną na węższych ekranach jest strzałka, która prowadzi z powrotem do głównego górnego panelu nawigacyjnego i dopiero potem je zamyka.

Link do tego dokumentu wygląda tak samo jak inne linki w nawigacji lokalnej. Może się on jednak nieco różnić od innych linków, aby wskazać widzącym użytkownikom, że jest to bieżąca strona. Te wizualne różnice należy utworzyć za pomocą CSS.

Bieżąca strona może być też zidentyfikowana za pomocą atrybutu aria-current="page". Informuje to technologie wspomagające, że linki prowadzą do bieżącej strony.

W idealnej sytuacji kod HTML tego elementu listy w lokalnej nawigacji powinien wyglądać tak:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Ogólna nawigacja

Globalna nawigacja prowadzi do stron najwyższego poziomu w witrynie i jest taka sama na każdej stronie. Globalna nawigacja witryny może też składać się z kart otwierających zagnieżdżone listy linków prowadzących do wszystkich podsekcji witryny lub innych menu. Może zawierać sekcje z tytułami, przyciski i widżety wyszukiwania. Te dodatkowe funkcje nie są wymagane. Wymagamy jednak, aby elementy nawigacyjne były widoczne na każdej stronie i takie samo na każdej z nich, oczywiście aria-current="page" na wszystkich linkach do bieżącej strony.

Globalna nawigacja pozwala w spójny sposób poruszać się po aplikacji lub witrynie. Witryna Google nie ma globalnej nawigacji u góry stron. Yahoo! Choć wszystkie główne usługi Yahoo! mają różne style, zawartość większości sekcji jest taka sama.

Treść nagłówków globalnej nawigacji w sekcji wiadomości i sport jest taka sama. Ikona informująca, że użytkownik jest na stronie sportu, nie ma jednak wystarczającego kontrastu, aby była czytelna nawet dla osób z doskonałym wzrokiem. Obie sekcje mają globalną nawigację z lokalną nawigacją poniżej.

Podobnie jak w przypadku globalnej nawigacji, stopki powinny być identyczne na wszystkich stronach. To jedyne podobieństwo. Globalna nawigacja umożliwia przechodzenie do wszystkich części witryny z perspektywy usługi. Elementy nawigacyjne w stopce nie mają określonych wymagań.

Zasadniczo stopka zawiera linki firmowe, takie jak oświadczenia prawne, strony z informacjami o firmie i linki do odpowiednich źródeł zewnętrznych, takich jak media społecznościowe.

Stopka tej strony zawiera 2 zestawy elementów nawigacyjnych: 3 kolumny z elementami nawigacji powiązanej z web.dev oraz osobną nawigację dotyczącą warunków korzystania z usługi i polityki prywatności Google. Nawigacja w stopce zawiera informacje o tym, jak przyczynić się do rozwoju web.dev, powiązane treści udostępnione przez zespół web.dev oraz linki do zewnętrznych mediów społecznościowych.

W dalszej części zajęć przyjrzymy się oznaczaniu tabel danych.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat nawigacji.