Daily Accessibility ReviewNavigation sidebar uses H6 headings, skipping levels H2–H5

[github-actions[bot]]

Summary

The navigation sidebar component shell/components/nav/Group.vue renders group headings as <h6>, creating a skip from <h1> directly to <h6> (skipping levels 2–5). Screen reader users relying on heading navigation will encounter a disorienting jump in the heading hierarchy.

WCAG 2.2 Violations

• 1.3.1 Info and Relationships (Level A): Heading levels that skip ranks convey a false structural relationship.
• 2.4.6 Headings and Labels (Level AA): Headings should describe the topic or purpose; an arbitrary <h6> without parent <h2>–<h5> headings does not accurately represent the document structure.

---

Evidence

On the Cluster Management page (/dashboard/c/_/manager/provisioning.cattle.io.cluster), the heading sequence is:

H1: Clusters
H6: Providers
H6: Advanced

This jumps from H1 to H6, skipping four heading levels.

Relevant Code (shell/components/nav/Group.vue, lines 274–289)

<!-- Group overview with link -->
<router-link v-if="hasOverview && hasChildren" ...>
  <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>

Suggested Fix

These sidebar navigation group labels are not content headings — they are labels for navigation groups within a <nav> element. They should not use heading tags at all. Replace <h6> with a styled <span> or <div>:

<router-link v-if="hasOverview && hasChildren" ...>
  <span class="nav-group-label">
    <span v-clean-html="group.labelDisplay || group.label" />
  </span>
</router-link>
<span v-else-if="hasChildren" class="nav-group-label">
  <span v-clean-html="group.labelDisplay || group.label" />
</span>

The same change applies to shell/dialog/SearchDialog.vue line 121 (<h6>{{ g.label }}</h6>), which also uses <h6> for group labels in the search dialog.

If semantic heading structure is desired inside the navigation, use <h2> or <h3> appropriately, as these groups are sub-sections within a <nav> landmark.

Steps to Reproduce

1. Navigate to /dashboard/c/_/manager/provisioning.cattle.io.cluster.
2. Open browser DevTools → Elements and inspect heading tags, or run:

   document.querySelectorAll('h1,h2,h3,h4,h5,h6')

3. Observe headings jump from H1 to H6 with no intermediate levels.

Generated by Daily Accessibility Review · ● 3.3M · ◷

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