Details
-
Improvement
-
Resolution: Unresolved
-
Major
-
2.3.0
-
Technology Used: NVDA (ver. 2016.1), Firefox (ver. 48.0.2) on Windows 10 PC
Description
Problem:
Pull down menus throughout site do not indicate their function as a pull-down menu or announce changed state once selected.
For example, in the "More Actions" pull-down menu (shown above), there is no cue that this is a pull-down menu or an announcement that the menu has been opened.
Solutions:
Add ARIA to indicate menu role and state of expand or collapse.
For example, in the “more actions” pull down menu, we would start by adding aria- haspopup="true" and aria-expanded=”false” and role = “menu” to the anchor object for the “More actions” link.
<a class="btn btn-medium btn-block dropdown-toggle" href="#" data-toggle="dropdown" aria- >
More actions
<span class="caret"></span> </a>
Adding a JavaScript action (another onclick handler) to change aria-expanded=”true” once the “More action” link is selected would provide feedback to the screenreader that the menu is in expanded mode.