Fix accessibility problems in the mobile navigation menu

[roslynwythe]

Overview

As developers we need to add the appropriate ARIA tags to the mobile "hamburger" icon/button and the mobile popup menu in order to enable use by AT (Assistive Technologies) such as screen readers. In this item we will provide functional and status information to the AT so that mobile device users can navigate the HfLA website using gestures or an external keyboard.

Details

Currently, mobile device users cannot use AT to navigate the HfLA website, because the menu button and menu items lack insufficient WAI-ARIA attributes. In particular,

• The hamburger icon/button used to expand the menu lacks a descriptive role/name and so it is not announced appropriately to the user
• There is no <nav> element present in the mobile view until the hamburger icon/button is activated
• The menu lacks the aria-expanded attribute to inform the AT whether the menu is expanded or hidden
• Once the menu is expanded, the menu items are not navigable via keyboard or gestures, because they are not in the default tab order and they lack the taborder attribute

Action Items

• Referring to the W3C ARIA Authoring Practices Guide - Navigation Menu Button Example, make the role and name of the hamburger icon/button explicit using these WAI-ARIA attributes: type, aria-haspopup, aria-controls, aria-name
• Use JavaScript to dynamically assign the aria-expanded attribute to indicate when the menu is in the hidden vs the expanded state. Alternatively, create two separate <button> elements, one for displaying the menu and the other for collapsing the menu, and mark each with an appropriate WAI-ARIA label.
• Assign role and aria-labelledby attributes of the <ul> element
• Assign role="none" attribute of the <li> element
• Assign the role="menuitem" of the <a> element
• In addition, to fulfill the requirement for a text description of the hamburger SVG icon:
  • Add the following attribute to the <svg> element: aria-labelledby (reference the button)
• Test the code locally using a screen reader and ensure that the screen reader announces the purpose of the hamburger icon/button, and when the button is activated, the user can use the Tab keys to navigate between menu items and the Enter or Space key to select a menu link. When the menu is displayed, the screen reader should indicate that.

Resources/Instructions

From the IDE, HTML for the header can be found in _includes/header.html which in turn includes _includes/hamburger-nav.html which renders the hamburger icon/button and list of links that comprise the mobile navigation menu. The JavaScript to generate the links can be found in assets/js/hamburger-nav.js.

• Google Chrome Screen Reader Extension (Chromevox) is a free option for screen reader testing
  • Shortcuts
    • use Tab to move to the next selectable item and Shift +Tab to move to the previous selectable item
    • use Enter to perform the default action on the current item.
• Hamburger Nav HTML
• JavaScript for Mobile Navigation
• W3C ARIA Authoring Practices Guide - Navigation Menu Button Example
• MDN - aria-expanded
• Using the WAI-ARIA expanded state to mark expandable and collapsible regions
• Android Accessibility - Use Talk Back to Browse the web
• This item was created as a result of Epic: Refactor website header to provide accessible navigation #4300

[github-actions]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Complexity, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels