Daily Accessibility ReviewHeading Hierarchy Skips Levels Across Multiple Pages

[github-actions[bot]]

Problem Description

The heading hierarchy throughout the Rancher Dashboard skips multiple levels, creating a confusing document outline for screen reader users. Proper heading hierarchy should descend sequentially (H1 → H2 → H3 etc.) without skipping levels.

Affected page: Cluster Dashboard (/dashboard/c/local/explorer)

The heading order on this page is:

1. H6 — "Cluster", "Workloads", "Apps", "Service Discovery", "Storage", "Policy", "More Resources" (secondary navigation section labels in shell/components/nav/Group.vue)
2. H1 — "Cluster Dashboard" (page title)
3. H1 — numeric statistics: "546", "1", "10" (from CountGauge/ResourceSummary components)
4. H3 — "Total Resources", "Node", "Deployments", "Capacity", "Pods", "CPU", "Memory"

There are no H2, H4, or H5 headings anywhere on the page. The navigation section labels (H6) appear before the main page heading (H1) in the DOM.

WCAG 2.2 Violations

• **[1.3.1 Info and Relationships (Level A)]((www.w3.org/redacted) Structure and relationships conveyed through presentation must be programmatically determinable. A broken heading hierarchy fails to convey section structure.
• **[2.4.6 Headings and Labels (Level AA)]((www.w3.org/redacted) Headings should describe topic or purpose; skipping heading levels undermines the document outline.

Relevant Code

shell/components/nav/Group.vue (lines 280–289):

<!-- Group headers in sidebar navigation use H6 -->
<router-link v-if="hasOverview && hasChildren" :to="headerRoute" :tabindex="-1">
  <h6>
    <span v-clean-html="group.labelDisplay || group.label" />
  </h6>
</router-link>
<h6 v-else-if="hasChildren">
  <span v-clean-html="group.labelDisplay || group.label" />
</h6>

Recommended Fix

1. Replace <h6> in navigation group headers with non-heading elements (e.g., <span> or <p>) or use visually-styled text without heading semantics. Navigation group labels are not document section headings.
2. Ensure the single main page heading is <h1>, and content sections use <h2> → <h3> in order.
3. Remove <h1> from numeric stat components (see related issue on multiple H1 elements).

Generated by Daily Accessibility Review · ● 1.8M · ◷

• expires on May 28, 2026, 8:31 AM UTC