WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using <LI> elements as clickable, focusable objects in menus

for

From: Bryan Garaventa
Date: Jan 6, 2017 3:11PM

Hi,
It is valid to use ARIA to support native active elements like links and buttons within menus, however the ARIA markup must be consistent and programmed according to spec.

In this case, the role="menuitem" attribute must not be on the LI, but on the button, including all supporting attributes such as aria-haspopup="true" if this menuitem opens a submenu, and focus must move appropriately between each menuitem when the arrow keys are pressed in accordance with the vertical or horizontal layout of the menu.

The requisite role mappings for this are viewable at
http://whatsock.com/training/matrices/#menu

For live implementations and education, you can use Visual ARIA to easily catch when focus movement does not match the placement of ARIA attributes in accordance with the spec, available at
http://whatsock.com/training/matrices/visual-aria.htm

To see an ARIA Menu example where ARIA attributes are correctly included on the native active elements within a list, the following shows this:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20(Internal%20Content)/demo.htm

Visual ARIA can be used here too in order to visually expose which roles are placed and where.

You can download this coding archive which includes many other accessible widgets at
https://github.com/accdc/tsg

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com