Daily Accessibility ReviewMultiple H1 Headings on Home Page

[github-actions[bot]]

Problem

The Rancher Dashboard home page (/dashboard/home) renders two <h1> elements simultaneously:

1. "Welcome to Rancher" – the hero banner heading
2. "Clusters" – the cluster table section heading

This was confirmed both via live Playwright snapshot (showing heading "Welcome to Rancher" [level=1] and heading "Clusters" [level=1]) and in the source code.

WCAG 2.2 Reference

WCAG 2.2 § 1.3.1 – Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

A page document outline should use exactly one <h1> to label the page's primary topic, with subordinate content using <h2>, <h3>, etc. Multiple <h1> elements break the logical document outline, making it harder for screen reader users to understand the page structure and navigate by headings.

WCAG 2.2 § 2.4.6 – Headings and Labels (Level AA)

Headings and labels describe topic or purpose.

When two headings share the same level but describe unrelated content sections ("Welcome to Rancher" and "Clusters"), the heading hierarchy fails to accurately convey the structure of the page.

Affected Code

shell/pages/home.vue – line 488:

<h1 class="mb-0">
  {{ t('landing.clusters.title') }}
</h1>

(inside the cluster table #header-left slot)

shell/pages/home.vue – line 644:

<h1 class="mb-0">
  {{ t('landing.clusters.title') }}
</h1>

(second cluster table variant for paginated view)

The "Welcome to Rancher" <h1> is rendered by the home page banner, resulting in two <h1> elements on the same page.

Suggested Fix

Change the "Clusters" section heading from <h1> to <h2> in both occurrences in shell/pages/home.vue:

<!-- Before -->
<h1 class="mb-0">
  {{ t('landing.clusters.title') }}
</h1>

<!-- After -->
<h2 class="mb-0">
  {{ t('landing.clusters.title') }}
</h2>

Generated by Daily Accessibility Review · ● 1.6M · ◷

• expires on Jun 1, 2026, 8:48 AM UTC