Daily Accessibility ReviewMultiple H1 headings break heading hierarchy on Settings and Home pages

[github-actions[bot]]

Summary

Multiple pages in Rancher Dashboard use more than one <h1> element, breaking the document heading hierarchy and creating a confusing experience for screen reader users.

WCAG 2.2 Violations

• 1.3.1 Info and Relationships (Level A): Information conveyed through presentation (heading levels) must be available in a programmatic form.
• 2.4.6 Headings and Labels (Level AA): Headings and labels should describe the topic or purpose; duplicating the top-level heading undermines the document structure.

---

Issue 1: Settings Page — shell/components/Setting.vue

The Global Settings page (/c/local/settings) renders every individual setting card using <h1> for the setting ID and <h2> for its description. With dozens of settings on the page, screen reader users encounter dozens of <h1> elements.

Relevant Code (shell/components/Setting.vue, lines 27–38)

<h1>
  {{ value.id }}
  <span v-if="value.fromEnv" class="modified">{{ t('advancedSettings.setEnv') }}</span>
  <span v-else-if="value.customized" class="modified">{{ t('advancedSettings.modified') }}</span>
</h1>
<h2>{{ t(`advancedSettings.descriptions.${value.id}`) }}</h2>

What screen readers see

H1: Settings            ← page title
H1: cacerts
H2: CA Certificates needed to verify the server's certificate.
H1: password-min-length Set by Environment Variable
H2: Define minimum characters required for an user password.
H1: ingress-ip-domain
H2: Wildcard DNS domain to use...
... (20+ more H1 elements)

Suggested Fix

Use <h2> for each setting name and <p> (or <h3>) for its description:

<h2>{{ value.id }} ...</h2>
<p>{{ t(`advancedSettings.descriptions.${value.id}`) }}</p>

---

Issue 2: Home Page — shell/pages/home.vue

The home page contains two <h1> elements: "Welcome to Rancher" (from the banner graphic) and "Clusters" (from the clusters table header).

Relevant Code (shell/pages/home.vue, lines 488 and 644)

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

Both occurrences are <h1>. The page already has a "Welcome to Rancher" <h1> from BannerGraphic, so the cluster table heading should be <h2>.

Suggested Fix

Change both occurrences of <h1 class="mb-0"> in home.vue (lines 488 and 644) to <h2 class="mb-0">.

---

Steps to Reproduce

1. Navigate to /dashboard/c/local/settings and inspect the DOM headings.
2. Navigate to /dashboard/home and inspect the DOM headings.
3. Use a screen reader (e.g., NVDA + Chrome) and press H to cycle through headings — you will hear many <h1> items instead of a logical hierarchy.

Generated by Daily Accessibility Review · ● 3.3M · ◷

• expires on May 30, 2026, 8:08 AM UTC