Not really accessible

  • The mega menu works with a keyboard, but not with a screen reader. I tested using Windows 11 with NVDA and Narrator. Thank you for your a11y efforts so far, but the plugin needs one more push to get over the finish line ?? Until then, you should not advertise it as “accessible”. Please test it with a screen reader.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    Does it help if you add this code to your themes functions.php file?

    https://gist.github.com/megamenu/0c1cfe06f0305dbed090a35ec3422e6f

    Regards,
    Tom

    Thread Starter MattWilsonMD

    (@mattwilsonmd)

    Sorry, I don’t have the plugin installed. I was testing it from your demo page.
    Which screen readers have you tested with? Can you confirm that the mega menu works with screen readers?

    Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    I’m using Narrator (native screen reader) on mac and it seems to work as I’d expect (but I’m not a regular user of screen readers). What is the actual issue you see when using a screen reader? When you say you are using Narrator, do you mean on a mac, or is there a windows screen reader with the same name?

    Regards,
    Tom

    Thread Starter MattWilsonMD

    (@mattwilsonmd)

    Thanks for your attention to this. It would be great to have a truly accessible mega menu solution I could recommend to my WP clients, and I think yours is very close!

    VoiceOver is probably what you’re using on Mac. On Windows, there is the built in Narrator utility, but most people use NVDA (it recently surpassed JAWS).

    Here’s the issue I’m seeing… While using NVDA or Narrator, when I tab thru the navigation items and want to expand one of them, I hit “Enter or Space” and nothing happens. I would expect Enter/Space to expand the sub menu. If I’m not using a screen reader, it all works fine.

    The problem is that Narrator and NVDA are in “browse mode” which intercepts/swallows some keystrokes. If I exit NVDA browse mode and switch into “forms mode” then it works, but we can’t expect users to do that. One possible solution might be to modify your JavaScript to use “click” instead of “keypress” as suggested in this thread: https://stackoverflow.com/questions/65181014/js-function-with-e-key-enter-wont-fire-when-in-screenreader-nvda-brows

    You may also find this pattern and example provided by the W3C to be useful: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/

    Here’s a screencast of me using screen readers with the Max Mega Menu: https://www.loom.com/share/3c368831630347e69817dc6c866a4bf6?sid=dc819f1c-8062-4b81-a61e-769c7d8935e6

    I hope all that help. If you’d like me to retest, please let me know.

    Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    Thanks, got it. I’m fairly sure I’ve investigated this before and using the code I provided in my first reply will correct that issue. Ideally I need more people to test it before I add it into the plugin itself because I don’t know/can’t predict the full impact of adding the role attribute to all menu items when we have so many people using the plugin in different ways. You can rest assured it is being looked at though.

    Regards,
    Tom

    Thread Starter MattWilsonMD

    (@mattwilsonmd)

    I tried installing the plugin and adding the function you provided to the functions.php file but it did not fix the issue. Thx

    Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    Ok, I will investigate further for the next update.

    Regards,
    Tom

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Not really accessible’ is closed to new replies.