menu |
|
ul |
- The
role="menu" identifies the ul element as a container for set of menuitem widgets associated with the menu.
- No
tabindex value is needed since the ul[role="menu"] does not receive keyboard focus.
- Accessible name for the menu is defined by the
aria-label attribute and in the case of a popup menu in a menubar the acessible name is same as the associated menubar item.
|
|
aria-label="string" |
ul |
- Defines an acessible name for the
menu.
- Used to help people understand the purpose of the menu and uniquely identify the menu from other menus in the menubar.
|
menuitem |
|
span |
- The
role="menuitem" identifies the li element as a ARIA menuitem widget.
- A
tabindex=-1 value is needed to make the li[role="menuitem"] keyboard focusable.
- Accessible name for the menu is defined by the
aria-label attribute and in the case of a popup menu in a menubar the acessible name is same as the associated menubar item.
|
|
tabindex="-1" |
li |
- Makes
li[role="menuitem"], li[role="menuitemcheckbox"] and li[role="menuitemradio"] elements keyboard focusable, but not part of tab order of the page.
- The
li[role="menuitem"], li[role="menuitemcheckbox"] and li[role="menuitemradio"] elements in a popup menu do not ever get any other value for tabindex.
|
menuitemcheckbox |
|
li |
- The
role="menuitemcheckbox" identifies the li element as a ARIA menuitemcheckbox widget.
- The
aria-checked attribute is used to indicate if the menuitem checkbox is checked or not.
- The accessible name comes from the child text content of the
li element.
|
|
aria-checked="true" |
li |
- Indicates if a
menuitemcheckbox or menuitemradio is checked.
- The visual state of the selection is synchronized with the
aria-checked value using CSS attribute selectors (e.g. [aria-checked="true"]) and the CSS psuedo selector :before and content property.
|
|
aria-checked="false" |
li |
- Indicates if a
menuitemcheckbox or menuitemradio is not checked.
- The visual state of the selection is synchronized with the
aria-checked value using CSS attribute selectors (e.g. [aria-checked="false"]) and the CSS psuedo selector :before and content property.
|
group |
|
ul |
- The
role="group" identifies the ul element as a container for set of menuitemradio widgets.
- The
group role is important to allow the browser to compute the values of aria-setsize and aria-posinset.
- No
tabindex value is needed since the ul[role="group"] does not receive keyboard focus.
- Accessible name is not required for
ul[role="group"].
|
menuitemradio |
|
li |
- The
role="group" identifies the li element as a menuitemradio widgets.
- Only one
menuitemradio item in the same radio button group can be checked at a time.
- In this example the group is defined by either the
ul[role="menu"] or [role="group"].
- The accessible name comes from the child text content of the
li element.
|