ACCESSIBILITY - MOBILE MENU "BUG"
Hi,
You have been an excellent help with adding translatable aria-labels to BETHEME to improve accessibility of BETHEME for other languages (https://forum.muffingroup.com/betheme/discussion/comment/219677).
We have now come across an accessibility issue that seems to be a bug (probably in jQuery – handling events – not sure).
For a keyboard user all seems to work just fine. You can use TAB to navigate to a mobile menu icon, open it with a space key and then you are located in the mobile menu, so clicking TAB will lead you through the menu items. This is just fine.
However, when using voice-over, you reach the mobile menu icon and if you follow voice-over reader instructions and click CTRL-ALT-SPACE that should take you to the mobile menu, you stay in the main content of the page, unable to get to the mobile menu.
If using a desktop, you could still get into the mobile menu via TAB as an alternative, but when you are on a smart phone of tablet and depending only on voice-over swipes (left/right), you will have to circle around the whole website content before you reach the mobile menu, which is a problem. It was flagged by an Accessibility audit as a red flag (unacceptable).
I am not sure why it is this way. Could it be a simple thing that after opening the mobile menu, the div #Side_slide keeps a status of aria-expanded="false" instead of aria-expanded="true"???
If not, maybe it needs an extra tabindex after opening? This is too complex for me.
This is the last major stumbling block in terms of the Accessibility audit for my project built on BETHEME. It would be a great help if you manage to discover the reason for this behaviour.
Regards,
David
Comments
Hello,
We do not have the CTRL-ALT-SPACE accessibility provided in theme, we have only combinations of TAB and SHIFT, sometimes its ENTER too, but in plans we plan to abandon ENTER functionality.
As I assume, you just need to have the CTRL ALT SPACE combination to comeback to the menu, right? Is it all or the Side Slide needs a customizations too?
The Accessibility was made following the wordpress documentation, BeTheme pass their regulations.
We are open to add new functionalities for accessbility.
Thanks
Hi Pablo,
Let's forget CTRL-ALT-SPACE for now (in other words, let's ignore voice-over on desktop).
There is a problem with touch devices (smart phones, tablets), where you cannot access mobile menu with left/right swipes. It will take you through the whole content of the page before reaching mobile menu, i.e. wrong.
I am not sure how this is done (focus/event/tabindexes), I really don't know. I was hoping someone on your side could test voice-over on touch devices and discover the bug, or correct the behaviour of the voice over.
Regards,
David
Do you have any docs dedicated to the WCAG of this behavior? Just to be sure that adjustment made by us will behave correctly. Sorry, I'm not sure how that chapter can be labeled.
Thanks
Hi Pablo,
I am in discussion with the WCAG auditors to clarify the "focus/tabindex" whatever the issue is with voiceover.
Nevertheless, there is an issue with the aria-expanded state in the #Side_slide div, after you click on the "hamburger" icon and open mobile menu. The #Side_slide div aria-expanded state should change to "true" (i.e. open) when it is open, but it remains "false" (i.e. closed for voiceover).
I was trying to locate the function in the accessibility.js file, however my javascript knowledge is limited, so I know it is happening somewhere after row 82.
Is this something that your team could fix?
Regards,
David
And the same applies to sub-menu elements in the mobile menu. After the sub-menu is open, the javascript changes the DIV style to "display: block;", however, the aria-expanded status remains "false" instead of changing to "true".
This is indeed confusing the VoiceOver readers. Please see the pic below:
I can imagine that this is not an easy programming in terms of JavaScript, but could you please have someone from the dev team to look at it?
Thank you.
Hello David,
Soon we'll release a update for Accessibility which will allow to use the new Header Builder 2.0
Also it includes some fixes to the modals (like Side Slide) so it should work, but I'll test it to be sure that it works with voiceover.
But yes, the problem with submenu is there, I'll fix it and we'll include in update of HB 2.0.
Can you tell me, your gesture is assigned to which action? I'll set it up as in your case.
thanks
I will await a message from the auditors regarding the voice-over gesture(s)with mobile menu, so that I am not giving some improper instructions/requests.
Thanks so much looking into this.