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


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jeff Gutsell
Sent: Friday, January 06, 2017 12:46 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Using <LI> elements as clickable, focusable objects in menus

Accessibility guidelines strongly encourage authors to use <a> and <button> tags for clickable, focusable objects. Based on that encouragement, I have experimented with popup menus where the <li> is not clickable but contains standard <button> elements that are siblings of the popup menus. The button have JavaScript event listeners that that trigger functions to control the appearance of the parent <li> and the sibling menu. The JavaScript is easy enough, and of course there is no issue about making the button elements focusable or clickable. The ARIA implementation has been a problem, apparently because the button is not the parent of the menu. So I assume that this is why I cannot find examples like mine. Making assumptions is always dangerous, so I would like to hear an explanation of why accessible menus so often use the <LI> element as the clickable, focusable objects. So far, it seems to me that this practice is inconsistent with the general guidance to use <a> and <button> tags.