Menu, menubar i przycisk menu
Zaimplementuj menu aplikacji z właściwymi rolami i klawiszami.
Menu, menubar i przycisk menu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Czym są menu ARIA
Menu ARIA to aplikacyjna lista poleceń, taka jak menu File lub Edit w oprogramowaniu desktopowym, a nie główna nawigacja witryny. 🍔
Nie służy do nawigacji po witrynie
Odnośniki do stron umieszczaj w elemencie nav i używaj zwykłych kotwic. Roli menu używaj tylko dla rzeczywistych zestawów poleceń, w przeciwnym razie wprowadzisz użytkowników czytników ekranu w błąd.
Trzy podstawowe role
Ten wzorzec używa role="menu" dla kontenera, role="menuitem" dla każdego polecenia oraz role="menubar" dla poziomego, stale widocznego paska.
<ul role="menu">
<li role="menuitem">Cut</li>
<li role="menuitem">Copy</li>
</ul>Przycisk menu
Menu button to rzeczywisty przycisk otwierający menu. Nadaj mu aria-haspopup="true", aby użytkownicy wiedzieli, że pojawi się wyskakujące okno.
<button aria-haspopup="true"
aria-expanded="false">Actions</button>Śledź stan otwarcia
Przycisk menu przełącza aria-expanded między true i false podczas otwierania i zamykania menu, podobnie jak każdy mechanizm rozwijania.
Przenoś fokus po otwarciu
Po otwarciu menu przenieś focus do jego wnętrza, na pierwszy element menu. Gdy menu jest aktywne, przycisk nie zachowuje już fokusu.
Klawisze strzałek wewnątrz menu
W pionowym menu Up and Down Arrow przemieszczają się między elementami. W menubarze Left and Right Arrow poruszają się po pasku najwyższego poziomu.
Ruchomy tabindex
W danym momencie tylko jeden element menu znajduje się w kolejności tabulacji. Dzięki mechanizmowi roving tabindex element z fokusem ma tabindex 0, a pozostałe mają -1.
Aktywuj i zamknij
Klawisz Enter lub Spacja wykonuje zaznaczone polecenie i zamyka menu. Po wybraniu polecenia menu powinno samo się zamknąć.
Escape przywraca fokus
Escape zamyka menu bez wykonywania działania i przenosi fokus z powrotem na przycisk menu, dzięki czemu użytkownik wraca dokładnie do miejsca, w którym rozpoczął.
Podmenu wymagają dodatkowej obsługi
Wysuwane podmenu używa aria-haspopup na nadrzędnym elemencie menuitem. Right Arrow je otwiera, a Left Arrow zamyka i umożliwia powrót.
Szybkie sprawdzenie
Dodajesz przycisk otwierający listę poleceń. Co poinformuje technologie asystujące, że pojawi się menu?
Podsumowanie
Menu służą do poleceń, a nie do odnośników do stron: należy je otwierać przyciskiem haspopup, przenosić do nich fokus, poruszać się po nich za pomocą strzałek i roving tabindex oraz pozwolić, by klawisz Escape przywracał fokus. ✅
Często zadawane pytania
Czy lekcja „Menu, menubar i przycisk menu” jest bezpłatna?
Tak — pełny tekst „Menu, menubar i przycisk menu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Menu, menubar i przycisk menu”?
Zaimplementuj menu aplikacji z właściwymi rolami i klawiszami. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Menu, menubar i przycisk menu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czytanie APG: wzorce, klawisze i przykłady
- Combobox i autouzupełnianie bez błędów
- Menu, menubar i przycisk menu
- Treegrid i inne zaawansowane wzorce