Hidden labels in menu don't need an H2 tag

Created on 31 August 2023, about 1 year ago
Updated 2 February 2024, 10 months ago

The menu output includes the following tag:
<h2 class="visually-hidden" id="block-imp-main-menu-menu">Main navigation</h2>

The H2 headers ‘Main Navigation’ and ‘Secondary’ are visually hidden. But they are present in the main menu and therefore appear across the site on every page. They are not suitable keywords for SEO optimisation and should not have a H2 tag.

The H2 tag is required for accessibility but could be replaced with the following:
<div class="visually-hidden" role="heading" aria-level="2" id="block-mainnavigation-menu">Main navigation</div>

Additional Reference:
Bootstrap 5 documentation on accessibility:
https://getbootstrap.com/docs/5.0/getting-started/accessibility/

Accessible heading structure
https://www.a11yproject.com/posts/how-to-accessible-heading-structure/

Feature request
Status

RTBC

Version

5.5

Component

Code

Created by

🇬🇧United Kingdom sittard

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024