Nawigacja

Jak wiesz w sekcji links, element <a> z atrybutem href tworzy linki, które użytkownicy mogą kliknąć, klikając lub dotknij. Wiesz już, jak tworzyć listy treści za pomocą list. W tej sekcji dowiesz się, jak grupować listy aby tworzyć nawigację.

Istnieje kilka rodzajów nawigacji i kilka sposobów ich wyświetlania. Nazwane kotwice w tekście, które prowadzą do innych stron w witrynie ponieważ ta sama witryna jest uważana za nawigację lokalną. Lokalna nawigacja, która składa się z szeregu linków wyświetlających hierarchię bieżąca strona w odniesieniu do struktury witryny lub strony, które użytkownik przeszedł, by wyświetlić bieżącą stronę, to menu nawigacyjne. Spis treści strony to kolejny typ nawigacji lokalnej. Stronę zawierającą linki hierarchiczne do każdej strony w witrynie nazywamy mapę witryny. Sekcja nawigacji prowadząca do stron najwyższego poziomu w witrynie, która znajduje się na każdej stronie, nosi nazwę nawigacji globalnej. Globalną nawigację można wyświetlać na kilka różnych sposobów, w tym za pomocą pasków nawigacyjnych, menu oraz menu. Ta sama witryna może wyświetlać globalną nawigację w różny sposób, w zależności od rozmiaru widocznego obszaru.

Upewnij się, że użytkownicy mogą przejść do dowolnej strony w witrynie, która generuje jak najmniej kliknięć, oraz upewnij się, że nawigacja jest intuicyjny i nie przytłaczający. Nie ma jednak konkretnych wymagań dotyczących elementów nawigacyjnych. MachineLearningWorkshop.com – witryna składa się z jednej strony, a w prawym górnym rogu ma lokalny pasek nawigacyjny. To właśnie w tym miejscu witryny wielostronicowe często umieszczają globalną nawigację.

Jeśli przeglądasz tę stronę na web.dev, możesz zauważyć kilka funkcji nawigacyjnych. Nad tytułem znajduje się menu nawigacyjne, „na tej stronie” spisu treści za tytułem i przycisku „Nauka języka HTML” spis treści, który w zależności od szerokości ekranu jest zawsze wyświetlana lub staje się widoczna po kliknięciu przycisku menu. Pierwszym elementem na stronie jest ukryty link do #main, który umożliwia pominięcie linków zarówno na pasku bocznym, jak i w menu nawigacyjnym.

„Przejdź do treści” połącz

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 kliknięciu Enter przez użytkownika przewija stronę i skupia uwagę na jej głównej treści: punkt orientacyjny <main> z id równym main:

<main id="main">

Być może nigdy nie widzisz linku na tej stronie, nawet po zapoznaniu się ze wszystkimi poprzednimi sekcjami. Wyświetla się tylko wtedy, gdy jest zaznaczony:

Dla ułatwienia obsługi i ułatwienia dostępu należy umożliwić użytkownikom pomijanie bloków treści powtarzanych na każdej stronie. Link do pomijania jest dołączony, więc po wczytaniu przez użytkownika klawiatury tab może on szybko przejść do głównej treści strony, unikając niezbędna jest analiza rozbudowanych powiązań. Link pomijania pomija na tej stronie nawigowanie na pasku bocznym obejmującym całą sekcję i poruszanie się po menu nawigacyjnym, przekierowują użytkowników bezpośrednio do tytułu strony.

Większość projektantów nie podoba się wyglądowi linku na górze strony. Można ukryć link, pamiętając, że gdy link zostanie zaznaczony, co nastąpi, gdy użytkownik kliknie link na stronie za pomocą klawiatury, musi być on widoczny dla wszystkich użytkowników. Ukryj tylko te treści, które są nieaktywne lub niezaznaczone, za pomocą selektora podobnego do .visually-hidden:not(:focus):not(:active).

Tekst linku to „przejdź do głównego”. Jest to nazwa, z której można korzystać w przypadku linku. Jest to witryna techniczna, a użytkownicy prawdopodobnie znają „główną” Tak jak w przypadku każdego tekstu linku, nazwa na potrzeby ułatwień dostępu powinna wyraźnie wskazywać, dokąd link prowadzi użytkownika. Elementem docelowym linku powinna być na początku wartości do głównej zawartości strony. Aby to sprawdzić, po wczytaniu strony przejdź do sekcji „Przejdź do strony głównej” za pomocą klawisza Tab . Następnie naciśnij Enter, aby upewnić się, że urządzenie „skaka” do głównej zawartości.

Spis treści

Link pomijania treści powoduje przewijanie strony głównej w widoku. Pierwszym elementem jest nagłówek <h1> z tytułem tej sekcji. W tym przypadku: <h1>Marking up navigation</h1>. Po głównym nagłówku znajduje się slogan, krótki opis treści tej aplikacji Google Web Designer. To, czy nawigacja po spisie treści znajduje się przed nagłówkiem w bazie kodu czy za nim, zależy od szerokości przeglądarki.

.

Jeśli Twoja przeglądarka ma szerokość większą niż 80 emów, spis treści znajduje się przed nagłówkiem w znaczniku 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>

<nav> to najlepszy element do stosowania w sekcjach nawigacji – automatycznie przekazuje informacje czytnikowi ekranu i wyszukiwarce. że sekcja ma rolę navigation, czyli punktu orientacyjnego.

Uwzględnienie atrybutu aria-label podaje krótki opis przeznaczenia nawigacji. W tym przypadku wartość atrybutu jest nadmiarowa tekstu widocznego na stronie, lepiej użyć aria-labelledby. aby odwoływać się do widocznego tekstu.

Możemy zmienić niesemantyczny <div> w akapit <p>, a następnie dodać element id, aby można się było do niego odwołać. Następnie używamy aria-labelledby:

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

Poza zmniejszeniem nadmiarowości widoczny tekst jest tłumaczony przez usługi tłumaczeniowe, podczas gdy wartości atrybutów – nie. Jeśli jest to możliwe, wybierz odpowiednią etykietę zamiast tekstu atrybutu.

Ten element nawigacyjny jest spisem treści. Jeśli chcesz użyć atrybutu aria-label, podaj te informacje, zamiast powtarzać widoczny tekst:

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

Gdy podajesz nazwę elementu z dostępnością, nie podawaj nazwy elementu. Czytniki ekranu dostarczają użytkownikowi tych informacji. Na przykład w elemencie <nav> nie dodawaj słowa „nawigacja”, informacje, które są uwzględniane, gdy używasz elementów semantycznych.

Same linki znajdują się na liście nieuporządkowanej. Nie muszą być one zagnieżdżone na liście, ale dzięki listom użytkownicy czytników ekranu mogą dowiedzieć się, ile ich jest elementy listy, a tym samym linki, stanowią pojedynczą listę 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>

Jeśli szerokość przeglądarki jest mniejsza niż 80 em, link „Na tej stronie” widżet znajduje się pod nagłówkiem i opisem. W tym celu dodaj dwóch komponentów nawigacyjnych spisu treści, a także ukrywanie jednego z nich za pomocą CSS display: none; w zależności od zapytania o multimedia.

Użycie 2 identycznych widżetów, aby wyświetlać tylko jeden, to wulgarny schemat. Dodatkowe bajty są pomijane. Ukrywanie treści HTML przed wszystkich użytkowników za pomocą usługi porównywania cen display: none. Problem polega na tym, że na szerokich ekranach spis treści pojawia się przed #main. Na węższych ekranach spis treści jest zagnieżdżony w obrębie #main. Używanie klawiatury do przechodzenia do treści powoduje pominięcie tabeli treści na szerokim ekranie. Choć użytkownicy przyzwyczajają się do elastyczności w wyświetlaniu różnych treści i zmiany lokalizacji, gdy zmieniają urządzenie lub zwiększą rozmiar czcionki, nie spodziewają się przy tym zmiany kolejności kart. Układy stron powinny być dostępne, przewidywalne i spójność w całej witrynie. W tym przypadku lokalizacja spisu treści nie jest przewidywalna.

Menu nawigacyjne strony

Menu nawigacyjne zapewniają drugorzędną nawigację, która pomaga użytkownikom w zrozumieniu, gdzie się znajdują w witrynie. Zwykle pokazują hierarchię adresów URL bieżącego dokumentu i lokalizacji bieżącej strony w strukturze witryny. Struktura witryny z perspektywy użytkownika może być inna ze struktury plików na serwerze. To nic złego. Użytkownik nie musi wiedzieć, w jaki sposób porządkujesz pliki, ale musi mieć możliwość do poruszania się po treściach.

Menu nawigacyjne pomagają użytkownikom poruszać się po witrynie i poznawać jej strukturę, dzięki czemu mogą szybko przejść do dowolnego elementu nadrzędnego sekcji za pomocą funkcji back bez konieczności przechodzenia wstecz na każdą odwiedzoną stronę.

Jeśli witryna ma prostą hierarchiczną strukturę katalogów, tak jak w przypadku web.dev, menu nawigacyjne linku do strony głównej lub nazwy hosta z linkiem do pliku indeksu każdego katalogu w nazwie ścieżki adresu URL. Uwzględnienie Obecna strona jest opcjonalna 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ę z bieżącej strony do strony głównej, pokazującą poszczególne poziomy.

Każda strona modułu Nauka HTML ma takie samo menu nawigacyjne, które przedstawia hierarchię lekcji HTML w learn – sekcja web.dev. Kod jest podobny do tego poniżej, ale aby zwiększyć przejrzystość, usunięto 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>

Ten menu nawigacyjne jest zgodny ze sprawdzonymi metodami. Wykorzystuje element <nav>, który stanowi punkt orientacyjny, więc technologia wspomagająca przedstawia menu nawigacyjne jako element nawigacyjny na stronie. Nazwa „menu nawigacyjnego” dostępnego dla ułatwień dostępu podana w elemencie aria-label odróżnia go od innych punktów nawigacyjnych w bieżącym dokumencie.

Pomiędzy linkami znajdują się separatory treści wygenerowane przez CSS. Separatory są umieszczone 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 nie widzą zgodnie ze sprawdzonymi metodami: separatory między linkami menu nawigacyjnego powinny być ukryte w czytnikach ekranu. Muszą też zapewniać odpowiedni kontrast względem tła, tak jak w przypadku zwykłego tekstu.

Ta wersja korzysta z listy nieuporządkowanej i elementów listy. Preferowana jest lista uporządkowana, ponieważ jest wyliczana uporządkowane elementy listy. To także lista: dodano z powrotem atrybut role="list", ponieważ niektóre wartości właściwości wyświetlania CSS usuwają semantykę z niektórych elementów.

Ogólnie link do strony głównej w menu nawigacyjnym powinien mieć postać „strona główna”. zamiast logo witryny z nazwą etykietę. Menu nawigacyjne znajduje się na górze dokumentu i jest jedynym elementem strony, więc ma sens. dlaczego warto użyć tego antywzorca.

Ostatni element jest niestandardowym elementem <share-action>. Elementy niestandardowe zostały omówione w sekcji 15. Chociaż ten element niestandardowy nie jest częścią menu nawigacyjnego. Użycie niepowiązanego elementu w elemencie <nav> jest dozwolone, o ile umieszczenie jest spójne na wszystkich stronach.

Bieżąca strona

Bieżąca strona, „Navigation”, nie jest uwzględniona w menu nawigacyjnym. Gdy bieżąca strona zostanie uwzględniona w menu nawigacyjnego, najlepiej, by tekst nie był linkiem, a element aria-current="page" powinien znajdować się w sekcji elementu listy. Jeśli nie jest podany, warto wskazać, że następny nagłówek to bieżąca strona z lub innego symbolu.

Jeśli projekt się zmieni, można użyć alternatywnej wersji menu nawigacyjnego:

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

Elementy menu nawigacyjnego nie są przeznaczone do etapów linearnych. Na przykład lista ścieżek, którymi użytkownik przeszedł na bieżącą stronę, lub lista czynności wykonanych do tego momentu w przepisie może być zagnieżdżona w elemencie <nav>, ale nie powinna być oznaczona jako menu nawigacyjne.

Nawigacja lokalna

Na tej stronie jest inny komponent nawigacyjny. Jeśli korzystasz z szerokiego ekranu, po lewej stronie znajduje się pasek boczny z „Nauka HTML” logo, pasek wyszukiwania oraz linki do każdej z 20 sekcji kursu Nauka HTML. Każdy link zawiera numer rozdziału, tytuł sekcji i znacznik wyboru po prawej stronie na odwiedzonych wcześniej sekcjach – być może dotyczy to tej sekcji, jeśli zdarzyło Ci się wyjść z niej i do niej wrócić. Linki do wszystkich sekcji w artykule Poznaj HTML wraz z nagłówkiem wyszukiwania i nagłówkiem lokalnym służą do nawigacji po lokalizacji.

Jeśli odwiedzasz tę witrynę na tablecie lub urządzeniu mobilnym albo z innego powodu masz węższy ekran, podczas wczytywania tej strony pasek boczny jest ukryty. Możesz go włączyć w menu z 3 kreskami na górnym pasku nawigacyjnym (tak, nagłówek to niestandardowy element <web-header> z ustawionym role="navigation").

Główną różnicą między stałą lokalną nawigację na szerokich ekranach a nawigacją lokalną na węższych ekranach, które można wyświetlać i znikać, jest wyświetlanie przycisku zamykania w wersji, którą można ukryć. Ta ikona jest ukryta na szerokich ekranach z oznaczeniem display: none;.

Link do tego dokumentu (sekcja 010) wygląda trochę inaczej niż pozostałe linki w lokalnej nawigacji, co wskazuje czytelnikom, że jest to bieżąca strona. Ta różnica wizualna jest tworzona za pomocą CSS. Bieżąca strona jest również identyfikowana za pomocą atrybutu aria-current="page". Informuje to technologie wspomagające, że jest to link do bieżącej strony. Kod HTML tego elementu listy w tym lokalnym panelu nawigacyjnym jest podobny do kodu:

<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 kolejny, znacznik wyboru nie będzie widoczny. Jeśli odwiedziłeś(-aś) tę stronę w przeszłości, Atrybut niestandardowy data-complete ma wartość true i będzie się wyświetlać znacznik wyboru. Znacznik wyboru jest w pakiecie w każdym linku, ale usługa porównywania cen ukrywa to pole wyboru przed użytkownikami, którzy wcześniej nie odwiedzali tej strony, za pomocą atrybutu display: none, ponieważ nie ma atrybutu Atrybut i wartość data-complete="true":

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

Gdy właściwość display ma wartość inną niż none, role informuje technologię wspomagającą, że wbudowany SVG jest obrazem, a aria-label działa jak atrybut alt w <img>.

Ogólna nawigacja

Nawigacja globalna to sekcja nawigacyjna prowadząca do stron najwyższego poziomu witryny, które są takie same na każdej stronie witryny. 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 zatytułowane, przyciski i widżety wyszukiwania. Te dodatkowe funkcje nie są wymagane. Wymagane jest to, nawigacja jest widoczna na każdej stronie i jest taka sama na każdej stronie; z aria-current="page" w linkach do bieżącej strony.

Globalna nawigacja pozwala w spójny sposób poruszać się po aplikacji lub witrynie. Google nie ma nawigacji u góry strony. Grupy reklam Yahoo! co robi. Chociaż wszystkie główne funkcje reklamowe Yahoo! właściwości mają różne style, zawartość większość sekcji jest taka sama.

Treść globalnych nagłówków nawigacyjnych wiadomości i sportu jest taka sama, ale ikona wskazująca, że użytkownik aktualnie przegląda dane w sporcie nie ma wystarczającego kontrastu, aby był przystępny; nawet dla osób niedowidzących. Obie sekcje mają globalny nawigacji z nawigacją lokalną związaną z konkretną sekcją pod nią.

Podobnie jak w przypadku globalnych nawigacji, stopki na wszystkich stronach powinny być identyczne. Ale to jest jedyne podobieństwo. Nawigacja globalna umożliwia nawigację do wszystkich części witryny z perspektywy produktu. Elementy nawigacyjne w stopce nie mają szczególnych wymagań. Zasadniczo stopka zawiera linki firmowe, takie jak oświadczenia prawne, informacje o firmie i kariery, i może prowadzić do zewnętrznych takich jak ikony mediów społecznościowych.

Stopka tej strony zawiera 3 dodatkowe elementy <nav>: nawigację w stopce, Google Developers oraz warunki i zasady, a każdy z nich jest linkiem. Nawigacja w stopce zawiera informacje o tym, jak współtworzyć web.dev na GitHubie. Inne treści edukacyjne są dostępne przez Google poza web.dev i zewnętrzne „jak się połączyć” .

Te 3 elementy nawigacyjne w elemencie <footer> są elementami <nav> i aria-labelnadają tym rolom punktów orientacyjnych nazwy na potrzeby ułatwień dostępu. Wszystkie elementy nawigacyjne, które widzieliśmy, to linki zagnieżdżone w listach w panelu nawigacyjnym. Omówiliśmy wszystkie informacje potrzebne do tworzenia własnych elementów nawigacyjnych. W kolejnym kroku przyjrzymy się oznaczaniu tabel danych.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę z zakresu nawigacji.