This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using ARIA menus

From WCAG WG
Jump to: navigation, search


Status

ARIA Menu Widget Technique


Success Criteria 2.1.1 Keyboard

Description

A menu widget usually consists of a main menu bar with pop up menus. Items in pop up menus often have sub pop up menus. Menu widgets must provide keyboard support to navigate all the menu items in the menu. Keyboard support for a menu typically include the cursor keys to navigate between the menu items and open and close popupmenus.

Example Keyboard Behavior

Keyboard Actions if focus is on the menubar

  • Left arrow: Next menubar item
  • Right arrow: Previous menubar item
  • Up arrow: Open pull down menu and select first menu item
  • Down arrow: Open pull down menu and select first menu item
  • Enter: Open or close pull down menu. Select first menu item if opening
  • Space: Open or close pull down menu. Select first menu item if opening


Keyboard Actions if focus is on a menu item

  • Left arrow: Open next pull down menu and select first item
  • Right arrow: Open previous pull menu and select first item
  • Up arrow: Select previous menu item
  • Down arrow: Select next menu item
  • Enter: Invoke selected item and dismiss menu
  • Space: Invoke selected item and dismiss menu
  • Esc: Close menu and return focus to menubar

Tabindex

  • For menu items to receive keyboard focus the tabindex attribute must be set of the element if it is not a form control or link element

Resources

Resources are for information purposes only, no endorsement implied.

Related Techniques

  • ARIA Menu Widget Technique for Success Criteria 4.1.2 Name, Role, Value

Test Procedures

Test 1

Procedure
  • Use TAB key to move focus to menu bar
  • Press TAB key to move focus to first focusable item after the menu menu bar
Expected Results
  • Menu bar receives focus and triggers an onfocus event
  • Menu bar looses focus and triggers an onblur event

Test 1

With focus on a menu item in the menu bar, repeat this test for every menu item in the menu.

Procedure
  • Use Up Arrow key to move focus to the previous item in the menu
  • Use Down Arrow key to move focus to the next menu item in the menu
Expected Results
  • Previous menu item receives focus and triggers an onfocus event and current menu item triggers an onblur event
  • Next menu item receives focus and triggers an onfocus event and current menu item triggers an onblur event

Test 3

With focus on a menu item in the menu bar, repeat this test for every menu item in the menu.

Procedure
  • Use the Enter key to activate the function of the menu item
  • Use the Space key to activate the function of the menu item
Expected Results
  • Verify the function associated with the menu item was activated

Success Criteria 4.1.2 Name, Role, Value

Description

A HTML based menu widget usually consists of a main menu bar with pull down menus. To describe the HMTL menu to assistive technology Accessible Rich Internet Application (ARIA) markup can be added to the HTML elements used to create the menu. ARIA adds attributes to the HTML elements to communicate their roles, properties and states. The following is an example of the ARIA markup that can be added to a menu.

Example Code

<ul id="mb1" class="menubar root-level" role="menubar" title="Styling Menu" aria-controls="st1">
  <li id="mb1_menu1" class="menu-parent" role="menuitem" tabindex="0" aria-haspopup="true">
    Font
    <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
      <li id="sans-serif"
        class="menu-item checked"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="true">Sans-serif</li>
      <li id="serif"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Serif</li>
      <li id="monospace"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Monospace</li>
      <li id="fantasy"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Fantasy</li>
    </ul>
  </li>
  <li id="mb1_menu2" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
    Style
    <ul id="styleMenu" class="menu" role="menu" aria-hidden="true">
      <li id="italic"
        class="menu-item"
        role="menuitemcheckbox"
        aria-controls="st1"
        aria-checked="false"
        tabindex="-1">Italics</li>
      <li id="bold"
        class="menu-item"
        role="menuitemcheckbox"
        aria-controls="st1"
        aria-checked="false"
        tabindex="-1">Bold</li>
      <li id="underline"
        class="menu-item"
        role="menuitemcheckbox"
        aria-controls="st1"
        aria-checked="false"
        tabindex="-1">Underlined</li>
    </ul>
  </li>
  <li id="mb1_menu3" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
    Justification
    <ul id="justificationMenu" class="menu" role="menu" title="Justication" aria-hidden="true">
      <li id="left"
        class="menu-item checked"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="true">Left</li>
      <li id="center"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Centered</li>
      <li id="right"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Right</li>
      <li id="justify"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Justify</li>
    </ul>
  </li>
  <li id="mb1_menu4" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
    Size
    <ul id="sizeMenu" class="menu" role="menu" title="Size" aria-hidden="true">
      <li id="larger"
        class="menu-item"
        role="menuitem"
        aria-controls="st1"
        tabindex="-1">Larger</li>
      <li id="smaller"
        class="menu-item"
        role="menuitem"
        aria-controls="st1"
        tabindex="-1">Smaller</li>
      <li id="fs_separator"
        class="menu-item separator"
        role="separator"
        tabindex="-1"></li>
      <li id="x-small"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">X-Small</li>
      <li id="small"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Small</li>
      <li id="medium"
        class="menu-item checked"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="true">Medium</li>
      <li id="large"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">Large</li>
      <li id="x-large"
        class="menu-item"
        role="menuitemradio"
        tabindex="-1"
        aria-controls="st1"
        aria-checked="false">X-Large</li>
    </ul>
  </li>
</ul>

Resources

Resources are for information purposes only, no endorsement implied.

Related Techniques

  • ARIA Menu Widget Technique for Success Criteria 2.1.1 Keyboard

Test Procedures

  • Using an ARIA enabled screen reader (i.e. JAWS, NVDA or VoiceOver) and web browser (i.e. Internet Explorer (Windows), Firefox (Windows) or Safari (OSX) ) move keyboard focus to a menu item
  • When a menu item gets focus it should announce "Menu Item" and then the label for the menu
  • Moving around the menu with cursor keys should announce the "Menu Item" and label for each menu item
  • If a menu item has a pop up menu the screen reader should announce "pop up"