How to make Navigation Menu Accessible

WAI-ARIA

  • Roles: define what an element is or does.
    1. role=”menubar” Identifies the element as a container for a set of menuitem elements.
    2. role=”menu” Identifies the element as a menu container for a set of menu items.
    3. role=”menuitem” Identifies the element as a menu item.
    4. role=”menu” Identifies the element as a menu container for a set of menu items.
  • Properties: it’s used to give them extra meaning or semantics.
    1. aria-label: to describe label for non-text content (close icon).
    2. aria-controls: the relationship between tabs and tab panels.
    3. aria-expanded: Indicates the submenu is open or not.
    4. aria-labelledby: provides the user with a recognizable name of the tab.
  • States: define the current conditions of elements.
    1. aria-hidden: to indicates that the element and all of its descendants are not visible or perceivable.
    2. aria-haspopup: Indicates the menuitem has a submenu.

Extra Info

  • To access all menu items by tab.
  • Highlight and underline when item is on focus.
  • Close submenu by leave focus or press escape key.
 View Demo Download