accessible menu

A sandbox static page that demonstrates WCAG accessible mega menu using Tailwind CSS v.3 and extending from Disclosure Menus.

Keyboard Support

Tab Shift + Tab

Use the tab and shift-tab keys to access top-level menu links or to focus on the previous links.

Space or Enter

Use the "Space" or "Enter" keys to activate the visibility of the menu dropdown.

Escape

Use this key to close the current dropdown menu and return focus to the element that spawned it.

Up or Down arrow

Use the "Up" key to move focus to the previous item in the menu links. If the focus is on the first item, move focus to the last item. Use the "Down" key to move focus to the next item in the menu links. If the focus is on the last item, move focus to the first item.

Right or Left arrow

Use the "Right" key to move focus to the next item in the menu links. If the focus is on the last item, move focus to the first item. Use the "Left" key to move focus to the previous item in the menu links. If the focus is on the first item, move focus to the last item.

Home or End

Use the "Home" to move focus to the first item in the current menu level. Use "End" to move focus to the last item in the current menu level.