Add Unique ARIA Label to Navigation Landmark

[bbertucc]

Description:

The navigation landmark on the Learning Pathways page needs a unique ARIA label to improve accessibility. Currently, the aria-label attribute is empty, which does not distinguish the landmark for screen readers.

Current Code:

<nav class="is-responsive global-header__navigation wp-block-navigation is-horizontal is-layout-flex wp-block-navigation-is-layout-flex" aria-label="" data-wp-interactive="core/navigation" data-wp-context="{&quot;overlayOpenedBy&quot;:{&quot;click&quot;:false,&quot;hover&quot;:false,&quot;focus&quot;:false},&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}">

Proposed Fix:

Update the aria-label attribute to a unique, descriptive label.

Updated Code:

<nav class="is-responsive global-header__navigation wp-block-navigation is-horizontal is-layout-flex wp-block-navigation-is-layout-flex" aria-label="Main" data-wp-interactive="core/navigation" data-wp-context="{&quot;overlayOpenedBy&quot;:{&quot;click&quot;:false,&quot;hover&quot;:false,&quot;focus&quot;:false},&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}">

Steps to Reproduce:

1. Navigate to https://learn.wordpress.org/test/learning-pathways/
2. Inspect the navigation landmark.
3. Note that the aria-label attribute is empty.

Acceptance Criteria:

The aria-label attribute for the navigation landmark should be populated with a unique, descriptive label (e.g., "Main Navigation").

Ensure that the label accurately describes the purpose of the navigation landmark for screen readers.

How critical is this fix?

This change will help improve accessibility by making landmarks distinguishable for users relying on assistive technologies. Without this change, users may be frustrated and abandon non-critical workflows. Will get in the way of compliance if not fixed.

Affected Pages:

This issue is reported on 36,509 pages Equalify scanned. Solving this issue will solve the issue on those pages.

Additional Notes:

This ticket was automatically generated via Equalify and fact-checked by @bbertucc.

[alexstine]

Hey @bbertucc, this is pretty cool. One note. The word "Navigation" inside the aria-label is not necessary as the <nav> tag gets an implicit role="navigation" which screen readers will announce as "navigation". Adding the word inside the label only increases verbosity for users.

Thanks.

[bbertucc]

Good catch @alexstine! I've adjusted it to just be "Main".

[ryelle]

FYI, I've moved this from the Learn repo to wporg-mu-plugins, as it's related to the global header (which lives in this repo and is just called from all the networked sites).

[alexstine]

@ryelle The reference is in the new theme?

https://github.com/WordPress/Learn/edit/trunk/wp-content/themes/pub/wporg-learn-2024/parts/header.html

Maybe not but thought it might be worth a check.

[ryelle]

The new Learn theme pulls in the global header, it's that first line <!-- wp:wporg/global-header …. The navigation with the missing aria-label is inside the global header.

I'm sure this issue is also happening on https://wordpress.org/plugins/ for example, since it's all the same navigation.

[bbertucc]

I added an "Impact" section to motivate development

This issue is reported on 36,509 pages Equalify scanned. Solving this issue will solve the issue on those pages.

[bbertucc]

Updated with "How critical is this fix?", based on @ryelle's feedback in the Make WordPress slack