[A11Y] Landmarks Issue: multiple nav elements with unique labels

[jenlampton]

3. Landmarks Issue: multiple nav elements with unique labels

Description of Issue: There are two different nav, or role="navigation" elements on all pages.

When there is more than 1 of the same landmark, there must a distinct and unique label applied to each to help users differentiate between them.
URL: https://pr3750-llnmetezlaix5oe10ddq5m3nya7zdz2b.tugboat.qa/ and https://pr3750-llnmetezlaix5oe10ddq5m3nya7zdz2b.tugboat.qa/magna
Testing Environment/Browser: Windows Lenovo PC, Windows 10 Pro, Chrome Browser v. 94.0.4606.61
Severity: P1
Solution:

1. Add aria-label="[menu-name]" to the header menu, where [menu-name] is the name of the menu selected in the header settings. If the name of the menu contains "Menu" or "Navigation" these words should be removed.
2. Remove all uses of role="navigation" on div tags (replace with nav tags + arial labels)

Currently, the navs are labeled as follows which is causing screen readers confusion about where or what each nav is:

Current code for navs in header:

<header>

  <nav>...Login....</nav> //not labeled at all

  <div role="navigation"> //not labelled, and also using different landmark strategy
     <ul>...</ul>
   </div>

</header>

Recommendation

I recommend the following labels instead. You can use aria-labelledby OR aria-label (which is sometimes simpler for code purposes, but up to you all!).
Additionally, do NOT use the word "nav" or "menu" in the label since it is repetitive for screen readers and will announce as "Main navigation navigation" or "Secondary nav navigation."

<header>

  <nav aria-label="User">...Login....</nav> 

  <nav aria-label="Main"> // recommend sticking with 1 landmark strategy
     <ul>...</ul>
   </div>


</header>

Screenshot:

[laryn]

I just had a similar accessibility review come back regarding the main navigation (not the one in the header block):

Wrap the main navigation in a nav aria-label="main" element.

Maybe we can find anywhere core is currently adding role="navigation" and change it to use <nav aria-label="[Word]">?