Formatowanie menu
Uwagi ogólne
Menu często używają obrazów, takich jak ikony, które mogą być dekoracyjne lub komunikować funkcjonalność. Obrazy te wymagają alternatywnych opcji, jak opisano w samouczku Obrazy. Wymagania kontrastu dotyczą również menu i ich elementów.Lokalizacja
Umieść menu w miejscu, w którym oczekuje tego docelowa grupa witryny. Na przykład w witrynach internetowych główne menu nawigacyjne jest zwykle umieszczone pionowo po lewej stronie (w językach od lewej do prawej) lub poziomo w poprzek u góry. Menu aplikacji zazwyczaj umieszczane jest poziomo w górnej części ekranu.Identyfikacja
Upewnij się, że menu i ich elementy są możliwe do zidentyfikowania jako takie. Oprócz znaczników strukturalnych omówionych w poprzedniej sekcji, schemat kolorów jest niezbędny do komunikowania się w menu i pozycjach wizualnie.Zastanów się, czy etykieta menu jest widoczna dla wszystkich. Na przykład w tych samouczkach "Samouczek menu", "Wszystkie samouczki", "Na tej stronie" to etykiety menu udostępnione jako widoczne nagłówki dostępne dla wszystkich użytkowników.
Czytelność
Upewnij się, że odpowiednie pozycje menu i menu pasują do całego tekstu. Rozmiar menu powinien również dostosowywać się do różnych rozmiarów tekstu, aby dostosować języki do dłuższych słów i ludzi, którzy potrzebują większego tekstu. Tam gdzie to możliwe, unikaj wszystkich wielkich tekstów, linii podziałów i dzielników, ponieważ często są one rozpraszające i trudne do odczytania.Rozmiar
Zapewnij wystarczająco dużo miejsca, aby wspierać osoby o ograniczonej sprawności i małych ekranach dotykowych na urządzeniach mobilnych. Jednocześnie upewnij się, że menu nie nakładają się na siebie i innych elementach treści strony, gdy użytkownicy zwiększają rozmiar tekstu lub powiększają stronę.Elementy menu
Wyróżnianie elementów menu i ich stanów za pomocą kolorów i innych opcji stylizacji. Nie polegaj tylko na kolorze, ponieważ niektórzy użytkownicy nie będą w stanie dostrzec takich zmian. Na przykład zmień kształt elementu menu lub dodaj ikonę, oprócz zmiany jego koloru po jego wybraniu.Stan domyślny
Użyj odmiennej stylistyki, aby wizualnie wskazać elementy menu jako obszary strony, które można uruchomić. Unikaj jednak przesadnych dekoracji tekstowych, takich jak duże litery lub kapitaliki, ponieważ czynią to tekst trudniejszym do przeczytania.Stany Hover i Focus
Zmieniaj wskazane lub zaznaczone pozycje menu, które umożliwią użytkownikom wyświetlanie wskazówek podczas nawigacji w menu. W tym przykładzie stany hover i focus używają odwróconych schematów kolorów (niebieskiego zamiast białego na niebieskim) i podkreślają.color : #036;
background-color : #fff;
text-decoration : underline;
}
Stan aktywny
Wskaż element menu, który został aktywowany przez kliknięcie, stuknięcie lub wybór klawiatury. Użytkownicy mogą identyfikować niezamierzoną aktywację, na przykład po kliknięciu niewłaściwego elementu menu. W tym przykładzie pozycja aktywna ma ciemniejsze niebieskie tło i podkreślenie.color : #fff;
background-color : #024;
text-decoration : underline;
}
Stan aktualny
Dodatkowo wizualnie wskaż bieżący element menu oprócz znaczników strukturalnych omówionych w poprzedniej sekcji.W tym przykładzie dodano inną kombinację kolorów (czarną na szarą) i dolną krawędź, aby uzyskać aktualny element menu w odrębnym kolorze i kształcie.
background-color : #bbb;
color : #000;
border-bottom : .25em solid #444;
}
Odwiedzony stan
W przypadku niektórych typów menu, takich jak kroki instruktażowe, przydatne może być wskazanie elementów menu, które użytkownik już odwiedził. Jednak większość menu nie ma się zmieniać w oparciu o odwiedzony stan.Przykład (aktywny)
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:
- 1.4.1 Używanie koloru: Kolor nie jest wykorzystywany jako jedyny wizualny sposób przekazywania informacji, wskazujący działanie, monitowanie odpowiedzi lub wyróżnienie elementu wizualnego. (Poziom A)
- G14: Zapewnienie, że informacje przekazane przez różnice kolorów są również dostępne w tekście
- G128: Wskazanie bieżącej lokalizacji w listach nawigacyjnych
- G182: Zapewnienie, że dodatkowe znaczniki wizualne są dostępne, gdy do przekazywania informacji używane są różnice kolorów tekstu
- G183: Stosowanie kontrastu 3: 1 z otaczającym tekstem i dostarczanie dodatkowych wizualnych wskaźników ostrości dla łączników lub elementów sterujących, w których jest używany sam kolor, aby je zidentyfikować
Dalej: Menu wysuwane
Na podstawie:
http://www.w3.org/WAI/tutorials/menus/styling/
Suplement (kod aktywnego przykładu)
