Daily Accessibility ReviewMultiple <h1> Elements on Homepage — Improper Heading Hierarchy

[github-actions[bot]]

Summary

The Rancher Dashboard homepage renders two <h1> elements simultaneously: one for "Welcome to Rancher" (from BannerGraphic.vue) and one for "Clusters" (from home.vue). This violates best practice for heading hierarchy and breaks assistive technology navigation.

WCAG 2.2 Reference

• SC 1.3.1 – Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation must be programmatically determinable. A page should have exactly one <h1> as the primary page title, with subsequent headings using <h2>, <h3>, etc. in a logical order.
• SC 2.4.6 – Headings and Labels (Level AA): Headings and labels describe topic or purpose.

Screen reader users commonly use headings to navigate page sections. Multiple <h1> elements cause confusion about the page's primary subject.

Affected Files

shell/components/BannerGraphic.vue (renders the first <h1>):

<h1
  v-else-if="title"
  v-clean-html="title"
  data-testid="banner-title"
  class="title"
/>

shell/pages/home.vue (renders the second <h1> for the Clusters table):

<template `#header`-left>
  <div class="row table-heading">
    <h1 class="mb-0">
      {{ t('landing.clusters.title') }}
    </h1>
  </div>
</template>

Recommended Fix

The "Clusters" section heading inside the table should be demoted to <h2> (and the "Welcome to Rancher" banner heading kept as the single <h1>), or the banner title should use a styled <div> or <p> so that the "Clusters" heading can serve as the primary <h1>. Consistent heading hierarchy should be maintained throughout all pages.

Other pages also use multiple <h1> elements (e.g., shell/pages/c/_cluster/explorer/index.vue), so a broader audit of heading levels across all pages is recommended.

Generated by Daily Accessibility Review · ● 2M · ◷

• expires on Jun 3, 2026, 8:36 AM UTC