I have a menu that's written like:
<ul>
<li><a href="#">Item 1</a></li>
<li aria-haspopup="true">
<a href="#">Item 2</a>
<ul aria-label="submenu">
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li><a href="#">Item 2-3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
I tested my site with the accessibility audit checker on accessibe.com and I was pulled that my submenu did not have aria-haspopup="true" on it.
My question is, should that attribute be on the <li> or <a>?
My thought is that it is the <li> that activates the hover menu on hover and on focus with both mouse and keyboard. Not the <a>. If this is correct then why is the getting flagged for not having it?
I am not an expert on accessibility, but I did some reading and I hope this can help.
Fly-out Menus - WAI Web Accessibility Tutorials has basically the same submenu structure as your code and puts the aria-haspopup attribute on the <a> element:
<nav aria-label="Main Navigation">
<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Shop</a></li>
<li class="has-submenu">
<a href="…" aria-haspopup="true" aria-expanded="false">
Space Bears
</a>
<ul>
<li><a href="…">Space Bear 6</a></li>
<li><a href="…">Space Bear 6 Plus</a></li>
</ul>
</li>
<li><a href="…">Mars Cars</a></li>
<li><a href="…">Contact</a></li>
</ul>
</nav>
Why did not your code pass the audit checker? I cannot know for sure as I do not have access to it, but my guess would be that it is because the <li> element is not by default keyboard accessible.
For the popup element to be keyboard accessible, authors SHOULD ensure that the element that can trigger the popup is focusable, that there is a keyboard mechanism for opening the popup, and that the popup element manages focus of all its descendants as described in Managing Focus.
I hope some expert chimes in and lets us know for sure.