Menu Navigation Accessibility Needed - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Menu Navigation Accessibility Needed

U

udi

Helix Framework 4 years ago

Hello, In some countries, organizations must have their website accessible to people with disabilities. This means that a user should be able to navigate the menu using the TAB key on the keyboard. The problem is with the drop-down - it should open and allow the user when using tab to go through the drop-down menu items. I have several websites that I require this very urgently.

Please see the following explanation here: https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn I was trying to implement Approach 1 (Use parent as toggle) but it doesn't work as some aria classes are missing in the menu link.

If you could provide a fix for this, it would not just solve my problem, but also be a valuable advantage to Helix

Thank you

0
4 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #42099

Hi.

But it's still on our List to do. I also wait for it.

0
Pavel
Pavel
Accepted Answer
4 years ago #42087

Hi.

There is no simple fix for this. It would require a complete alteration of Helix menu. And if you are talking about Joomla 3 - there is no one out of the box. Helix menu is based on the Joomla menu.

You can fix it yourself, or hire a specialist.

Steps that need to do this:

Write a JavaScript, which will make the opening of drop-down by clicking, but not on hover. Add "aria" attributes to menu links and togglers via JavaScript (the easiest way does not require destructive editing).

Or override the PHP code of menu layout to add "aria" attributes (more complex method).

1
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 years ago #42096

Hi

Yes, Pavel is right. This issue needs a lot of customization which is beyond our support policy. You have to customize it yourself

Hope you understand

Thank you

0
U
udi
Accepted Answer
4 years ago #42233

Problem 99% solved. Only one problem remain. If you could help with it, it would be great.

If the drop-down parent is a link, the menu item link will not work. only the drop-down links.

how to use: navigate with tab key until you get to a menu item with drop down. hit "enter" to open / close drop-down. you can use Tab key to navigate to drop-down menu items and hit Enter to open that page.

Thank you

This is what I did: add the followin to css

.sp-megamenu-parent .sp-has-child.open > .sp-dropdown{ display: block; }

and added this JS before the end of the body:

var menuItems = document.querySelectorAll('li.sp-has-child'); Array.prototype.forEach.call(menuItems, function(el, i){ el.querySelector('a').addEventListener("click", function(event){ if (this.parentNode.className == "sp-menu-item sp-has-child") { this.parentNode.className = "sp-menu-item sp-has-child open"; this.setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "sp-menu-item sp-has-child"; this.setAttribute('aria-expanded', "false"); } event.preventDefault(); return false; }); });

2