Daily Accessibility ReviewImages Missing Alt Text in Carousel and ReceiverIcons Components

[github-actions[bot]]

Accessibility Issue: Images Missing alt Attribute

Two components render <img> elements without an alt attribute, violating WCAG 2.2 Success Criterion 1.1.1 – Non-text Content (Level A).

"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose." — [WCAG 2.2 §1.1.1]((www.w3.org/redacted)

Screen readers announce images without alt attributes using the image's file path or URL, which is meaningless to users relying on assistive technology.

---

Affected Files

1. shell/components/Carousel.vue — line 198

<div class="slide-img">
  <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`">
</div>

The image displays the chart/application icon in the featured charts carousel on the Apps & Marketplace pages. Without an alt attribute, screen readers have no description of the icon.

Suggested fix:

<img
  :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`"
  :alt="slide.chartNameDisplay || ''"
>

---

2. shell/components/formatter/ReceiverIcons.vue — line 98

<div class="logo">
  <img :src="type.logo">
</div>

This image displays the logo of an alert receiver type (e.g. Slack, PagerDuty). Without alt text, its purpose is not conveyed to assistive technology users.

Suggested fix:

<img :src="type.logo" :alt="key">

(where key is the loop variable representing the receiver type name)

---

Steps to Reproduce

1. Navigate to Apps & Marketplace → Charts in the Rancher Dashboard.
2. Inspect the chart carousel images with a screen reader (e.g. NVDA, VoiceOver) or the browser's accessibility tree — the images have no accessible name.

---

WCAG References

• 1.1.1 Non-text Content (Level A): (www.w3.org/redacted)

Generated by Daily Accessibility Review · ● 1.3M · ◷

• expires on May 27, 2026, 8:26 AM UTC