Add Accessibility Tags to Navigation

[ollicle]

Describe the bug
The main navigation is hidden on viewports less than 1024 pixels wide. The button responsible for displaying the main navigation on smaller screens lacks an accessible label or accessible pressed state.

To Reproduce
Check button accessible label:

1. Load the homepage in Firefox
2. Open the dev tools and Turn on Accessibility Features in the Accessibility tab
3. Reduce the viewport to a width where the navigation is hidden and menu button displayed
4. Right click on the menu button selecting Inspect Accessibility Properties
5. Check the Name and Role of the button element

Check button states:

1. Continued from above
2. Reveal the states in the properties panel in the right of the Accessibility tab
3. Click the menu button to reveal the navigation
4. Re-check the listed states

Expected behavior

1. The button role should be pushbutton
2. When the navigation is displayed the states ought to include expanded and expandable
3. When the navigation is hidden the states should not include collapsed and expandable

To remedy
The existing title within the SVG can be used as an accessible label:

1. Add a unique id to the title:

<title id="UNIQUE_ID">Menu…

2. Use the id as a value in an aria attribute on the button

`<button aria-labelled-by="UNIQUE_ID" …

The toggle button role and expanded state may be applied by:

1. Adding aria-expanded attribute to the button:

<button aria-expanded="true" …

2. Toggle the value when the menu is open:

<button aria-expanded="false" …

[ollicle]

As an alternative to the above we could consider a design that does not hide the navigation on small screens.

A mock-up of a possible design for small screens:

Although this work is best considered with some planning for what may need to be added to the main navigation in the near future.

[flowirtz]

Thanks @ollicle! Totally forgot about accessibility, like so many people probably as well. Agree that we should be better about this and at least get the navigation right.

I do like your idea of not hiding the navigation on mobile. Let's stick with the current one for now though, as the page is super new and the navigation will probably grow soon. Hope that makes sense.

[ollicle]

@grantbdev I’m so sorry! Old me had the above wrong.
aria-pressed should be aria-expanded I have corrected the details above.