Skip to content

Header h1 is outside a landmark region (WCAG) #93

@cbj0hns0n

Description

@cbj0hns0n

What's happening

The "NextSpace" h1 in the Header renders outside any ARIA landmark region. axe-core flags this on every page.

Violation: region (moderate)
Some page content is not contained by landmarks.
Affected element: <h1 class="text-3xl font-bold ...">NextSpace</h1>

Screen reader users jump between landmarks to navigate a page. An h1 sitting outside all of them is easy to skip entirely.

Fix

components/Header.tsx. MUI's AppBar renders a <header> with implicit role="banner", so the h1 is probably rendering outside it, or the AppBar is missing its semantic element. Either way, one fix in the Header component covers every page.

Run an axe-core audit after to confirm the region violation is gone.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions