CODEWITHSUNDEEP
javascripthtmlaccessibilitywcag
DieterJoubert
DieterJoubert

Reputation: 1

Accessible dropdown menu: <li> has multiple children

I'm working on making a dropdown menu accessible. I'm largely following this W3 example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#

However, my menu has an unusual structure. Some of my list item's contain more than one button, which are horizontally aligned within the list item.

<ul role="menu">
	<li role="none">Header</li>
	<li role="none">
		<button role="menuitem">Option A</button>
		<button role="menuitem">Option B</button>
		<button role="menuitem">Option C</button></li>
	<li role="none">
		<button role="menuitem">Button Foo</button>
	</li>
</ul>

Is there a recommended way to make this WCAG accessible? I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.

Furthermore, currently my screenreader (NVDA) will inform the user that there are 4 items within the list (due to there being 4 elements with the role="menuitem" tag). Ideally I'd like the screenreader to let the user know that there are only 2 items in the list, and then when he is on a button with siblings (e.g. "Option A" in my example), I'd like the screenreader to announce that, besides being in the first item in the menu, it is option 1 out of 3 in the list item.

Any advice is appreciated!

Upvotes: 0

Views: 826

Answers (1)

Adam
Adam

Reputation: 18855

IMPORTANT NOTE: The menu role and pattern is designed to be used in applications. If you want to do a menu for a simple website, you should use the navigation role

Answering now, your question...

You are describing what menuitemradio role is intended for: (note: this could also be menutitemcheckbox if different options are not exclusive)

<ul role="menu">
    <li role="none" id="group_header">Header</li>
    <li role="group" aria-describedby="group_header">
        <button role="menuitemradio">Option A</button>
        <button role="menuitemradio">Option B</button>
        <button role="menuitemradio">Option C</button></li>
    <li role="none">
        <button role="menuitem">Button Foo</button>
    </li>
</ul>

I'd like the user to use the LEFT/RIGHT keys to move between the buttons inside a list item.

You can see the requisits for keyboard interactions for menu role items on the WAI ARIA Authoring practices, which include more than just the left and right keys. So you will have to rely on important javascript development for your application.

Note: Remember, that if you are designing a website (so your menu won't be in an application role), you should use the navigation role. This would be easier and you could use any standard HTML elements like input[type='radio'] which will natively handle the left and right key:

<ul role="navigation" aria-label="Menu">
   <li><div id="group_header">Header</div>
     <div role="group" aria-describedby="group_header">
        <label><input type="radio" name="item" /> Option A</label>
        <label><input type="radio" name="item" /> Option B</label>
        <label><input type="radio" name="item" /> Option C</label>
     </div>
   </li>
   <li><button>Button Foo</button></li>
</ul>

A discussion on the "menu not for website" theme

Upvotes: 1

Related Questions