Daily Accessibility ReviewMissing alt Attributes on Images in Carousel and ReceiverIcons Components (WCAG 1.1.1)

[github-actions[bot]]

Summary

Two components render <img> elements without alt attributes, making image content inaccessible to screen reader users.

Affected Files

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

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

The slide icon image has no alt attribute at all. Screen readers will typically fall back to announcing the image file path/URL, which is meaningless to the user.

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

<!-- shell/components/formatter/ReceiverIcons.vue -->
<div class="logo">
  <img :src="type.logo">
</div>

The receiver type logo image has no alt attribute. These icons represent different alert receiver types (e.g., Slack, PagerDuty) in the Monitoring configuration UI and their meaning should be communicated to assistive technology users.

WCAG Violation

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.

Images that convey meaning (such as an app icon in a catalog or a receiver type logo) must have a descriptive alt attribute. Images that are purely decorative should use alt="" to instruct screen readers to ignore them.

See: (www.w3.org/redacted)

Recommended Fix

Carousel.vue — Add a meaningful alt text using the chart name:

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

ReceiverIcons.vue — Add a meaningful alt text using the receiver type name:

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

(where key is the iterator variable already available in the v-for loop at line 92)

Generated by Daily Accessibility Review · ● 2.5M · ◷

• expires on May 31, 2026, 8:11 AM UTC