Accessible sub menus

(Neil Newman) #1

As a local government site we need to meet the 2018 accessibility standards, these include the need for all our menus to be keyboard accessible, our site was built many years ago and uses a sub menu which is only accessible via a mouse.
Example code below:
Is it possible to make such a sub menu keyboard accessible with standard Matrix tools?

<MySource_AREA id_name=“main_nav” design_area=“menu_normal” cache=“1”>


    <MySource_SET name=“show_subs” value=“always” />
    <MySource_SET name=“level” value=“top” />
    <MySource_SET name=“settings.class.normal” value="" />
    <MySource_SET name=“settings.class.current” value=“selected” />
    <MySource_SET name=“settings.class.hierarchy” value=“selected” />
    <MySource_ASSET>

  • <MySource_PRINT var=‘asset_short_name’ />
    more
    <MySource_SUB design_area=“menu_normal”>
    <MySource_SET name=“show_subs” value=“always” /> 
          <ul class="sub-nav">
        <MySource_ASSET>
          <li><a class="<MySource_PRINT var='settings.class' />" href="<MySource_PRINT var='asset_link' />">
              <MySource_PRINT var='asset_short_name' /></a>
          </li>
        </MySource_ASSET>
      </ul>
    </MySource_SUB>
</li>
 </MySource_ASSET>
 <MySource_DIVIDER></MySource_DIVIDER>
  </ul>

    </MySource_AREA>

(Nic Hubbard) #2

What would you need in the HTML to make it accessible by keyboard?

(Neil Newman) #3

Hi Nic and thanks for replying,
The Cabinet office recently carried out an accessibility audit of our website and one of the findings were that the tab we had on the site which opened up into a dropdown menu was inaccessible unless you had a mouse (tab since removed whilst I try and sort this out).
I cannot claim to be a coding expert but believe the Squiz code above deals with the opening and closing of this menu tab, I was hoping that there was a way to make this menu activate when the field is tabbed into using only keyboard input, if this is not possible I may look into replacing the tab with a Javascript dropdown menu.
Kind regards
Neil

#4

Hello Neil!

I think you’ll have to look into some additional frontend development (HTML, JavaScript, etc). If your menu is not currently meeting accessibility requirements then there is nothing that can be configured in Matrix alone that will change that.

Matrix will print the HTML, the markup that the menu uses, but as to whether or not that markup is accessible comes down to how the site was developed.

If you have a web developer team then have a chat to them about how to make that menu accessible. Typically it can be a technically difficult task to achieve as there are a lot of considerations around accessible menus.

A good place to start is guides from the W3C Working Group just so you know what should be included in the menu.
They have a guide and links to working examples here: https://www.w3.org/TR/wai-aria-practices/#menu

You may also want to check out the NSW government Design System. It has a guide on how to implement an accessible menu here: https://www.digital.nsw.gov.au/design-system/patterns/main-navigation