Accessibility: Page does not start with H1 header tag

Created on 23 July 2024, 4 months ago

Problem/Motivation

An accessibility issue Accessibility rule: Page does not start with a level 1 heading will occur if the MegaMenu appears on the page before the page's <h1>TITLE</h1> tag. This is because Megamenu uses <h2> tags for the main menu items, which is an accessibility issue if there is not a preceding <h1> tag on the page, as it breaks the semantic structure of the page content.

Steps to reproduce

Place a Megamenu block on a page above the <h1>Title</h1> tag. This will cause the <h2> tags used by the MegaMenu's main menu items to be the first header tags on the page, triggering the accessibility issue because the tags are not properly hierarchal.

Proposed resolution

Add a configuration option to put a hidden <h1 style="display:none;">Main Menu</h1> element just before the Megamenu to ensure the header hierarchy is maintained.

Workaround: Add a block just before the Megamenu block that contains <h1 style="display:none;">Main Menu</h1> so that the page structure is correct.

Remaining tasks

Add H1 option

User interface changes

Add a checkbox option for "Add H1 tag before Megamenu".

API changes

n/a

Data model changes

Store the checkbox setting variable

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States diamondsea

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

Comments & Activities

Production build 0.71.5 2024