Daily Accessibility ReviewMultiple H1 Headings on Single Page (CountBox, CountGauge, ResourceSummary, Carousel)

[github-actions[bot]]

Accessibility Issue: Multiple <h1> Elements on a Single Page

Several components use <h1> for visually prominent numbers/titles, which results in multiple <h1> elements appearing on a single page. This violates best practices established under WCAG 2.2 Success Criterion 1.3.1 – Info and Relationships and 2.4.6 – Headings and Labels (Level AA).

"Headings and labels describe topic or purpose." — [WCAG 2.2 §2.4.6]((www.w3.org/redacted)

A page should have exactly one <h1> representing its primary title. Using <h1> for numeric statistics/counts creates a confusing document outline for screen reader users who navigate by headings.

---

Affected Files

1. shell/components/CountBox.vue — line 70

<h1>{{ count }}</h1>
<label>{{ name }}</label>

This component is used multiple times on the Cluster Dashboard to display statistics (e.g. "Total Resources: 522", "Node: 1", "Deployments: 10"). Each instance creates an additional <h1>, resulting in several <h1> headings on one page.

2. shell/components/CountGauge.vue — line 102

<h1>{{ useful }}</h1>
<label>{{ name }}</label>

Used multiple times in the Cluster Dashboard Capacity section (Pods, CPU, Memory), each emitting its own <h1>.

3. shell/components/ResourceSummary.vue — line 120

<h1>{{ resourceCounts.total }}</h1>
<h3>
  {{ name }}
</h3>

Used in the resource summary cards — again creating multiple <h1> elements.

4. shell/components/Carousel.vue — line 205

<h1>{{ slide.chartNameDisplay }}</h1>

Carousel slides each render an <h1> for the chart name.

---

Steps to Reproduce

1. Log in to the Rancher Dashboard and navigate to Home (or Cluster Dashboard → local).
2. Inspect the page with a screen reader heading navigation (e.g. press H in NVDA/JAWS) — multiple <h1> headings appear: the page title plus every metric count.

---

Suggested Fix

Replace <h1> with either:

• A visually styled <div> or <span> (with appropriate aria-label if needed), since these counts are data, not document headings; OR
• A lower-level heading (e.g. <h2> or <h3>) if a heading hierarchy is desired, ensuring no level is skipped.

Example for CountBox.vue:

<!-- Before -->
<h1>{{ count }}</h1>
<label>{{ name }}</label>

<!-- After: count is data, not a heading -->
<div class="count-value" aria-label="`${count} ${name}`">{{ count }}</div>
<div class="count-label">{{ name }}</div>

---

WCAG References

• 1.3.1 Info and Relationships (Level A): (www.w3.org/redacted)
• 2.4.6 Headings and Labels (Level AA): (www.w3.org/redacted)

Generated by Daily Accessibility Review · ● 1.3M · ◷

• expires on May 27, 2026, 8:26 AM UTC