Formatowanie menu

Wyraźna i spójna stylistyka pozwala użytkownikom na szybsze znajdowanie i rozpoznawanie menu. Taka stylistyka obejmuje spójność zachowania, wyglądu i względnej lokalizacji na stronach w witrynie.

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


FRAGMENT KODU: CSS
nav a :hover , nav a :focus {
 color : #036;
 background-color : #fff;
 text-decoration : underline;
}
Zobacz ten kod w aktywnym przykładzie.

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.


FRAGMENT KODU: CSS
nav a :active {
 color : #fff;
 background-color : #024;
 text-decoration : underline;
}
Zobacz ten kod w aktywnym przykładzie.

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.


FRAGMENT KODU: CSS
nav [ id="page" ] {
 background-color : #bbb;
 color : #000;
 border-bottom : .25em solid #444;
}
Zobacz ten kod w aktywnym przykładzie.

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)


Przykład



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)
Techniki:
  • 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ć
Poprzedni: Struktura
Dalej: Menu wysuwane

Na podstawie:
http://www.w3.org/WAI/tutorials/menus/styling/

Suplement (kod aktywnego przykładu)

Popularne posty z tego bloga

Walidatory

Notepad++

Github