Daily Accessibility ReviewSidebar Navigation Uses H6 Headings, Skipping Heading Levels (H1 → H6)

[github-actions[bot]]

Accessibility Issue: Illogical Heading Hierarchy in Sidebar Navigation

The sidebar navigation uses <h6> elements for section group labels while the main page content starts with <h1>. This creates a confusing and illogical heading hierarchy that violates WCAG 2.2 Success Criterion 1.3.1 – Info and Relationships (Level A) and 2.4.6 – Headings and Labels (Level AA).

Heading levels should follow a logical outline structure — levels should not be skipped (e.g. going from <h1> to <h6>) and heading markup should not be used purely for visual styling.

---

Affected File

shell/components/nav/Group.vue — lines 278–289

<!-- Linked group header -->
<router-link ...>
  <h6>
    <span v-clean-html="group.labelDisplay || group.label" />
  </h6>
</router-link>

<!-- Non-linked group header -->
<h6 v-else-if="hasChildren">
  <span v-clean-html="group.labelDisplay || group.label" />
</h6>

These <h6> elements are used to label navigation groups like "Cluster", "Workloads", "Apps", "Service Discovery", "Storage", "Policy", "More Resources". The accessibility tree (confirmed via Playwright) exposes all of them as heading [level=6].

The accessibility tree for the Cluster Dashboard page shows:

heading "Cluster" [level=6]
heading "Workloads" [level=6]
heading "Apps" [level=6]
heading "Service Discovery" [level=6]
heading "Storage" [level=6]
heading "Policy" [level=6]
heading "More Resources" [level=6]
heading "Cluster Dashboard" [level=1]   ← main page title

The heading outline jumps from h1 (page title) to h6 (nav labels), which is semantically invalid and confusing for screen reader users navigating by headings.

---

Steps to Reproduce

1. Open the Rancher Dashboard and navigate to the Cluster Explorer view.
2. Use a screen reader's heading navigation (e.g. press H in NVDA/JAWS or use the Rotor in VoiceOver) — the heading list contains multiple <h6> navigation labels and a single <h1> page title, with no h2–h5 structure connecting them.

---

Suggested Fix

Option A (Preferred): Replace <h6> with non-heading markup. Navigation section labels are not document headings — they serve as labels for groups of links and should use <span> or a styled <div> with role="group" and aria-label instead:

<!-- Replace h6 with a styled label -->
<div class="nav-group-label" aria-hidden="true">
  <span v-clean-html="group.labelDisplay || group.label" />
</div>

Option B: If heading markup is desired for navigation sections, use <h2> or <h3> and ensure the overall page heading hierarchy is adjusted so no levels are skipped.

---

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