Button popup menu example

Structure

<div>
    <a href="#" role="button" aria-expanded="false" aria-haspopup="true" id="actionbutton">
        Select Action
        <img src="drop.gif" alt="" id="actionbuttonimg">
    </a>
</div>

<ul id="actionmenu" role="menu" aria-labelledby="actionbutton" aria-activedescendant="m1" style="display: none">
    <li role="presentation">
        <a href="#" role="menuitem" tabindex="0" id="m1">
            <img src="apply.gif" alt="">
            Apply
        </a>
    </li>
    <li role="presentation">
        <a href="#" role="menuitem" tabindex="-1" id="m2">
            <img src="email.gif" alt="">
            Email Job to Friend
        </a>
    </li>
</ul>

Keyboard usage

The following keystrokes are used in this button popup menu example.

Button popup menu keystrokes
Element	Keystroke	Action
Button	`ENTER` or `SPACE`	Toggles the popup menu between open and closed.
Menu item	`ESC`	Closes the menu and places focus on the button.
Menu item	`TAB` and `SHIFT + TAB`	Closes the menu, and moves focus to the next and previous interface elements respectively.
Menu item	`DOWN CURSOR` or `UP CURSOR`	Moves focus to the next or previous item in the menu, respectively. The behavior is cyclic around the menu items.

Back to WAI-ARIA examples.