WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jeff Gutsell
Date: Jan 6, 2017 1:46PM

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.