Tworzenie głównego menu nawigacyjnego witryny

W tym samouczku opisujemy sposób tworzenia łatwo dostępnej głównej nawigacji w witrynie. Dowiadujesz się o semantycznym kodzie HTML i ułatwieniach dostępu oraz o tym, jak korzystanie z atrybutów ARIA może czasem przynieść więcej szkody niż pożytku.

Manuel Matuzović

Istnieje wiele różnych sposobów tworzenia głównej nawigacji w witrynie, jeśli chodzi o styl, funkcjonalność oraz użyte znaczniki i informacje semantyczne. Jeśli wdrożenie jest zbyt minimalistyczne, rozwiązanie sprawdzi się w przypadku większości użytkowników, ale może też negatywnie wpłynąć na wrażenia użytkowników. Jeśli aplikacja jest zbyt rozbudowana, może wprowadzić użytkowników w błąd, a nawet utrudnić im dostęp do niej.

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

Kompilacja po warstwie

Ten samouczek rozpoczyna się od podstawowej konfiguracji i dodawanie kolejnych funkcji do poziomu, który wystarcza, aby zadowolić większość użytkowników, zapewniając odpowiednią ilość informacji, stylu i funkcjonalności. Aby osiągnąć taki efekt, należy zastosować zasadę stopniowego ulepszania, która polega na tym, że trzeba zacząć od najbardziej podstawowego i niezawodnego rozwiązania, a następnie stopniowo dodawać kolejne warstwy funkcji. Jeśli z jakiegoś powodu jedna warstwa nie działa, nawigacja wciąż działa, ponieważ płynnie przełącza się na warstwę bazową.

Podstawowa struktura

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

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

/* 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);
}

Jest to dobre rozwiązanie w przypadku większości użytkowników, niezależnie od sposobu przeglądania witryny. Nawigacja jest możliwa za pomocą myszy, klawiatury, urządzenia dotykowego lub czytnika ekranu, ale można by to poprawić. Aby z niego korzystać, rozszerz ten podstawowy wzorzec o dodatkowe funkcje i informacje.

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

• Zaznacz aktywną stronę.
• Informuj użytkowników czytnika ekranu o liczbie elementów.
• Dodaj punkt orientacyjny i zezwól użytkownikom czytników ekranu na bezpośredni dostęp do nawigacji za pomocą skrótu.
• Ukrywaj nawigację w wąskich widocznych obszarach.
• Popraw styl zaznaczenia.

Zaznacz aktywną stronę

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

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

Problem z tym podejściem polega na tym, że informacje, o których link jest aktywne, są przekazywane wyłącznie obrazowo. Niewidomy użytkownik czytnika ekranu nie może odróżnić aktywnej strony od innych stron. Na szczęście standard Accessible Rich Internet Applications (ARIA) umożliwia przekazywanie tych informacji również w sposób semantyczny. Użyj atrybutu i wartości aria-current="page" zamiast klasy.

aria-current (stan) wskazuje element, który reprezentuje bieżący element w kontenerze lub zbiorze powiązanych elementów. Token strony używany do wskazywania linku w zestawie linków do podziału na strony, przy czym link ma styl wizualny reprezentujący aktualnie wyświetlaną stronę. [Ułatwienia dostępu do aplikacji multimedialnych (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Po dodaniu tego dodatkowego atrybutu czytnik ekranu wypowie np. „bieżąca strona, link, O nas”. zamiast „link, informacje o nas”.

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

Wygodny efekt uboczny jest taki, że można użyć tego atrybutu do wybrania aktywnego linku w CSS, co sprawia, że klasa active-page jest nieaktualna.

<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);
}

Podaj liczbę elementów

Patrząc na elementy nawigacyjne, użytkownicy widzący mogą stwierdzić, że zawiera ona tylko cztery linki. Niewidomy użytkownik czytnika ekranu nie będzie w stanie szybko uzyskać tych informacji. Być może będą musieli przebrnąć przez całą listę linków. Może to nie stanowić problemu, jeśli lista jest krótka, jak w tym przykładzie, ale jeśli zawiera 40 linków, wykonanie tego zadania może być uciążliwe. Jeśli użytkownik czytnika ekranu wie od razu, że nawigacja zawiera dużo linków, może zdecydować się na inny, bardziej wydajny sposób nawigacji, np. wyszukiwanie w witrynie.
Przyjemnym sposobem na przekazanie informacji o liczbie elementów jest umieszczenie każdego linku w elemencie listy (<li>) zagnieżdżonej 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ę, jego oprogramowanie wypowie np. „lista, 4 elementy”.

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

Teraz musisz dostosować styl do poprzedniego stylu.

/* 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;
}

Korzystanie z list ma wiele zalet dla użytkowników czytników ekranu:

• Mogą poznać łączną liczbę elementów, zanim wejdą w interakcję z nimi.
• Może używać skrótów, aby przechodzić między elementami listy.
• Może używać skrótów, aby przechodzić między listami.
• Czytnik ekranu może odczytać indeks bieżącego elementu (na przykład „element listy, druga z czterech”).

Jeśli strona jest prezentowana bez CSS, lista pokazuje linki jako spójną grupę elementów, a nie tylko stos linków.

Istotną cechą funkcji VoiceOver w przeglądarce Safari jest to, że po ustawieniu opcji list-style: none utracisz wszystkie te zalety. To celowe. Zespół WebKit zdecydował się usunąć semantykę listy, gdy lista nie wygląda jak lista. Zależy to od stopnia skomplikowania nawigacji. Z jednej strony nawigacja jest nadal wystarczająca i ma wpływ tylko na VoiceOver w przeglądarce Safari. VoiceOver w Chrome lub Firefoksie nadal będzie podawać liczbę elementów na głos, a także informacje z innych czytników ekranu, takich jak NVDA. Z drugiej strony informacje semantyczne mogą być bardzo przydatne w niektórych sytuacjach. Aby podjąć tę decyzję, przetestuj nawigację wśród użytkowników czytników ekranu i poproś ich o opinie. Jeśli stwierdzisz, że VoiceOver w Safari ma działać tak samo jak pozostałe czytniki ekranu, możesz rozwiązać ten problem, ustawiając jawnie rolę listy ARIA w elemencie <ul>. Spowoduje to przywrócenie stanu sprzed usunięcia stylu listy. Wizualnie lista pozostaje bez zmian.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

Dodaj punkt orientacyjny

Niewielkim wysiłkiem udało Ci się osiągnąć znakomite ulepszenia dla użytkowników czytników ekranu, ale możesz zrobić jeszcze jedno. Nawigacja w witrynie to tylko lista linków i ciężko stwierdzić, że jest to główna metoda nawigacji w witrynie. Możesz przekształcić tę listę w listę nawigacyjną, umieszczając <ul> w elemencie <nav>.

Zastosowanie elementu <nav> ma kilka zalet. W szczególności, gdy użytkownik wejdzie z nim w interakcję, czytnik ekranu wypowie coś w rodzaju „nawigacji”, a potem dodaje do strony punkt orientacyjny. Punkty orientacyjne to specjalne obszary na stronie, takie jak <header>, <footer> czy <main>, do których może przejść czytnik ekranu. Umieszczanie punktów orientacyjnych na stronie może być przydatne, ponieważ umożliwia użytkownikom czytników ekranu bezpośredni dostęp do ważnych obszarów strony bez konieczności interakcji z pozostałą częścią strony. Na przykład możesz przechodzić między punktami orientacyjnymi, naciskając klawisz D w NVDA. W Voice Over możesz użyć pokrętła, aby wyświetlić listę wszystkich punktów orientacyjnych na stronie, naciskając VO + U.

Na tej liście znajdują się 4 punkty orientacyjne: banner, który jest elementem <header>, nawigacja to element <nav>, główny element <main>, a informacje o treści to <footer>. Ta lista nie powinna być zbyt długa. Służą tylko do oznaczania najważniejszych elementów interfejsu jako punktów orientacyjnych, np. wyszukiwanie w witrynie, lokalna nawigacja czy podział na strony.

Jeśli masz nawigację w całej witrynie, lokalną nawigację po stronie i podział na strony na jednej stronie, możesz też mieć 3 elementy <nav>. To nie problem, ale teraz dostępne są 3 punkty orientacyjne nawigacji, które pod względem semantycznym wyglądają tak samo. Ciężko je odróżnić, jeśli nie znasz dobrze struktury strony.

Aby je odróżnić, oznacz je etykietą 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 występuje już gdzieś na stronie, możesz użyć atrybutu 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>

Wystarcza zwięzła etykieta – nie rozwlekaj tematu. Pomiń wyrażenia takie jak „nawigacja”. lub „menu” ponieważ czytnik ekranu udostępnia już użytkownikom te informacje.

Ukrywaj nawigację w wąskich widocznych obszarach

Osobiście nie przepadam za ukrywaniem głównej nawigacji w wąskich widocznych obszarach, ale jeśli lista linków stanie się zbyt długa, nie da się tego obejść. W takim przypadku zamiast listy użytkownicy zobaczą przycisk „Menu”. ikonę burgera lub ich kombinację. Kliknięcie tego przycisku spowoduje wyświetlenie lub ukrycie listy. Jeśli znasz podstawy JavaScriptu i CSS, możesz wykonać to zadanie, ale musisz zadbać o kilka kwestii związanych z UX i ułatwieniami dostępu.

• Musisz ukryć listę w sposób ułatwiający dostęp.
• Nawigacja musi być dostępna przy użyciu klawiatury.
• Nawigacja musi informować, czy jest widoczna.

Dodawanie przycisku do burgera

Kierujesz się zasadą stopniowego ulepszania, dlatego warto zadbać o to, aby nawigacja działała i była spójna nawet po wyłączeniu JavaScriptu.
Pierwszą rzeczą, o której musisz pamiętać, jest przycisk z burgerami. Tworzysz go w kodzie HTML w elemencie szablonu, kopiujesz w JavaScript i dodajesz do elementów nawigacyjnych.

<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 sterowany za pomocą przycisku jest rozwinięty.
2. aria-label nadaje przyciskowi tzw. nazwę ułatwień dostępu, która jest tekstową alternatywą dla ikony burgera.
3. Ukrywasz element <svg> przed technologią wspomagającą osoby z niepełnosprawnością za pomocą elementu aria-hidden, ponieważ ma on już etykietę tekstową od dostawcy aria-label.
4. aria-controls informuje o technologii wspomagającej osoby z niepełnosprawnością, która obsługuje atrybut (np. JAWS), którym element 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 mogą w dowolnym momencie zamknąć nawigację, na przykład naciskając klawisz Escape.
2. Zaleca się użycie 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, użytkownik oczekuje, że zostanie zaznaczony pierwszy element na liście. Nie dotyczy to sytuacji, gdy przycisk znajduje się za listą.

Następnie musisz zresetować domyślny styl przycisku i upewnić 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);
}

Ukrywam listę

Zanim ukryjesz listę, zmień położenie i styl nawigacji oraz listy, aby układ był zoptymalizowany pod kątem wąskich widocznych obszarów, a zarazem wyglądał dobrze na większych ekranach.
Najpierw usuń element <nav> z naturalnego wyglądu 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. Na większych ekranach ma układ rzędowy.

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

Ta lista wymaga oczywiście trochę CSS. Przeniesiemy go do górnego rogu końcowego, wypełnimy cały ekran w pionie, zastosujemy background-color i 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;
}

W wąskich widocznych obszarach lista powinna wyglądać mniej więcej tak jak na pasku bocznym niż zwykła lista.

Na koniec ukryj listę i wyświetlaj ją tylko wtedy, gdy użytkownik kliknie przycisk raz, oraz ukryj ją, gdy kliknie ponownie. Ważne jest, by ukryć tylko listę, a nie całą nawigację, ponieważ ukrycie elementów nawigacyjnych oznacza też ukrycie ważnego punktu orientacyjnego.

Wcześniej do przycisku zostało dodane zdarzenie kliknięcia, które przełącza wartość atrybutu aria-expanded. Tych informacji możesz używać jako warunków do wyświetlania i ukrywania listy w 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);
}

Pamiętaj, aby zamiast opacity: 0 lub translateX(100%) użyć deklaracji właściwości, takiej jak visibility: hidden lub display: none. Dzięki nim nie można zaznaczyć linków, gdy nawigacja jest ukryta. Użycie języka opacity lub translate spowoduje usunięcie treści wizualnie, dzięki czemu linki będą niewidoczne, ale nadal dostępne przy użyciu klawiatury, co byłoby mylące i frustrujące. Użycie właściwości visibility lub display powoduje ukrycie ich wizualnie i sprawia, że są niedostępne dla wszystkich użytkowników.

Animowanie listy

Jeśli zastanawiasz się, dlaczego lepiej użyć parametru visibility: hidden; zamiast display: none;, to dlatego, że możesz animować widoczność. Ma tylko 2 stany, hidden i visible, ale możesz je połączyć z inną właściwością, taką jak transform lub opacity, aby uzyskać efekt wysuwania lub rozjaśniania. To nie zadziała z reklamą displayową: brak, ponieważ właściwość display nie jest animowana.

Poniższe przejścia CSS opacity dają efekt rozjaśniania i ściemniania.

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 zamiast tego chcesz animować ruch, rozważ dodanie właściwości transition do zapytania o multimedia prefers-reduced-motion, ponieważ u niektórych użytkowników animacje mogą wywoływać nudności, zawroty głowy 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 preferują zmniejszonego ruchu.

Popraw styl zaznaczenia

W przypadku orientacji i nawigacji po stronie użytkownicy klawiatury korzystają ze stylów zaznaczenia elementów. Domyślne style zaznaczenia są lepsze niż żadne style zaznaczenia (co się dzieje, jeśli ustawisz outline: none), ale wyraźniej widoczne style fokusu niestandardowego poprawiają wrażenia użytkowników.

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

Możesz to poprawić, dodając własne style w wybranych kolorach. Jeśli używasz atrybutu :focus-visible zamiast :focus, pozwalasz przeglądarce zdecydować, kiedy należy wyświetlić style zaznaczenia. Style w języku :focus będą widoczne dla wszystkich użytkowników korzystających z myszy, klawiatury i dotyku, niezależnie od tego, czy ich potrzebują. W wersji :focus-visible przeglądarka określa, czy wyświetlić ją tylko użytkownikom klawiatury czy wszystkim na podstawie heurystyki wewnętrznej.

/* 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 usłudze :focus-visible

Istnieją różne sposoby wyróżniania zaznaczonych elementów. Zalecamy użycie właściwości outline, ponieważ nie zakłóca to układu, co może się zdarzyć w przypadku typu border. Działa dobrze też w trybie wysokiego kontrastu w systemach Windows. Właściwości, które nie działają dobrze, to background-color lub box-shadow, bo mogą w ogóle nie być wyświetlane z niestandardowymi ustawieniami kontrastu.

Gratulacje! Strona główna jest teraz udoskonalona, bogata w semantykę, przystępna i dostosowana do urządzeń mobilnych.

Zawsze można coś poprawić. Na przykład:

• Możesz unieść zaznaczenie obszaru nawigacji lub uniemożliwić resztę strony w obszarach o wąskim obszarze.
• Aby umożliwić użytkownikom klawiatury pominięcie nawigacji, na górze strony możesz dodać link pomijania.

Jeśli przypominasz sobie początek tego artykułu w celu określenia, że rozwiązanie nie powinno być ani zbyt proste, ani zbyt skomplikowane”, to teraz właśnie jesteśmy. Możliwe jest jednak nadmierne opracowanie nawigacji.

Nawigacja a menu

Jest wyraźna różnica między nawigacją a menu. Nawigacja to zbiory linków służących do poruszania się po powiązanych dokumentach. Menu to zbiory działań, które należy wykonać w dokumencie. Czasami te zadania się nakładają. Możesz mieć obszar nawigacyjny, który zawiera również przycisk wykonujący działanie, np. otwarcie okna modalnego, lub menu, w którym jedno działanie powoduje przejście na inną stronę, np. stronę pomocy. W takim przypadku pamiętaj, aby nie łączyć ról ARIA, ale określić główne przeznaczenie komponentu oraz odpowiednio wybrać znaczniki i role.

Element <nav> ma domyślnie przypisaną rolę nawigacji ARIA, która wystarcza do zasygnalizowania, że element to element nawigacyjny, ale często można zauważyć, że witryny korzystają też z menu, paska menu i elementu menu. Czasami używamy tych terminów zamiennie, dlatego uznaliśmy, że połączenie ich w celu zwiększenia wygody użytkowników czytników ekranu może mieć sens. Zanim dowiemy się, dlaczego tak jest zazwyczaj, przyjrzyjmy się oficjalnej definicji tych ról.

Rola w nawigacji

Zbiór elementów nawigacyjnych (zwykle linków) umożliwiających nawigację po dokumencie lub powiązanych dokumentach.

navigation (role) WAI-ARIA 1.1

Rola w 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 pozycji menu jest przedstawiona w sposób podobny do menu w aplikacji komputerowej.

menu (role) WAI-ARIA 1.1

Rola na pasku menu

Menu, które zazwyczaj pozostaje widoczne i zwykle jest wyświetlane w poziomie. Rola na pasku menu służy do tworzenia paska menu podobnego do tego w aplikacjach komputerowych 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 sposób działania paska menu był podobny do typowej w graficznym interfejsie na komputery.

menubar (role) WAI-ARIA 1.1

Rola elementu menu

Opcja w zestawie opcji zawartym w menu lub pasku menu.

menuitem (role) WAI-ARIA 1.1

Specyfikacja jest tutaj bardzo zrozumiała. Użyj nawigacji do poruszania się po dokumencie lub powiązanych dokumentach i menu tylko w celu uzyskania 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 do głównego menu nawigacyjnego.

Kiedy menu będzie odpowiednie?

Elementy menu służą nie tylko do poruszania się po menu, lecz do wykonywania działań. Załóżmy, że masz listę lub tabelę danych, a użytkownicy mogą wykonywać określone działania na poszczególnych elementach listy. Możesz dodać przycisk do każdego wiersza i pokazywać, jakie działania wykonują po jego kliknięciu przez użytkownika.

<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 korzystania z ról w menu

Ważne jest, by używać tych ról w menu z rozwagą, bo wiele elementów może pójść nie tak.

Menu wymagają określonej struktury DOM. Element menuitem musi być bezpośrednim elementem podrzędnym elementu menu. Ten kod może zaburzyć zachowanie 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 zasadach tworzenia ARIA (APG) informacje obejmują te zagadnienia:

• Naciśnij Enter i spację, aby wybrać pozycje menu.
• Aby przechodzić między elementami, używaj klawiszy strzałek we wszystkich kierunkach.
• Klawisze Home i End służą do przenoszenia zaznaczenia odpowiednio na pierwszy lub ostatni element.
• a–z – powoduje przejście do następnej pozycji menu z etykietą rozpoczynającą się od wpisanego znaku.
• Naciśnij Esc, by zamknąć menu.

Jeśli czytnik ekranu wykryje menu, oprogramowanie może automatycznie zmienić tryb przeglądania, umożliwiając korzystanie z wymienionych wcześniej 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 ani nie wiedzą, jak z nich korzystać.

Tak samo jest w przypadku użytkowników klawiatury, którzy mogą oczekiwać, że będą mieli do wyboru klawisze Shift oraz Shift + Tab.

Tworząc menu i paski menu, należy wziąć pod uwagę wiele kwestii, między innymi, czy warto ich używać. Podczas tworzenia typowej witryny wystarczy Ci element nawigacji z listą i linkami. Obejmuje to również aplikacje na jednej stronie (SPA) i aplikacje internetowe. Bazowy stos nie ma znaczenia. Unikaj korzystania z ról menu, chyba że tworzysz coś, co jest bardzo blisko aplikacji komputerowej.

Dodatkowe materiały

• Poprawianie list przez Scotta O'harę.
• Adrian Roselli: Don't Use ARIA Menu Roles for Site Nav (Nie używaj ról menu ARIA do nawigacji w witrynie).
• Menu „Menu Buttons” (Przyciski menu) Heydon Pickering.
• menu WAI-ARIA i dlaczego należy obchodzić się z nimi z rozwagą Marco Zehe.
• Odpowiedzialne ukrywanie treści – Kitty Giraudel.
• :focus-visible Is Here, Matthias Ott.

Baner powitalny autorstwa Micka Haupta