Epic: Refactor website header to provide accessible navigation

[roslynwythe]

Dependencies

These issues have been created from the epic:

• Issue 1: Fix accessibility problems in the mobile navigation menu  #4301
  • Referring to the W3C sample code for navigation menu buttons (see Resources) update the HTML and JavaScript to do the following:
    • make explicit the role and name of the hamburger icon/button using WAI-ARIA attributes, so that a screen reader is informed about the purpose of the button.
    • add JavaScript to dynamically update the WAI-ARIA label "aria-expanded" so that a screen reader can announce whether the menu is expanded. 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 the taborder attribute to menu items so they are usable using keyboard navigation.
    • recommend if it is necessary to reformat the HTML in order to place the navigation button/menu within a <hav> element, or if role="nav" should be added to another element.
• Issue 2: Enhance accessibility of the HfLA logo/Homepage link
  • Refactor HTML so that the HfLA logo (? and the Donate link) are contained within a <nav> element.
  • Improve "screen reader only" text for the logo or alternatively provide an explicit "Home" link.
• Issue 3: Update the wiki page https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant with guidance specific to button icons.

Overview

This epic addresses several problems navigating the site using a screen reader.

Details for Issue 1

The following issues prevent screen reader users from being able to navigate the website for mobile screen sizes:

1. On page load there is no accessible name or role given to the "hamburger" icon/button to indicate that activating the button will display the primary navigation menu. The screen reader announces the button as "button list item" and so many users will skip over the button and lack access to the navigation links.
2. If the mobile navigation menu links are displayed (when the "hamburger" navigation menu button is activated), the menu item links are not keyboard accessible because they are not in the tab order. This is a result of the dynamic placement of the menu items.

Details for Issue 2

1. In both mobile and desktop views, the HfLA logo is not enclosed in the <nav> element and is not identified explicitly as representing the Home page. Currently it is identified to the screen reader user (using sr-only text) as "Hack for LA internal link". Options include changing the sr-only text to "Hack for LA Homepage", adding aria-labels/roles to clarify, or adding an explicit Home link in addition to the clickable logo.
2. In both mobile and desktop views, the Donate link is not enclosed in the <nav> element,

Resources

• Header Include
• main nav Include
• hamburger nav Include
• W3C - Menu Button Example
• ARIA - Navigation Role

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Modify Fix accessibility problems in the mobile navigation menu  #4301 to apply aria labels as described in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/
• Research: which links should be enclosed by the <nav> element.
• Refactor code to create a <nav> element that includes both mobile and wider screens, Requires updates to include files: header.html, main-nav.html and hamburger-nav.html and associated CSS OR Create a separate <nav> element for mobile view.
• In either case,

[ExperimentsInHonesty]

• When issue 2 gets made, add it as a dependency for the audit issue Accessibility Audit #1347