E-mail List Archives
Thread: Using <LI> elements as clickable, focusable objects in menus
Number of posts in this thread: 5 (In chronological order)
From: Jeff Gutsell
Date: Fri, Jan 06 2017 1:46PM
Subject: Using <LI> elements as clickable, focusable objects in menus
No previous message | Next message →
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.
From: Swift, Daniel P.
Date: Fri, Jan 06 2017 1:58PM
Subject: Re: Using <LI> elements as clickable, focusable objects in menus
← Previous message | Next message →
Jeff:
Do you have an example? You have me wondering if I've been doing the wrong thing -- I've never used the list item itself as clickable but instead placed the 'a' tag as a child of the list items. When sub-menus are needed, I've used nested lists (code to demonstrate nesting only):
<ul>
<li><a href="something">parent</a>
<ul>
<li><a href="something">child</a></li>
<li><a href="something">child</a></li>
</ul>
</li>
<li><a href="something">parent</a>
<ul>
<li><a href="something">child</a></li>
<li><a href="something">child</a></li>
</ul>
</li>
</ul>
Thanks!
Dan
From: JP Jamous
Date: Fri, Jan 06 2017 2:49PM
Subject: Re: Using <LI> elements as clickable, focusable objects in menus
← Previous message | Next message →
Dan,
Yours is correct. I think Jeff is referring to the LI being the selectable item and not the A.
I have witnessed this before. That's what I hate about HTML. If it can be done, it doesn't mean it is the proper way.
Some devs do some weird things sometimes that get me wondering "Why?"
From: JP Jamous
Date: Fri, Jan 06 2017 2:50PM
Subject: Re: Using <LI> elements as clickable, focusable objects in menus
← Previous message | Next message →
Dan,
Yours is correct. I think Jeff is referring to the LI being the selectable item and not the A.
I have witnessed this before. That's what I hate about HTML. If it can be done, it doesn't mean it is the proper way.
Some devs do some weird things sometimes that get me wondering "Why?"
From: Bryan Garaventa
Date: Fri, Jan 06 2017 3:11PM
Subject: Re: Using <LI> elements as clickable, focusable objects in menus
← Previous message | No next message
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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com