Accessible Mootools Widget Demo

Mootools Drop Menu

This is a simple yet powerful drop menu class. You can create an unlimited nested menu, build by the HTML tags ul and li .




How to use the Drop Menu widget

If a menu bar item has focus and the menu is not open, then:

  • Enter / Space / Up Arrow / Down Arrow: Opens the menu and places focus on the first menu item in the opened menu
  • Left Arrow / Right Arrow: Moves focus to the adjacent menu bar item

When a menu is open and focus is on a menu item in that open menu, then:

  • Enter / Space: Invokes that menu action (which may be to open a submenu)
  • Up Arrow / Down Arrow: Cycles focus through the items in that menu.
  • Left Arrow / Esc: Closes the open menu or submenu and returns focus to the parent menu item
  • Right Arrow / Enter / Space: Opens the submenu and puts focus on the first submenu item

Accessibility Changes Made

  • original DropMenu
  • Download accessible DropMenu
  • Added WAI ARIA roles "menubar", "menu", "menuitem", "presentation" and WAI ARIA property "aria-haspopup" and "aria-activedescendant"
  • Added keyboard navigation support
  • Added high visual contrast indicator.