Accessibility Enhancements Needed

  • Amber Hinds

    (@alh0319)


    4 months, 1 week ago

    Hi Max Mega Menu team!

    First of all, I want to say thank you for the work you have done so far towards improving accessibility in your plugin. It’s the best option I have found for creating accessible mega menus.

    I would like to use it on our website and I am hoping that you can please release an update with these accessibility fixes to make that possible. If you want to see the issues on a staging site, I’m happy to share the htaccess info for viewing the front end of our staging site. DM me on Make WordPress Slack for that information.

    Here are fixes that are needed:

    1. Add aria-controls attributes to links with a role of button referencing the ID of the submenu that they control. See MDN aria-controls documentation. These links:
      <a class="mega-menu-link" tabindex="0" aria-expanded="false" role="button">Products<span class="mega-indicator" aria-hidden="true"></a>
      It will require adding an ID to <ul class="mega-sub-menu" role="presentation">
    2. Add aria-haspopup="true" to those same links. See MDN aria-haspopup documentation.
    3. When expanding a submenu on desktop, the arrow stays pointing down instead of up (screenshot). This is not the case on mobile, where the arrow toggles between up and down correctly.
    4. Add a tab focus lock on submenus when clicked open, or ensure that if a user tabs out of a submenu, the menu automatically closes. Currently when a submenu is opened, a keyboard user is able to tab out and beyond it, and it stays open. Additionally, the parent item has focus styles when expanded, which may cause confusion. See a screenshot showing the menu still open after focus has moved beyond it. Users should either not be able to tab beyond the submenu without closing it, or if they do, the menu should close on its own.
    5. The mobile menu button also needs aria-controls and aria-haspopup="true". This button:
      <button aria-label="Menu" class="mega-toggle-animated mega-toggle-animated-slider" type="button" aria-expanded="false">
    6. When the mobile menu is opened, focus is not moved into the menu. This stops users from being able to use “read” functions in their screen reader. Focus should either be moved to the first item in the menu or the container itself.
    7. When the “Off Canvas” mobile menus are used, there should be a container around the menu list and the button so they are in the same container. Currently, screen readers can leave this menu without closing it and will read items that are hidden behind it on the page. This can cause confusion. The container should be a <dialog> or have a dialog role and also have aria-modal="true". See MDN aria-modal documentation and dialog documentation.
    8. Users should not be able to tab out of Off Canvas mobile menus. The expectation is that there will be a tab focus lock when the menu is open, and users will be able to tab through the items in the mobile menu in a circular fashion.
    9. Closing the mobile menu with the close button does not return keyboard focus to the button for opening the menu. Focus stays on the (now hidden) close button and the screen reader does not announce anything to confirm the menu has closed. See screenshot of the menu closed but focus still on the hidden button.
    10. When keyboard focus is on the close button for the mobile menu, the escape key cannot be used to close the menu.
    11. The list structure is incorrect/confusing if a heading is added within a column. In this example screenshot, the screen reader says “list 6 items” when the user tabs into the first item in the list. This specific menu is set up with a custom HTML block that contains a heading and 5 menu items (editor screenshot). Because Max Mega Menu adds a list item for every component added into a column, this can cause confusion or make users think a list item is missing because when tabbing through interactive elements, they always hear one fewer items than the screen reader says there will be.

      I understand that this can be difficult to work around in very complex Mega Menus with lots of non-interactive components, and I understand why this is the way it is. However, for simpler menus like this one, this could be resolved by adding an additional setting to the column settings panel (screenshot). If you were to add a heading field here, then, if filled in, you can add the heading before the column <ul> and you can add aria-labelledby like this:
      <h2 class="mega-submenu-column-header" id="sub-header1">Software Products</h2> <ul class="mega-sub-menu" aria-labelledby="sub-header1"> [...] </ul>
      That would get the heading out of the list so screen readers announce the correct number and provide additional context to the list for people who are tabbing through interactive components. You could potentially extend this further by adding expand/collapse buttons to these headers on mobile, though that is not necessary.

    I hope you find this feedback helpful and appreciate you all prioritizing accessibility. I would love to be able to use this plugin and recommend it to others if these blockers can be resolved.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support megatom

    (@megatom)

    4 months, 1 week ago

    Hi Amber,

    Many thanks for the helpful review. I’m glad to see the work we have done on accessibility (the result of many previous audits over the past 8 or so years) has been recognised.

    I will review your suggestions and look forward to further enhancing the accessibility of MMM in our upcoming updates.

    Regards,
    Tom

    Thread Starter Amber Hinds

    (@alh0319)

    4 months ago

    Thank you, Tom! I look forward to the updates.

    Thread Starter Amber Hinds

    (@alh0319)

    3 months, 2 weeks ago

    Hi @megatom,

    I am curious if you have discussed this as a team and have any sort of timeline for releasing fixes?

    Thank you!!

    Plugin Support megatom

    (@megatom)

    3 months, 1 week ago

    Hi Amber,

    The team is just me, I’ll review and include fixes in the next update. I don’t have a timeline for that, but historically you will see I generally release larger updates every 2-4 months.

    Regards,
    Tom

    Plugin Support megatom

    (@megatom)

    3 months, 1 week ago

    Hi Amber,

    To begin with point 11 which looks like a big one, this is something you can fix yourself by adjusting/correcting the menu structure.

    The menu structure itself (on the Appearance > Menus page) should look like this:

    Products
    -- Software Products
    ---- Accessibility Checker
    ---- Audit History Addon
    ---- etc

    When you open the Mega Menu Builder for Products, you’ll find Software Products in there and you can drag it to the correct position within the sub menu. The resultant HTML will be simplified and semantically correct (so as not to confuse screen readers).

    To make Software Products behave like a header rather than a link, enable the Disable Link option for that item. To style Software Products to look like a header rather than a link, utilise the Mega Menu > Menu Themes > Mega Menus > Second/Third Level Items options.

    You can check the demo menu on megamenu.com (the Menu Items sub menu) to see how it looks, if you try it with a screen reader you will find it announces the correct number of items.

    I’ll work on the other issues also, but that is something you can get on with in the mean time.

    Regards,
    Tom

    Plugin Support megatom

    (@megatom)

    2 months, 3 weeks ago

    Hi Amber,

    How did you get on with making those changes?

    Thank you again for your suggestions, most of the updates are now in the development version. You can check it on megamenu.com. I still need to make some refinements but you can test it yourself by installing the trunk version from the bottom of this page: https://ww.wp.xz.cn/plugins/megamenu/advanced/

    Regarding aria-haspopup, please check: https://www.megamenu.com/documentation/aria-haspopup/ . The tldr is, if w3.org start using aria-haspopup on their mega menu, we will too.

    The other one is point 7, I’ll work on that.

    Regards,
    Tom

    Thread Starter Amber Hinds

    (@alh0319)

    1 month, 1 week ago

    Hi Tom,

    Thank you so much for releasing some fixes and your kind response to my feedback! This was an amazing amount of work. ❤️

    I tested version 3.8.1 and here is what I see:

    1. aria-controls: Fixed
    2. aria-haspopup: N/A — I understand your reasoning for not adding this, and I agree.
    3. Arrow stays pointing down instead of up: No change — is there a setting I need to adjust for this?
    4. Menu closes if user tabs out: Fixed
    5. Mobile menu button aria-controls and aria-haspopup="true": Fixed
    6. Move focus into mobile menu when opened: Fixed
    7. Off-canvas mobile menu structure: Partially fixed — there is a dialog role and attributes, but because it was added to the <ul> for the menu, while the menu close button can be reached with the tab key, screen readers are blocked from announcing it. When I tested with VoiceOver, it actually broke VoiceOver’s ability to read anything. Here’s a recording with VoiceOver.
      • Either a new container needs to be added, wrapping the button and ul, or the button has to be moved into the ul so it is semantically inside the dialog for screen reader users. The first option is preferable because it preserves list semantics. The current implementation (adding a dialog role to the ul) stops screen readers from announcing it as a list.
      • The dialog needs an aria-label naming it for screen reader users.
    8. No tabbing out of Off Canvas mobile menus: Fixed
    9. Closing mobile menu with close button returning focus to mobile trigger: Partially Fixed — this returns focus now, but the announcement for screen reader users is missing because of the previous note about the button being outside the dialog. When that is resolved, this will be fully fixed.
    10. Escape key closing mobile menu when focus is on close button: Fixed
    11. List semantics with headings:
      I did try your recommendation for adding the headings as custom links with their sub-items below them in Appearance > Menus and disabling the links. While this does correct the number of list items in the sub-list, it creates other problems.

    Here’s the resulting code:

    <li class="mega-menu-column mega-menu-columns-3-of-12" style="--columns:12; --span:3" id="mega-menu-10169-0-1">
    		<ul class="mega-sub-menu">
    <li class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-disable-link mega-menu-item-10401" id="mega-menu-item-10401"><a class="mega-menu-link" tabindex="0">Software Products<span class="mega-indicator" aria-hidden="true"></span></a>
    			<ul class="mega-sub-menu" id="mega-sub-menu-10401">
    <li class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-4834" id="mega-menu-item-4834"><a class="mega-menu-link" href="https://equalizestage.wpengine.com/accessibility-checker">Accessibility Checker</a></li><li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-a11y-checker mega-menu-item-10359" id="mega-menu-item-10359"><a class="mega-menu-link" href="https://equalizestage.wpengine.com/accessibility-checker/audit-history/">Audit History Add-on</a></li><li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-a11y-checker mega-menu-item-10360" id="mega-menu-item-10360"><a class="mega-menu-link" href="https://equalizestage.wpengine.com/accessibility-checker/csv-export/">CSV Export Add-on</a></li><li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-a11y-checker mega-menu-item-10361" id="mega-menu-item-10361"><a class="mega-menu-link" href="https://equalizestage.wpengine.com/accessibility-checker/wordpress-multisite-add-on/">Multisite Add-on</a></li><li class="mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-10170" id="mega-menu-item-10170"><a class="mega-menu-link" href="https://equalizestage.wpengine.com/archivewp/">ArchiveWP</a></li>			</ul>
    </li>		</ul>
    </li>

    Issues with this method:

    1. It adds an additional, unnecessary list of one item that creates extra screen reader noise.
    2. There is no way to define a heading tag for the element.
    3. Disabling the link doesn’t change it from being a link, it just removes the href and adds a tabindex:
      <a class="mega-menu-link" tabindex="0">
      Keeping the anchor tag means that it still announces as a link to screen reader users, which will make them think it is broken, and the tabindex keeps it in the tab order, which is not correct as only functional components should receive tab focus.

    Unfortunately, I think this is actually more problematic than having the heading in the first list item, so it does not seem like a viable solution.

    Thanks again for all your work on this.

    Plugin Support megatom

    (@megatom)

    1 month, 1 week ago

    Hi Amber,

    Glad to see most of those are fixed.

    Here is how to can flip the arrow when the sub menu is open:

    https://www.megamenu.com/documentation/toggle-sub-menu-indicator-direction/

    Regarding the dialog for mobile menu, unfortunately I can’t change the menu markup and add new elements where there were none before, it would break any custom CSS users have added over the years. So that limits my options for using the dialog suggestions on the mobile menu. I’ll need to investigate your suggestions when I have more time. It also makes moving the close icon tricky too, any suggested workarounds that don’t involve changing the markup would be appreciated – even small changes to the markup can result in broken menus and an avalanche of support issues on this end.

    The “number of items in a list” issue: Is there an attribute that could be added to the list item for the custom html widget that would remove it from the count? Aria-role=presentation maybe? We could do that. I’m also planning a change that will let you build your sub menu content as a gutenberg/fse page template, and use that as the submenu content instead, so that should also give you the flexibility to get the markup as you need it.

    Regards,
    Tom

    • This reply was modified 1 month, 1 week ago by megatom.
Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Tags