Skip to content

Search page missing level-one heading #1126

@coseeian

Description

@coseeian

Title

Search page missing level-one heading

Description

The search page lacks a level-one heading (<h1>). According to WCAG best practices and axe-core accessibility testing, pages should contain at least one level-one heading to provide proper document structure and improve navigation for assistive technology users.

This is particularly important for screen reader users who often navigate pages by headings and rely on the heading hierarchy to understand page structure and content organization.

Steps to Reproduce

  1. Go to /search.
  2. Inspect the page structure in dev tool and search for the <h1> heading.

Actual Behavior

The search page is rendered without a level-one heading (<h1>). This violation has a "moderate" impact level according to axe-core accessibility testing (rule ID: page-has-heading-one).

Expected Behavior

The search page should have a level-one heading that describes the page's main purpose or content. This helps:

  • Screen reader users understand the page context
  • Users navigating by headings to quickly identify the page purpose
  • Maintain proper semantic document structure

Environments

All.

Suggested Fix

Add a level-one heading to the search page. Since the page already has visual search UI elements, the <h1> can be visually hidden while remaining accessible to screen readers.

In src/layouts/SearchLayout.astro:

<BaseLayout title={title} variant="search">
  <h1 class="sr-only">Search Results</h1>
  <SearchProvider
    client:only
    currentLocale={currentLocale}
    uiTranslations={uiTranslations}
  />
</BaseLayout>

### Reference

WCAG:
- [Success Criterion 2.4.6 Headings and Labels (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)
- [Success Criterion 1.3.1 Info and Relationships (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)

Deque University:
- https://dequeuniversity.com/rules/axe/4.11/page-has-heading-one

### What is your operating system?

None

### Web browser and version

_No response_

Metadata

Metadata

Assignees

Labels

Accessibility: Best PracticeNo obvious current impact, but which may lead to problems in the future

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions