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!
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
Related
I'm having some issues with keeping the accordion open whilst clicking links within that accordion dropdown. It's a careers page and when I open the individual jobs, I want users to be able to open the application in a new tab. Any ideas?
https://www.trinovainc.com/careers.html
<div class="accordion">
<div class="accordion-panel careers" data-id="panel-1">
<div class="accordion">
<h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
</div>
<div class="accordion-panel-content panel-1">
<p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
<h4>Summary</h4>
<ul>
<ul>
<li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
</ul>
</ul>
<h4>PRIME RESPONSIBILITIES</h4>
<ul>
<ul>
<ul>
<li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical & PID drawings for various types of field instrument panels.</li>
<li>Review specifications and provide model codes for products.</li>
<li>Perform CAD drawings of best practice installation and wiring</li>
<li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
<li>Understand commercial issues and terms.</li>
<li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
<li>Improve product and technical knowledge.</li>
<li>Troubleshooting of basic device issues.</li>
</ul>
</ul>
</ul>
<h4>MINIMUM EDUCATION</h4>
<ul>
<ul>
<ul>
<li>Bachelor’s Degree in Engineering.</li>
<li>Minor in Sales Engineering is a plus</li>
</ul>
</ul>
</ul>
<h4>TRAVEL</h4>
<ul>
<ul>
<ul>
<li>Occasional travel required.</li>
</ul>
</ul>
</ul>
<h4>PREVIOUS JOB EXPERIENCE</h4>
<h4>Desired:</h4>
<ul>
<ul>
<ul>
<li>Previous related experience of at least 2 years</li>
</ul>
</ul>
</ul>
<h4>Required:</h4>
<ul>
<ul>
<li>None</li>
<ul></ul>
</ul>
</ul>
<a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
</div>
</div>
</div>
Use event.stopPropagation():
In Javascript you have event bubbling, which means that whenever an event is fired for an element. That event bubbles up to all the parent elements. This means if you have an onlick for the accordion to close it and you click a button (or anything else) inside of it, it will close. You can prevent this by using event.stopPropagation(). This will stop the event from propagating up the DOM structure.
Example:
function prop(e){
console.log(e.currentTarget);
}
function notProp(e){
console.log(e.currentTarget);
e.stopPropagation();
}
<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>
<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>
I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();
The very top level of my navigation is a horizontal bar of buttons. When the user hovers over the top level, a second level dropdown toggles on. Is there any way to program my navigation so that when the user clicks on a particular second-level item, it will close the second-level container and automatically open a different second-level dropdown elsewhere on the navigation, as if on hover??
In other words, say my top level navigation bar is six horizontal buttons. When the user hovers over button four, they will see a dropdown of various selections. When they click on a particular selection inside that dropdown, it will automatically close the button four dropdown container and open the dropdown container under top-level button five, as if the user was hovering on it?
(I have searched, but turned up nothing I identified as similar to my issue.)
EDIT: adding code per request.
Button four dropdown html:
<li class="top-level">Division4
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
<li class="second-level">Division 5 Products
</li>
</ul>
</div>
</div>
</li>
Button five dropdown html:
<li class="top-level">Division5
<div class="drop_1col-topA" title="Menu by category">
<div class="col_A">
<ul>
<li class="second-level">Product1
</li>
<li class="second-level">Product2
</li>
<li class="second-level">Product3
</li>
</ul>
</div>
</div>
</li>
I would like it if the user clicks on "Division 5 Products" under button four dropdown and it automatically opens the button five drowdown, as if the user was hovering on it.
I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.).
A list of values (corresponding to "measures") will be stored in a json object.
For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input> id attributes ?
<!-- graph type -->
<li class="dropdown-submenu"> Graph type
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="line" name="graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="dot" name="graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
Since an id must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. Based on you fiddle, I think you can generate your menu like this:
<ul id="menu">
<li class="dropdown-submenu" ng-repeat="facet in facets"> {{facet.name}}
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
</li>
</ul>
I try to generate the id and name based on facet.name, you may want to change it to suit you needs.
i am working on a recipe site (which is almost finished except this problem) on a single recipe page, i have recipe serving input field and recipe ingredients.
My question is that using jquery i want to change recipe ingredients dynamically if the serving changes
i have seen a similar closed threat, but it did not help me
my exact code will look like this
Serving: <input type="text" name="serving" class="serving" value="5"/> persons
<h3>ingredients</h3>
<ul class="ingredients">
<li class="ingredient">
<span class="amount">1</span> cups
<span class="name">yogurt</span>
</li>
<li class="ingredient">
<span class="amount">2</span> tbsp
<span class="name">chillies</span>
</li>
<li class="ingredient">
<span class="amount">3</span> pieces
<span class="name">butter</span>
</li>
</ul>
i would highly appreciate any help on this to get me finish my pending site
Regards
Try this: http://jsfiddle.net/vansimke/tLWpr/