Daily Accessibility ReviewCarousel Component Uses <h1> for Slide Titles, Breaking Heading Hierarchy

[github-actions[bot]]

Summary

In shell/components/Carousel.vue, each slide title is rendered using an <h1> element (line 205). Since carousels are embedded inside pages that already have their own heading hierarchy, this results in unexpected <h1> elements appearing mid-page (e.g., on the Apps/Charts page), which disrupts the logical document outline for screen reader users.

WCAG 2.2 Reference

• SC 1.3.1 – Info and Relationships (Level A): Structure and relationships conveyed through presentation must be programmatically determinable. Heading levels should reflect the document's visual hierarchy — using <h1> inside a sub-component embedded in a page creates an incorrect outline.
• SC 2.4.6 – Headings and Labels (Level AA): Headings describe topic or purpose. A slide title in a carousel is not a page-level heading.

Affected File

shell/components/Carousel.vue (line 205):

<div class="slide-content-right">
  <BadgeState
    :label="slide.repoName"
    color="slide-badge mb-20"
  />
  <h1>{{ slide.chartNameDisplay }}</h1>
  <p>{{ slide.chartDescription }}</p>
</div>

This <h1> tag is rendered for each carousel slide. On the Apps/Charts index page (shell/pages/c/_cluster/apps/charts/index.vue), the page already has its own <h1>, so the carousel introduces additional <h1> elements inappropriately.

Recommended Fix

Change the slide title heading to an appropriate sub-level heading or a styled element that does not affect the document outline. A <h3> or <h4> (depending on surrounding headings), or a <p> with bold styling, would be more appropriate:

<!-- Option 1: semantic sub-heading -->
<h3 class="slide-title">{{ slide.chartNameDisplay }}</h3>

<!-- Option 2: non-heading styled text -->
<p class="slide-title"><strong>{{ slide.chartNameDisplay }}</strong></p>

Consider making the heading level configurable via a prop so that consuming pages can set an appropriate level.

Generated by Daily Accessibility Review · ● 2M · ◷

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