I am looking for someone who understands Aria commands for Navigation.

I have a navigation header bar with drop downs and I have a side nav. www.beanbag.com

I have a terrible mess with multiple CSS files overlapping etc... so I am trying to re-write my pages based on a sample page I have see www.beanbag.com/zz.asp

We are being sued for not being ADA compliant and we only have a short time to have everything fixed... to pass compliancy.

I thought this master www.beanbag.com/zz.asp would be a perfect master as it seems to have the aria role comamand etc... but I just discovered when I tab around, it does not seem to open the drop downs in the header. What is wrong with the code.

I am looking for anyone who might be able to help me get this page fixed to pass ADA, WCAG 2.1 ASAP... then I can rebuild my beanbag.com usng this master with correct navigation.

If anyone is an expert or could help with this one page for free or even some $ to help me get going on a good fix.

Scott

Hi Scott, sorry to hear your going through this. I'm not a expert with ADA, but believe in validation so I checked the W3 and came across this https://www.w3.org/WAI/tutorials/menus/flyout/ with sample code to build out the menu. This little nugget of info was interesting.

quote:

---

Submenus should not open when using the tab key to navigate through the menu, as keyboard users would then have to step through all submenu items to get to the next top-level item. Instead, consider one of the following approaches. > Use parent as toggle

---

Looking at their example, where you have a dropdown set the class on the li to has-submenu, you will need to place the JavaScript snippet in the head section of the page.

<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>




Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

This seems to have fixed the problem.

Did you add this to future ASP updated? It was good fix

Scott

Sorry, wrote this in the wrong place... It was another fix. I will post it to the correct place


Scott