OnPoint Plugins

← Back to support

Advanced Sidebar – Navigation block accessibility issues

Resolved

Requested: 2 years and 3 months ago

Hello,

I’ve observed a couple of accessibility issues with the Advanced Sidebar – Navigation block, when using the Enable Accordion menu feature –

  • The accordion toggle is missing the aria-expanded attribute. This should be set to “false” when the accordion is closed, and “true” when the accordion is open. Ideally, the attribute’s value would be set when the page loads, so if the accordion is set to be closed on page load, the aria-expanded value would already be set to “false”. (https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/)
  • The accordion toggle’s title is lacking. When I hit the toggle, my screen reader will read “menu section open” or “menu section close” depending on the current state of the menu. It would be helpful for the user for the accordion toggle to contain the title or text of the link it is attached to. This would indicate to the user what sort of content to expect out of the accordion.
    • This behavior was improved by using the ‘Use links for open/close’ feature, but when I enabled this, the original accordion toggle was still present + linked. This ends up being redundant.

If these issues could be patched, we would greatly appreciate it. The website these issues are present on is not yet live, so I’d be happy to meet up in a screen share session to demonstrate them. Please let me know if I can provide any additional information.

Many thanks,
Zach

  1. Hi Zach,

    Turns out this was a regression issue from version 9.3.0. At that time we moved away from Dashicons to SVG to improve performance and the aria-expanded attributes inadvertently removed.

    I’ve added the aria-expanded attributes as well as the role="button" back into the icons which will be included in the next release. I’ve also updated our unit tests to make sure we catch this in the future.

    As far as improving the aria-label to include the the item’s title, this is going to take some planning to implement. I’ve logged a ticket in our internal system but at the moment I don’t have a timeline to provide.

    Have a great night!

     

     

  3. Hello, I wanted to follow up on this ticket that my colleague (Zach) submitted a couple of years ago. The first issue Zach mentioned was fixed in an earlier update (the missing aria-expanded attribute on accordion toggles), and the ticket was closed.

    However, the other issue that Zach mentioned is still present — the generic aria labels on the toggles, i.e., “Open menu section” and “Close menu section”, which are not specific enough to help screen reader users. If the menu text could be added to the toggle’s aria label to indicate which section the toggle is opening or closing, that would improve the accessibility of Advanced Sidebar Menus greatly.

    In this earlier response, Support indicated that an internal ticket had been opened for this issue. Can you tell me what the status of that ticket is?

    Robin McGlauflin

  4. Hi Robin,

    The ticket is still in the backlog with so far no great solution for this.

    The primary challenge with dynamically including menu text in the toggle labels is localization. Automated generation runs into significant hurdles when accounting for varying sentence structures, grammatical gender, pluralization, and language-specific syntax across translations.

    Instead of trying to add a solution to the plugin which works on all 100k+ sites using the plugin, maybe there is a solution we can create for your specific needs using the existing plugin filters.

    Can you point me to an existing menu and provide a list of the current aria-label and what you would like each of the aria-label to be changed to? I don’t need all of them, just enough to understand the pattern.