Hey !

I'm using this module on a big project in my company, and our customer has really high expectation when it comes to accessibility. The problem is the menu provided by this module is not accessible at all, for several reasons :

  1. Biggest problem : impossible to navigate with the keyboard in the menu
  2. The button to open responsive menu should be on top of the page instead of the bottom so when you navigate with the keyboard you find it easily. The button should also contains special markup to help people with screen readers.
  3. Lots of aria elements are missing, especially in the responsive version

For the 1. and 3., I've managed to integrate Adobe Accessible MegaMenu that does pretty much everything we need. I can provide a patch in order to help integrate the library in the menu, but I don't know how to manage the library itself (in my project we are downloading it with NPM, but this is not possible for this module), and I hope someone can help me with that.

For 2., I can provide a patch, but I have an accessibility expert who have to verify my website so I'm waiting his review in order to be sure I'm doing it the right way.

I'd like to contribute to this project, but I'm new in the Drupal community, so don't hesitate to tell me if there is something I'm doing wrong.

Cheers!

Members fund testing for the Drupal project. Drupal Association Learn more

Comments

sylvainar created an issue. See original summary.

gausarts’s picture

Status: Active » Postponed (maintainer needs more info)

Good idea. Thanks.

Patches are very much welcome ;)

We can either use the mentioned plugin, or add the markups directly into Twig template:
https://www.w3.org/TR/wai-aria-practices/#menu

Or combine both as needed.

I don't know how to manage the library itself (in my project we are downloading it with NPM, but this is not possible for this module), and I hope someone can help me with that.

If trouble with anything, we can adjust it along the way.

Does core menu blocks also suffer from accessibility?
If not, we can learn something from core menu blocks to bring them into Ultimenu?

gausarts’s picture

Priority: Major » Normal
mgifford’s picture

Status: Postponed (maintainer needs more info) » Active

I don't think that Core has an accessibility problem with the menu blocks.. Certainly don't know of an issue that has been reported.

I think it should be fine to reuse what is in Core. If there are problems, we're going to want to fix it in Core anyways.

gausarts’s picture

Thank you.

I'll see if I can reuse anything from core to solve this issue.
As you are the accessibility maintainer, I believe I have a definitive reply from my question above. Thank you.

I wish I could fix it, but I am certainly not an accessibility expert.

ATM, as the OP has an expert and already offers some help on this regard, I'll first see how it goes.
I'll adapt their recommendations to correct this module as well.

mgifford’s picture

Cool. Happy to hear this.

sylvainar’s picture

Finally, the lib isn't the best solution (according to the expert), because to allow the user to navigate with arrows, and to be sure that the user is actually aware of this possibility, the complete design pattern has to be implemented, and it also need some « visible » modification for seeing-people ( I mean not blind, don't know how to say it in english).

Anyway, the tab-tab-tab-tab-tab navigation is still the most efficient and the one that should be integrated in this module.

gausarts’s picture

You can also provide the final HTML markups which your expert said "accessible".

Perhaps saving your page to disk?
Then we can capture the final structure of the Ultimenu output section.

JS-generated markups are usually captured by saving.

Then we can patch the module based on those recommendations.

Thanks.

sylvainar’s picture

Sure, but it's currently a WIP now, and there are a lot of accessibility tickets I have to correct before I can go back on the menu…

I'll keep you informed.

gausarts’s picture

Enjoy your working! And thanks for the update ;)

cfbauer’s picture

I'm also not an accessibility expert but the WAVE accessibility tool is giving this error on a site we're testing:

Errors empty buttonWhat It Means
A button is empty or has no value text.
Why It Matters
When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.
How to Fix It
Place text content within the element or give the element a value attribute.
The Algorithm... in English
A element is present that contains no text content (or alternative text), or an , , or has an empty or missing value attribute.

I believe it's coming from line 104 of ultimenu.module:

$button = '<button data-ultimenu-button="#ultimenu-main" class="button button--ultimenu"><span class="bars"></span></button>';

I think if we add description text in the button element this would solve this issue, which might be ok since it's set to display: none.

cfbauer’s picture

FileSize
893 bytes

Very simple but this fixed the error for me:

sylvainar’s picture

That's a start, indeed. Maybe you should use $this->t() function to make it translatable.

cfbauer’s picture

FileSize
913 bytes

Edit: Whoops, this actually isn't working.