Nawigacja

Jak już wiesz z sekcji Linki, element <a> z atrybutem href tworzy linki, które użytkownicy mogą otworzyć, klikając lub dotykając je. W rozdziale 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 sposobów ich wyświetlania. Nazwane kotwice w tekście, które prowadzą do innych stron w tej samej witrynie, są uznawane za nawigację lokalną. Nawigacja lokalna, która składa się z serii linków wyświetlających hierarchię bieżącej strony w stosunku do struktury witryny lub stron, które użytkownik odwiedził, aby dotrzeć do bieżącej strony, jest nazywana menu nawigacyjnym.

Spis treści na stronie to kolejny typ lokalnej nawigacji. Strona zawierająca hierarchiczne linki do każdej strony w witrynie jest nazywana mapą witryny. Nawigacja prowadząca do stron najwyższego poziomu witryny, która prawdopodobnie znajduje się na każdej stronie, jest nazywana nawigacją globalną. Nawigacja globalna może być wyświetlana na kilka różnych sposobów, m.in. za pomocą pasków nawigacyjnych, menu rozwijanych i menu wysuwanych. Ta sama witryna może wyświetlać nawigację globalną w różny sposób w zależności od rozmiaru widocznego obszaru.

Zadbaj o to, aby użytkownicy mogli przejść do dowolnej strony w Twojej witrynie, wykonując jak najmniej kliknięć. Jednocześnie upewnij się, że nawigacja jest intuicyjna i nie przytłacza użytkowników. Nie ma jednak konkretnych wymagań dotyczących elementów nawigacyjnych. MachineLearningWorkshop.com to witryna jednostronicowa, która ma lokalny pasek nawigacyjny w prawym górnym rogu. W tym miejscu witryny wielostronicowe często umieszczają nawigację globalną.

Link „Przejdź do treści”

Niektóre witryny zawierają link „Przejdź do treści”, który często jest pierwszym elementem w kolejności fokusu. Może to wyglądać mniej więcej tak:

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

Po kliknięciu lub gdy jest zaznaczony, a użytkownik naciśnie Enter, przewija stronę i przenosi fokus na element z identyfikatorem main, prawdopodobnie na główną treść.

<main id="main">

Aby zwiększyć użyteczność i dostępność, ważne jest, aby umożliwić użytkownikom pomijanie bloków treści, które powtarzają się na każdej stronie, takich jak wspólny nagłówek i główne elementy nawigacji. Dzięki linkowi pomijania użytkownik klawiatury może szybko przejść do nowych treści na stronie, naciskając klawisz tab. Dzięki temu nie muszą przechodzić przez rozbudowane menu.

Większości projektantów nie podoba się wygląd takiego linku u góry strony. Możesz ukryć ten link. Pamiętaj jednak, że gdy link zostanie zaznaczony (co następuje, gdy użytkownik korzystający z klawiatury przechodzi do niego na stronie), musi być widoczny.

Ukrywaj treści tylko wtedy, gdy nie są zaznaczone ani aktywne, używając selektora podobnego do .visually-hidden:not(:focus):not(:active).

Podobnie jak w przypadku całego tekstu linku, nazwa powinna wyraźnie wskazywać, dokąd prowadzi link. Element docelowy linku powinien być początkiem głównej treści strony.

Spis treści

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

Na mniejszych ekranach spis treści pojawia się po nagłówku. Na większych ekranach jest on wyświetlany na pasku bocznym po prawej stronie.

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

Dodaj atrybut aria-label, aby podać krótki opis celu nawigacji. W tym przypadku wartość tego atrybutu byłaby zbędna w stosunku do tekstu „Na tej stronie”. Aby odwołać się do widocznego tekstu, użyj zamiast tego symbolu aria-labelledby.

W przypadku użycia id może to wyglądać tak:

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

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

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

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

Aby podać nazwę na potrzeby ułatwień dostępu w elemencie, 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 na liście, ale użycie listy umożliwia użytkownikom czytników ekranu sprawdzenie, ile elementów listy, a tym samym linków, znajduje się w sekcji 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>

Unikaj zmiany kolejności kart

Spis treści może pojawiać się po nagłówku na mniejszych ekranach lub na pasku bocznym po prawej stronie. Umieszczanie dwóch identycznych zestawów elementów nawigacyjnych tylko po to, aby wyświetlać jeden z nich, jest nieprawidłowym wzorcem.

Użyliśmy CSS-u, aby wyświetlać nawigację jako pasek boczny na stronach o szerokości powyżej 1254 pikseli.

Użytkownicy są przyzwyczajeni do tego, że treści są responsywne i zmieniają położenie, gdy zmieniają urządzenie lub zwiększają rozmiar czcionki, ale nie oczekują, że w takiej sytuacji zmieni się kolejność kart. Układy stron powinny być dostępne, przewidywalne i spójne w całej witrynie. W tym przypadku lokalizacja spisu treści jest nieprzewidywalna.

Menu nawigacyjne na stronie

Ścieżka menu nawigacyjnego to dodatkowy element nawigacyjny, który pomaga użytkownikom zorientować się, gdzie znajdują się w witrynie. Elementy menu nawigacyjnego zwykle wskazują hierarchię adresów URL bieżącego dokumentu i położenie bieżącej strony w strukturze witryny.

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

Ścieżka nawigacji pozwala użytkownikom poznać strukturę Twojej witryny. Ułatwia to użytkownikom przechodzenie do dowolnych sekcji 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 okruszkowa często zawiera link do strony głównej lub nazwy hosta oraz link do pliku indeksu każdego katalogu w ścieżce URL. Uwzględnienie bieżącej strony jest opcjonalne i wymaga nieco więcej uwagi.

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

Poszczególne sekcje menu nawigacyjnego pokazują ścieżkę od bieżącej strony do strony głównej, z uwzględnieniem wszystkich poziomów pośrednich.

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

Kod powinien wyglądać podobnie 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 pełni rolę punktu orientacyjnego, informuje technologię wspomagającą, że elementy menu nawigacyjnego mają być prezentowane jako element nawigacyjny na stronie. Nazwa „breadcrumbs” (ścieżka nawigacji) podana za pomocą elementu aria-label odróżnia tę nawigację od innych punktów orientacyjnych nawigacji w tym samym dokumencie.

Między poszczególnymi linkami znajduje się separator treści. Te separatory można wygenerować za pomocą CSS, aby wyświetlać je przed każdym elementem listy, począwszy 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 zgodne ze sprawdzonymi metodami. Separatory między linkami w ścieżce 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 korzysta z listy uporządkowanej, która jest lepsza od listy nieuporządkowanej, ponieważ elementy są numerowane. role="list" został dodany, ponieważ niektóre wartości właściwości CSS display usuwają semantykę z niektórych elementów.

Zwykle link do strony głównej w elementach nawigacji powinien mieć postać „strona główna”, a nie nazwy witryny ani logo witryny. Ścieżka znajduje się u góry dokumentu, więc użycie tego antypatternu ma sens.

Bieżąca strona Nawigacja nie jest uwzględniona w ścieżce.

Obecna strona

Jeśli bieżąca strona jest uwzględniona w ścieżce, tekst nie powinien być linkiem, a element aria-current="page" powinien być umieszczony na liście bieżącej strony. Jeśli nie jest on uwzględniony, warto wskazać, że nagłówek, który następuje po nim, jest bieżącą stroną, za pomocą ikony lub innego symbolu.

Spójrz na alternatywną wersję ścieżki z 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 może nie być taka sama jak liniowe kroki, 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 ścieżka.

Nawigacja lokalna

Kolejny komponent nawigacyjny wyświetla się na większości urządzeń średniej i większej wielkości w lewym pasku bocznym. Zawiera pasek filtra i linki do każdej sekcji w sekcji Learn HTML (Poznaj HTML). Te linki i pasek filtrów służą do nawigacji po lokalizacjach.

Jeśli otworzysz tę witrynę na urządzeniu mobilnym lub na ekranie o mniejszej szerokości, po wczytaniu strony pasek boczny będzie ukryty. Możesz do niego przejść, klikając menu w menu u góry strony.

Główna różnica między stałą lokalną nawigacją na szerokich ekranach a lokalną nawigacją na węższych ekranach to strzałka, która prowadzi z powrotem do głównej nawigacji u góry, a następnie zamyka nawigację.

Link do tego dokumentu wygląda tak samo jak inne linki w lokalnej nawigacji. Może jednak wyglądać nieco inaczej niż pozostałe linki, aby wskazywać użytkownikom, że jest to bieżąca strona. Tę różnicę wizualną należy utworzyć za pomocą CSS.

Bieżącą stronę można też zidentyfikować za pomocą atrybutu aria-current="page". Informuje to technologie wspomagające, że link prowadzi do bieżącej strony.

Najlepiej, aby kod HTML tego elementu listy w nawigacji lokalnej wyglądał podobnie do tego:

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

Ogólna nawigacja

Nawigacja globalna prowadzi do stron najwyższego poziomu witryny i jest taka sama na każdej stronie witryny. Globalna nawigacja witryny może też składać się z kart, które otwierają 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. Wymagane jest, aby nawigacja była widoczna na każdej stronie i była taka sama na każdej stronie, z wyjątkiem aria-current="page" na linkach do bieżącej strony.

Nawigacja globalna zapewnia spójny sposób poruszania się po aplikacji lub witrynie. Witryna Google nie ma globalnej nawigacji u góry stron. Yahoo! Wszystkie główne usługi Yahoo! mają różne style, ale treść większości sekcji jest taka sama.

Zawartość nagłówków globalnej nawigacji w sekcjach Wiadomości i Sport jest taka sama. Ikona informująca użytkownika, że znajduje się na stronie sportowej, nie ma jednak wystarczającego kontrastu, aby była dostępna nawet dla osób z doskonałym wzrokiem. Obie sekcje mają globalną nawigację, a pod nią lokalną nawigację specyficzną dla danej sekcji.

Podobnie jak w przypadku nawigacji globalnej stopki powinny być identyczne na wszystkich stronach. Ale to jedyne podobieństwo. Nawigacja globalna umożliwia poruszanie się po wszystkich częściach witryny z perspektywy produktu. Elementy nawigacyjne w stopce nie mają określonych wymagań.

Stopka zawiera zwykle linki do stron firmowych, takie jak oświadczenia prawne, informacje o firmie, strona z ofertami pracy i linki do odpowiednich źródeł zewnętrznych, np. mediów społecznościowych.

W stopce tej strony znajdują się 2 zestawy elementów nawigacyjnych: 3-kolumnowy zestaw powiązanych elementów nawigacyjnych web.dev oraz osobny zestaw elementów nawigacyjnych dotyczących warunków i prywatności Google. Nawigacja w stopce zawiera informacje o tym, jak współtworzyć web.dev, powiązane treści dostarczane przez zespół web.dev oraz zewnętrzne linki do mediów społecznościowych.

Następnie przyjrzymy się oznaczaniu tabel danych.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o nawigacji.