Koncepcje menu
- Struktura: Oznacz menu w taki sposób, aby odzwierciedlało strukturę i odpowiednie oznakowanie.
- Formatowanie: użyj powszechnie uznanych wzorów projektowych, aby rozróżnić menu i stan pozycji menu.
- Menu rozwijalne: Upewnij się, że w podmenu "fly-out" (rozwijane) można odpowiednio używać myszy i klawiatury.
- Menu aplikacji: dodawanie specyficznych znaczników i zachowań związanych z klawiaturą w celu przypominania menu aplikacji pulpitu.
Dlaczego to jest ważne?
Menu nawigacyjne odzwierciedla strukturę stron internetowych. Menu aplikacji zapewnia dostęp do podstawowych funkcji aplikacji. W ten sposób menu są ważnymi częściami stron internetowych i aplikacji i wymagają szczególnej uwagi podczas projektowania i rozwijania.- Użytkownicy czytników ekranu i klawiatury korzystają z interoperacyjności i znaczników klawiatury, które umożliwiają obsługę różnych menu na różne sposoby.
- Użytkownicy, którzy mają problemy z silnymi ruchami i użytkownicy ekranu dotykowego, potrzebują większych celów do klikania lub dotknięcia . W menu rozwijanym podmenu nie powinny zniknąć natychmiast po opuszczeniu obszaru klikalnego.
- Osoby z ograniczoną uwagą lub pamięć krótkoterminowa korzystają z jasnych i wyraźnych menu z łatwymi do zidentyfikowania stanami, takimi jak bieżąca strona.
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:
- 2.4.3 Kolejność ostrości: jeśli strona internetowa może być nawigowana sekwencyjnie, a sekwencje nawigacyjne wpływają na znaczenie lub działanie, skoncentrowane składniki otrzymują ostrość w kolejności, która zachowuje znaczenie i funkcjonalność. (Poziom A)
- 2.4.5 Wiele sposobów: 2.4.5 W celu zlokalizowania strony sieci Web w ramach zestawu stron sieci Web można znaleźć więcej niż jeden sposób, z wyjątkiem przypadków, gdy strona internetowa jest wynikiem lub etapem procesu. (Poziom AA)
- 2.4.7 Widoczność ostrości: dowolny interfejs użytkownika obsługiwany przez klawiaturę ma tryb pracy, w którym widoczny jest wskaźnik ostrości klawiatury. (Poziom AA)
- 2.4.8 Lokalizacja : informacje o lokalizacji użytkownika w zestawie stron sieci Web są dostępne. (Poziom AAA)
- 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ę można określić programowo; 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
- G14: Zapewnienie, że informacje przekazane przez różnice kolorów są również dostępne w tekście
- G63: Zapewnienie mapy witryny
- G65: Zapewnienie ścieżki chlebowej
- G127: Identyfikacja relacji strony internetowej z większą kolekcją stron sieci Web
- G128: Wskazanie bieżącej lokalizacji w listach nawigacyjnych
- G161: Udostępnianie funkcji wyszukiwania ułatwiającej użytkownikom znajdowanie treści
- G182: Zapewnienie, że dodatkowe znaczniki wizualne są dostępne, gdy do przekazywania informacji używane są różnice kolorów tekstu
- G183: przy użyciu współczynnika kontrastu 3: 1 z otaczającym tekstem i dostarczaniu dodatkowych wizualnych wskazówek na ostrości dla łączników lub elementów sterujących, w których używany jest tylko sam kolor, aby je zidentyfikować
- H4: Tworzenie logicznego zamówienia tablicy za pośrednictwem łączy, formantów i obiektów
- SCR26: wstawianie dynamicznej zawartości do modelu dokumentu bezpośrednio po jego elemencie wyzwalania
Na podstawie:
https://www.w3.org/WAI/tutorials/menus/
