Struktura menu

Znaczniki semantyczne przekazują strukturę menu użytkownikom. Menu oznaczone semantycznie można łatwo dostosować do różnych sytuacji, takich jak małe wyświetlacze, powiększenie ekranu i inne techniki wspomagające.

Prezentacja menu

Konstruujemy strukturę menu, zazwyczaj używając listy. Takie informacje strukturalne umożliwiają technologie wspomagające informowanie o liczbie elementów w menu i zapewniają odpowiednią funkcjonalność nawigacyjną.

Podejście 1: Lista nieuporządkowana

Użyj nieuporządkowanej listy (<ul>), gdy elementy menu nie są w określonej kolejności. Większość kategorii menu, takich jak nawigacja w witrynie, zalicza się do tej kategorii.
FRAGMENT KODU: LISTA NIEUPORZĄDKOWANA
<ul> <li><a href= "…" > Home </a></li> <li><a href= "…" > Shop </a></li> <li><a href= "…" > Space Bears </a></li> <li><a href= "…" > Mars Cars </a></li> <li><a href= "…" > Contact </a></li> … </ul>

Podejście 2: Lista zamówionych zamówień 

Użyj uporządkowanej listy (<ol>), gdy kolejność pozycji menu jest ważna. W poniższym przykładzie pozycje menu przedstawiają kroki instrukcji konstrukcyjnej:

FRAGMENT KODU: LISTA Z ZAMÓWIENIEM
<ol> <li><a href= "…" > Unpacking the Space Craft </a></li> <li><a href= "…" > Check Contents of Package </a></li> <li><a href= "…" > Build Chassis </a></li> <li><a href= "…" > Build Engine </a></li> <li><a href= "…" > Mount Engine to Chassis </a></li> … </ol>

Identyfikacja menu

Zidentyfikuj menu, najlepiej używając elementu HTML5 <nav>, aby umożliwić użytkownikom bezpośredni dostęp do menu. Inne techniki oznaczania menu są opisane w e-podręczniku Regiony stron.

FRAGMENT KODU: HTML

<nav> <ul> … </ul> </nav>

Etykiety menu

Etykiety menu ułatwiają znajdowanie i zrozumienie. Etykiety powinny być krótkie, ale opisowe, aby umożliwić użytkownikom rozróżnienie między wieloma menu na stronie internetowej. Użyj nagłówka, aria-label, aria-labelledby lub aria-labelledby do etykiety aria-labelledby. Te techniki są opisane w poradnikach dotyczących regionów znakowania.

FRAGMENT KODU: HTML

<nav aria-labelledby= "mainmenulabel" > <h2 id= "mainmenulabel" class= "visuallyhidden" > Main Menu </h2> </nav>

Wskaż bieżący element

Użyj znaczników, aby wskazać aktualną pozycję menu, na przykład aktualną stronę w witrynie, aby poprawić orientację w menu.

Podejście  1: Używanie niewidocznego tekstu

Zapewnij niewidoczną etykietę, która jest czytana głośno dla użytkowników czytników ekranu i używana przez inne technologie wspomagające do zaznaczania bieżącej pozycji, która pozwala na niestandardowy tekst etykiety. Usuń kotwicę (<a> ), dzięki czemu użytkownicy nie mogą wchodzić w interakcje z bieżącym elementem. To pozwala uniknąć nieporozumień i podkreśla, że ​​aktualny element menu jest aktywny. W poniższym przykładzie pozycja menu zawiera niewidoczny tekst "Current Page:" i element <a> jest zastępowany przez <span> z current klasy:

FRAGMENT KODU: HTML

<li> <span class= "current" > <span class= "visuallyhidden" > Current Page: </span> Space Bears </span> </li>

Podejście 2: Korzystanie z protokołu WAI-ARIA

Użyj atrybutu aria-current="page" aby wskazać bieżącą stronę w menu. Ta technika jest szczególnie przydatna, gdy kotwicę (<a> ) nie można usunąć z kodu HTML. W poniższym przykładzie łącze w nawigacji wskazuje na główną treść strony.
 FRAGMENT KODU: HTML
<li> <a href= "#main" aria-current= "page" > Space Bears </a> </li>

Powiązane zasoby WCAG 2.0

Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:

Kryteria powodzenia:

• 4.1.2 Nazwa, rola, wartość: dla wszystkich elementów interfejsu użytkownika (w tym między innymi: elementy formularza, linki i komponenty generowane przez skrypty), nazwę i rolę mogą być programowo określone; Stanów, właściwości i wartości, które mogą być ustawione przez użytkownika, można programowo ustawić; A powiadomienia o zmianach w tych pozycjach są dostępne dla agentów użytkowników, w tym technologii wspomagających. (Poziom A)

Techniki:

• ARIA6: użycie etykiety aria do dostarczania etykiet dla obiektów
• ARIA11: używanie punktów orientacyjnych ARIA do identyfikowania obszarów strony

 Poprzedni: Koncepcje menu

 Dalej: Formatowanie

Na podstawie:

https://www.w3.org/WAI/tutorials/menus/structure/