ARIA Menu Button Example: Opens Dialog Box
Authoring Practice Design Patten for Menu Button
Menu Button Example
W3C Links
Accessibility Features
Keyboard Support
Menu Button
| Key | Function |
|---|---|
| Space or Enter Key | Open dialog box move focus to dialog box |
| Up Arrow Key | Open dialog box move focus to dialog box |
| Down Arrow Key | Open dialog box move focus to dialog box |
Dialog
| Key | Function |
|---|---|
| Escape Key | Close dialog and move focus back to menu button |
ARIA Roles, Properties and States
| Role | Property/State | Usage |
|---|---|---|
menu |
Identifies the ul element as a menu widget |
|
menuitem |
Identifies the li element as a menu item widget |
|
aria-haspopup |
Identifies the button element as a menu button widget when the value is true |
|
aria-controls |
Identfies the content on the page (e.g. using IDREFs) that this menu button controls | |
aria-labelledby |
Use to provide a label the menu widget |