Accessibility for Screen Readers

  • You have a good start with accessibility. You have the keyboard correct pattern, but one key missing feature is that you need to tell the screen reader when a sub menu is expanded. It works when using a mouse, but not when using keyboard-only. Add “aria-expanded=’true’ ” on the anchor tag when it’s expanded via keyboard, otherwise screen reader users won’t know it’s expanded. Check the Twenty Twenty-Three demo for the correct usage. Thanks!

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

    (@megamenu)

    Hi Matt,

    It is changing from false to true when I use keyboard navigation here:

    Please can you double check?

    Regards,
    Tom

    Thread Starter MattWilsonMD

    (@mattwilsonmd)

    Thanks for the follow up! I see you’re using the inspector for testing, but you need to use a screen reader, otherwise you’re just guessing what the experience will be. Also, I slightly misspoke on my original message… The “aria-expanded” attribute needs to be on the <span> with class “mega-indicator”, not on the parent anchor tag. The reason why is because when you expand the sub-menu, the keyboard focus is on the <span> element and not on the anchor tag element. The screen reader will not read aria labels of an element that is not in focus.

    Here’s a screen recording with the audio from the screen reader: https://www.loom.com/share/8ea76ef7f6b049838b17c7833fc40399

    Thanks for your attention to this and for caring about accessibility ??

    Plugin Author megamenu

    (@megamenu)

    Hi Matt,

    Got it, thank you. I will get that fixed in the next update ??

    Regards,
    Tom

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Accessibility for Screen Readers’ is closed to new replies.