search

adobe-accessibility / Accessible-Mega-Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
Apache License 2.0
605 stars 199 forks source link

Move aria-expanded from panel to top level link #62

Closed maedi closed 3 years ago

maedi commented 4 years ago

aria-expanded should be on the element that expands the dropdown, not the dropdown itself. The attribute is currently on the sub panel div but it needs to be on the a[role="button"] above it.

This recommendation was brought to us by an accessibility consultant and is confirmed in the "Simple dropdown" example on this site: https://www.accessibility-developer-guide.com/examples/widgets/dropdown/

HTML before:

<a role="button"></a>
<div class="sub-nav" aria-expanded="true"></div>

HTML after:

<a role="button" aria-expanded="true"></a>
<div class="panel"></div>
maedi commented 3 years ago

Merged via pull request #66.