Tworzenie głównego menu nawigacyjnego witryny

Z tego samouczka dowiesz się, jak utworzyć dostępną główną nawigację w witrynie. Dowiesz się, czym jest semantyczny kod HTML i ułatwienia dostępu oraz dlaczego używanie atrybutów ARIA może czasem przynieść więcej szkody niż pożytku.

Manuel Matuzović
Manuel Matuzović
X

Istnieje wiele różnych sposobów tworzenia głównej nawigacji w witrynie pod względem stylu, funkcjonalności oraz podstawowych znaczników i informacji semantycznych. Jeśli implementacja jest zbyt minimalistyczna, działa u większości osób, ale wygoda użytkowników może nie być najlepsza. Jeśli będzie zbyt skomplikowany, może dezorientować użytkowników, a nawet uniemożliwiać im dostęp do treści.

W przypadku większości witryn najlepiej jest stworzyć coś, co nie jest ani zbyt proste, ani zbyt skomplikowane.

Budowanie warstwa po warstwie

W tym samouczku zaczynasz od podstawowej konfiguracji i dodajesz warstwy mapy warstwa po warstwie, aż do momentu, gdy udostępnisz wystarczającą ilość informacji, stylów i funkcji, aby zadowolić większość użytkowników. Aby to osiągnąć, korzystasz z zasady progresywnego ulepszania, która polega na tym, że zaczynasz od najbardziej podstawowego i niezawodnego rozwiązania, a następnie stopniowo dodajesz kolejne warstwy funkcjonalności. Jeśli jedna warstwa z jakiegoś powodu nie działa, nawigacja nadal będzie działać, ponieważ płynnie przełączy się na warstwę podstawową.

Podstawowa struktura

Do podstawowej nawigacji potrzebne są 2 rzeczy: elementy <a> i kilka wierszy kodu CSS, które poprawią domyślny styl i układ linków.

  • HTML

    <a href="/home">Home</a>
<a href="/about-us">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

  • CSS

    /* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
}

/* Use the alternative box model
Details: <https://web.dev/learn/css/box-model/> */
*{
  box-sizing: border-box;
}

/* Basic font styling */
body {
  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
}

/* Link styling */
a {
  --text-color: var(--color-shades-dark);
  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  display: inline-block;
  margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
  margin-inline-end: 0.5rem;
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}
Zobacz Krok 1. Podstawowy kod HTML i CSS” na CodePen.

To rozwiązanie sprawdza się w przypadku większości użytkowników, niezależnie od tego, jak uzyskują dostęp do witryny. Nawigacja jest dostępna za pomocą myszy, klawiatury, urządzenia dotykowego lub czytnika ekranu, ale można ją jeszcze ulepszyć. Możesz ulepszyć ten podstawowy wzorzec, dodając do niego dodatkowe funkcje i informacje.

Oto, co można wówczas zrobić:

  • Wyróżnij aktywną stronę.
  • Odczytywanie liczby elementów użytkownikom czytników ekranu.
  • Dodaj punkt orientacyjny i pozwól użytkownikom czytników ekranu na bezpośredni dostęp do nawigacji za pomocą skrótu.
  • Ukryj nawigację w wąskich widocznych obszarach.
  • Ulepsz styl zaznaczenia.

Wyróżnij aktywną stronę

Aby wyróżnić aktywną stronę, możesz dodać klasę do odpowiedniego linku.

<a href="/about-us" class="active-page">About us</a>

Problem z tym podejściem polega na tym, że informacja o tym, który link jest aktywny, jest przekazywana wyłącznie wizualnie. Niewidomy użytkownik czytnika ekranu nie byłby w stanie odróżnić aktywnej strony od innych stron. Na szczęście standard Accessible Rich Internet Applications (ARIA) umożliwia przekazywanie tych informacji również semantycznie. Zamiast klasy użyj atrybutu i wartości aria-current="page".

aria-current (stan) wskazuje element, który reprezentuje bieżący element w kontenerze lub zbiorze powiązanych elementów. Token strony używany do wskazania linku w zestawie linków do stron, gdzie link jest stylizowany wizualnie, aby reprezentować aktualnie wyświetlaną stronę. [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Dzięki dodatkowemu atrybutowi czytnik ekranu odczyta teraz coś w rodzaju „bieżąca strona, link, O nas” zamiast „link, O nas”.

<a href="/about-us" aria-current="page" class="active-page">About us</a>

Wygodnym efektem ubocznym jest to, że możesz użyć atrybutu, aby wybrać aktywny link w CSS, dzięki czemu klasa active-page stanie się przestarzała.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}
Zobacz Krok 2. Wyróżnij aktywną stronę w CodePen.

Odczytywanie liczby elementów

Patrząc na nawigację, widzący użytkownicy mogą stwierdzić, że zawiera ona tylko 4 linki. Niewidomy użytkownik czytnika ekranu nie może uzyskać tych informacji tak szybko. Może być konieczne przejrzenie całej listy linków. Jeśli lista jest krótka, jak w tym przykładzie, może to nie być problemem, ale jeśli zawiera 40 linków, zadanie może być uciążliwe. Jeśli użytkownik czytnika ekranu wie z góry, że nawigacja zawiera wiele linków, może zdecydować się na inny, bardziej efektywny sposób nawigacji, np. wyszukiwanie w witrynie.
Dobrym sposobem na poinformowanie o liczbie elementów jest umieszczenie każdego linku w elemencie listy (<li>) zagnieżdżonym w liście nieuporządkowanej (<ul>).

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

Gdy użytkownik czytnika ekranu znajdzie listę, oprogramowanie odczyta coś w rodzaju „lista, 4 elementy”.

Oto demonstracja nawigacji za pomocą czytnika ekranu NVDA w systemie Windows.

Teraz musisz dostosować styl, aby wyglądał jak wcześniej.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

Używanie list może przynieść wiele korzyści użytkownikom czytników ekranu:

  • Mogą poznać łączną liczbę elementów, zanim wejdą z nimi w interakcję.
  • Mogą używać skrótów, aby przechodzić od jednego elementu listy do drugiego.
  • Mogą używać skrótów, aby przechodzić z jednej listy na drugą.
  • Czytnik ekranu może odczytać indeks bieżącego elementu (np. „element listy, 2 z 4”).

Poza tym, jeśli strona jest wyświetlana bez CSS, lista pokazuje linki jako spójną grupę elementów, a nie tylko jako stos linków.

Warto zauważyć, że w przypadku VoiceOver w Safari tracisz wszystkie te zalety, gdy ustawisz list-style: none. Jest to zamierzone. Zespół WebKit zdecydował się usunąć semantykę listy, gdy lista nie wygląda jak lista. W zależności od złożoności nawigacji może to być problemem lub nie. Z jednej strony nawigacja nadal działa i wpływa tylko na VoiceOver w Safari. VoiceOver z Chrome lub Firefoksem nadal odczytuje liczbę elementów, podobnie jak inne czytniki ekranu, np. NVDA. Z drugiej strony informacje semantyczne mogą być w niektórych sytuacjach bardzo przydatne. Aby podjąć tę decyzję, przetestuj nawigację z użytkownikami czytników ekranu i poproś ich o opinie. Jeśli chcesz, aby funkcja VoiceOver w Safari działała tak samo jak inne czytniki ekranu, możesz obejść ten problem, ustawiając rolę listy ARIA bezpośrednio w elemencie <ul>. Spowoduje to przywrócenie stanu sprzed usunięcia stylu listy. Wizualnie lista wygląda tak samo.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>
Wyświetl Krok 3. Ogłaszanie liczby elementów w CodePen.

Dodawanie punktu orientacyjnego

Niewielkim wysiłkiem udało Ci się znacznie ułatwić korzystanie z witryny użytkownikom czytników ekranu, ale możesz zrobić coś jeszcze. Nawigacja jest semantycznie nadal tylko listą linków i trudno stwierdzić, że ta konkretna lista jest główną nawigacją w witrynie. Możesz przekształcić tę zwykłą listę w listę nawigacyjną, umieszczając element <ul> w elemencie <nav>.

Używanie elementu <nav> ma kilka zalet. Czytnik ekranu odczytuje na przykład „nawigacja”, gdy użytkownik wchodzi w interakcję z tym elementem, i dodaje do strony punkt orientacyjny. Punkty orientacyjne to specjalne obszary na stronie, takie jak <header>, <footer> lub <main>, do których czytnik ekranu może przejść. Punkty orientacyjne na stronie mogą być przydatne, ponieważ umożliwiają użytkownikom czytników ekranu bezpośredni dostęp do ważnych obszarów na stronie bez konieczności interakcji z pozostałą częścią strony. Możesz na przykład przechodzić od jednego punktu orientacyjnego do drugiego, naciskając klawisz D w NVDA. W VoiceOver możesz użyć pokrętła, aby wyświetlić listę wszystkich punktów orientacyjnych na stronie, naciskając VO + U.

Lista 4 punktów orientacyjnych: baner, nawigacja, główny, informacje o treści.
Pokrętło w funkcji VoiceOver z listą wszystkich punktów orientacyjnych na stronie.

Na tej liście zobaczysz 4 punkty orientacyjne: baner, który jest elementem <header>, nawigację, która jest elementem <nav>, główny, który jest elementem <main>, oraz informacje o treści, które są elementem <footer>. Ta lista nie powinna być zbyt długa. Jako punkty orientacyjne należy oznaczyć tylko najważniejsze części interfejsu, takie jak wyszukiwanie w witrynie, nawigacja lokalna czy podział na strony.

Jeśli masz nawigację w całej witrynie, nawigację lokalną na stronie i paginację na jednej stronie, możesz też mieć 3 elementy <nav>. To dobrze, ale teraz mamy 3 punkty orientacyjne nawigacji, które semantycznie wyglądają tak samo. Trudno je odróżnić, chyba że bardzo dobrze znasz strukturę strony.

Obraz przedstawiający 3 punkty orientacyjne, z których każdy ma etykietę „nawigacja”.
Pokrętło w VoiceOver z listą 3 nieoznaczonych punktów orientacyjnych nawigacji.

Aby je odróżnić, oznacz je za pomocą aria-labelledby lub aria-label.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

Jeśli wybrana etykieta już istnieje w innym miejscu na stronie, możesz zamiast tego użyć elementu aria-labelledby i odwołać się do istniejącej etykiety za pomocą atrybutu id.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

Wystarczy zwięzła etykieta, nie rozpisuj się. Pomiń wyrażenia takie jak „nawigacja” czy „menu”, ponieważ czytnik ekranu już przekazuje użytkownikom te informacje.

Punkty orientacyjne
VoiceOver wymienia punkty orientacyjne „baner”, „główna nawigacja”, „główny”, „nawigacja na stronie”, „wybierz nawigację na stronie” i „informacje o treści”.
Wyświetl Krok 4. Dodawanie punktu orientacyjnego w CodePen.

Ukrywanie nawigacji w wąskich widocznych obszarach

Osobiście nie jestem zwolennikiem ukrywania głównej nawigacji w wąskich widocznych obszarach, ale jeśli lista linków jest zbyt długa, nie da się tego uniknąć. W takim przypadku zamiast listy użytkownicy zobaczą przycisk „Menu”, ikonę hamburgera lub kombinację tych elementów. Kliknięcie przycisku powoduje wyświetlenie lub ukrycie listy. Jeśli znasz podstawy JavaScriptu i CSS, jest to wykonalne, ale musisz zadbać o kilka kwestii związanych z UX i ułatwieniami dostępu.

  • Musisz ukryć listę w dostępny sposób.
  • Nawigacja musi być dostępna za pomocą klawiatury.
  • Nawigacja musi informować, czy jest widoczna.

Dodawanie przycisku menu

Ponieważ stosujesz zasadę progresywnego ulepszania, musisz się upewnić, że nawigacja nadal działa i ma sens nawet po wyłączeniu JavaScriptu.
Pierwszą rzeczą, której potrzebuje nawigacja, jest przycisk menu. Tworzysz go w HTML w elemencie szablonu, klonujesz w JavaScript i dodajesz do nawigacji.

Strona z przyciskiem menu.
Wynik: w wąskich widocznych obszarach zamiast linków nawigacja wyświetla przycisk menu. 
<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>
  1. Atrybut aria-expanded informuje oprogramowanie czytnika ekranu, czy element kontrolowany przez przycisk jest rozwinięty.
  2. aria-label nadaje przyciskowi tzw. nazwę na potrzeby ułatwień dostępu, czyli tekstową alternatywę dla ikony hamburgera.
  3. Ukrywasz element <svg> przed technologią wspomagającą osoby z niepełnosprawnością, używając aria-hidden, ponieważ ma on już etykietę tekstową dostarczoną przez aria-label.
  4. aria-controls informuje technologię wspomagającą osoby z niepełnosprawnością, która obsługuje ten atrybut (np. JAWS), którym elementem steruje przycisk.
const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);
  1. Użytkownicy powinni mieć możliwość zamknięcia nawigacji w dowolnym momencie, na przykład przez naciśnięcie klawisza Escape.
  2. Ważne jest, aby używać insertBefore zamiast appendChild, ponieważ przycisk powinien być pierwszym elementem nawigacji. Jeśli użytkownik klawiatury lub czytnika ekranu naciśnie Tab po kliknięciu przycisku, oczekuje, że zaznaczy pierwszy element na liście. Jeśli przycisk znajduje się po liście, nie będzie to miało miejsca.

Następnie zresetujesz domyślny styl przycisku i upewnisz się, że jest on widoczny tylko w wąskich widocznych obszarach.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}
Zobacz Krok 5. Dodawanie przycisku hamburgera na CodePen.

Ukrywanie listy

Zanim ukryjesz listę, ustaw pozycję i styl nawigacji oraz listy, aby układ był zoptymalizowany pod kątem wąskich widocznych obszarów, ale nadal dobrze wyglądał na większych ekranach.
Najpierw usuń element <nav> z naturalnego układu strony i umieść go w górnym rogu widocznego obszaru.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

Następnie zmień układ w wąskich widocznych obszarach, dodając nową właściwość niestandardową (—-nav-list-layout). Domyślnie układ jest kolumnowy, a na większych ekranach przełącza się na wierszowy.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

W wąskich widocznych obszarach nawigacja powinna wyglądać mniej więcej tak:

Strona z listą nawigacyjną i przyciskiem menu.
Zarówno przycisk menu, jak i lista znajdują się w górnym rogu widocznego obszaru.

Lista oczywiście wymaga CSS. Przesuniemy go do górnego rogu, rozciągniemy na cały ekran w pionie i zastosujemy background-color oraz box-shadow.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

Na wąskich widocznych obszarach lista powinna wyglądać mniej więcej tak, bardziej jak pasek boczny niż prosta lista.

Otworzy się lista nawigacyjna.

Na koniec ukryj listę, aby wyświetlała się tylko wtedy, gdy użytkownik kliknie przycisk, i znikała, gdy kliknie go ponownie. Ważne jest, aby ukryć tylko listę, a nie całą nawigację, ponieważ ukrycie nawigacji oznaczałoby również ukrycie ważnego punktu orientacyjnego.

Wcześniej dodaliśmy do przycisku zdarzenie kliknięcia, aby przełączać wartość atrybutu aria-expanded. Możesz użyć tych informacji jako warunku wyświetlania i ukrywania listy w kodzie CSS.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

Aby ukryć listę, należy użyć deklaracji właściwości, takiej jak visibility: hidden lub display: none, zamiast opacity: 0 lub translateX(100%). Te właściwości sprawiają, że linki nie są możliwe do zaznaczenia, gdy nawigacja jest ukryta. Użycie opacity lub translate spowoduje usunięcie treści wizualnie, więc linki będą niewidoczne, ale nadal dostępne za pomocą klawiatury, co może być mylące i frustrujące. Użycie visibility lub display powoduje, że element jest niewidoczny i niedostępny, więc jest ukryty dla wszystkich użytkowników.

Zobacz Krok 6. Ukrywanie listy.

Animowanie listy

Jeśli zastanawiasz się, dlaczego warto używać visibility: hidden; zamiast display: none;, to dlatego, że możesz animować widoczność. Ma tylko 2 stany: hidden i visible, ale można ją połączyć z inną właściwością, np. transform lub opacity, aby utworzyć efekt przesuwania lub pojawiania się. Nie zadziałałoby to z właściwością display: none, ponieważ nie można jej animować.

Następujące przejście CSS opacity tworzy efekt pojawiania się i znikania.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

Jeśli chcesz animować ruch, rozważ umieszczenie właściwości transition w zapytaniu o media prefers-reduced-motion, ponieważ animacje mogą wywoływać u niektórych użytkowników nudności, zawroty i bóle głowy.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

Dzięki temu animację zobaczą tylko osoby, które nie mają preferencji dotyczących ograniczenia ruchu.

Wyświetl Krok 7. Animowanie listy w CodePen.

Ulepszanie stylu zaznaczenia

Użytkownicy klawiatury polegają na stylach fokusu elementów, aby orientować się i poruszać po stronie. Domyślne style zaznaczenia są lepsze niż brak stylów zaznaczenia (co ma miejsce, gdy ustawisz outline: none), ale bardziej widoczne niestandardowe style zaznaczenia poprawiają wrażenia użytkownika.

Oto jak wyglądają domyślne style zaznaczenia linku w Chrome 103.

Niebieski kontur o szerokości 2 pikseli wokół zaznaczonego linku w Chrome 103.

Możesz to poprawić, podając własne style w wybranych przez siebie kolorach. Używając :focus-visible zamiast :focus, pozwalasz przeglądarce decydować, kiedy należy wyświetlać style zaznaczenia. Style :focus będą widoczne dla wszystkich użytkowników myszy, klawiatury i ekranu dotykowego, niezależnie od tego, czy ich potrzebują. W przypadku :focus-visible przeglądarka używa wewnętrznych metod heurystycznych, aby zdecydować, czy wyświetlać je tylko użytkownikom klawiatury, czy wszystkim.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

Obsługa przeglądarek w przypadku :focus-visible

Browser Support

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Source

Wyraźnie widoczny ciemny kontur o szerokości 2 pikseli z odstępem wewnątrz.

Elementy można wyróżniać na różne sposoby, gdy są zaznaczone. Zalecamy używanie właściwości outline, ponieważ nie powoduje ona uszkodzenia układu, co może się zdarzyć w przypadku właściwości border, i dobrze działa w trybie wysokiego kontrastu w systemie Windows. Właściwości, które nie działają dobrze, to background-color i box-shadow, ponieważ mogą nie być wyświetlane w przypadku niestandardowych ustawień kontrastu.

Witryna z ciemnym tłem i fioletowym podświetleniem.
Wyświetl Krok 8. Popraw style zaznaczenia w CodePen.

Gratulacje! Udało Ci się utworzyć semantycznie bogatą, dostępną i dostosowaną do komórek nawigację główną, która jest ulepszana progresywnie.

Zawsze można coś ulepszyć, na przykład:

  • Możesz rozważyć pułapkę fokusu w nawigacji lub ustawienie pozostałej części strony jako nieaktywnej w wąskich widocznych obszarach.
  • U góry strony możesz dodać link pomijania, aby umożliwić użytkownikom klawiatury pominięcie nawigacji.

Jeśli pamiętasz, jak zaczyna się ten artykuł, to właśnie osiągnęliśmy cel, jakim było rozwiązanie, które nie jest „ani zbyt proste, ani zbyt skomplikowane”. Można jednak przesadzić z nawigacją.

Istnieje wyraźna różnica między nawigacją a menu. Nawigacje to kolekcje linków do poruszania się po powiązanych dokumentach. Menu to zbiory działań, które można wykonać w dokumencie. Czasami te zadania się pokrywają. Możesz mieć nawigację, która zawiera też przycisk wykonujący działanie, np. otwierający okno modalne, lub menu, w którym jedno działanie powoduje przejście na inną stronę, np. stronę pomocy. W takim przypadku ważne jest, aby nie mieszać ról ARIA, ale określić główny cel komponentu i odpowiednio dobrać znaczniki i role.

Element <nav> ma domyślną rolę ARIA nawigacji, która wystarczy, aby przekazać, że element jest nawigacją, ale często można zobaczyć, że witryny używają też menu, paska menu i elementu menu. Czasami używamy tych terminów zamiennie, więc ich połączenie może ułatwić korzystanie z czytników ekranu. Zanim dowiemy się, dlaczego tak nie jest, przyjrzyjmy się oficjalnej definicji tych ról.

Rola nawigacji

Zbiór elementów nawigacyjnych (zwykle linków) do poruszania się po dokumencie lub powiązanych dokumentach.

navigation (rola) WAI-ARIA 1.1

Rola menu

Menu to często lista typowych działań lub funkcji, które użytkownik może wywołać. Rola menu jest odpowiednia, gdy lista elementów menu jest prezentowana w sposób podobny do menu w aplikacji komputerowej.

menu (role) WAI-ARIA 1.1

Rola paska menu

Prezentacja menu, które zwykle pozostaje widoczne i jest wyświetlane poziomo. Rola menubar służy do tworzenia paska menu podobnego do tych, które można znaleźć w aplikacjach komputerowych w systemach Windows, Mac i Gnome. Pasek menu służy do tworzenia spójnego zestawu często używanych poleceń. Autorzy powinni zadbać o to, aby interakcja z paskiem menu była podobna do typowej interakcji z paskiem menu w graficznym interfejsie użytkownika na komputerze.

menubar (role) WAI-ARIA 1.1

Rola menuitem

Opcja w zbiorze opcji zawartych w menu lub na pasku menu.

menuitem (rola) WAI-ARIA 1.1

Specyfikacja jest tutaj bardzo jasna: używaj nawigacji do poruszania się po dokumencie lub powiązanych dokumentach, a menu tylko do listy działań lub funkcji podobnych do menu w aplikacjach komputerowych. Jeśli nie tworzysz kolejnych Dokumentów Google, prawdopodobnie nie potrzebujesz żadnych ról menu w głównym menu nawigacyjnym.

Kiedy menu jest odpowiednie?

Głównym celem elementów menu nie jest nawigacja, ale wykonywanie działań. Załóżmy, że masz listę lub tabelę danych, a użytkownicy mogą wykonywać określone działania na każdym elemencie listy. Możesz dodać przycisk do każdego wiersza i wyświetlać działania, gdy użytkownicy klikną przycisk.

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

Konsekwencje używania ról menu

Bardzo ważne jest, aby używać tych ról menu w przemyślany sposób, ponieważ wiele rzeczy może pójść nie tak.

Menu wymagają określonej struktury DOM. menuitem musi być bezpośrednim elementem podrzędnym elementu menu. Ten kod może zakłócić działanie semantyczne:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

Doświadczeni użytkownicy oczekują, że niektóre skróty klawiszowe będą działać z menu i paskami menu. Zgodnie z przewodnikiem po sprawdzonych metodach tworzenia ARIA (APG) obejmuje to:

  • Enter i spacja, aby wybrać pozycje menu.
  • Klawisze strzałek we wszystkich kierunkach do poruszania się między elementami.
  • Klawisze Home i End, aby przenieść zaznaczenie odpowiednio na pierwszy lub ostatni element.
  • A–Z, aby przenieść zaznaczenie na następny element menu z etykietą zaczynającą się od wpisanego znaku.
  • Esc, aby zamknąć menu.

Jeśli czytnik ekranu wykryje menu, oprogramowanie może automatycznie zmienić tryb przeglądania, umożliwiając korzystanie z wcześniej wspomnianych skrótów. Niedoświadczeni użytkownicy czytników ekranu mogą nie być w stanie korzystać z menu, ponieważ nie znają tych skrótów lub nie wiedzą, jak ich używać.

To samo dotyczy użytkowników klawiatury, którzy mogą oczekiwać, że będą mogli używać klawiszy Shift i Shift + Tab.

Podczas tworzenia menu i pasków menu należy wziąć pod uwagę wiele kwestii, z których najważniejsza to ta, czy w ogóle warto ich używać. Podczas tworzenia typowej witryny wystarczy element nav z listą i linkami. Obejmuje to też aplikacje jednostronicowe (SPA) i aplikacje internetowe. Stos, na którym opiera się aplikacja, nie ma znaczenia. Jeśli nie tworzysz czegoś, co jest bardzo podobne do aplikacji komputerowej, unikaj ról menu.

Dodatkowe materiały