Daily Accessibility ReviewImages Missing Alt Text (Non-text Content)

[github-actions[bot]]

Problem

Several <img> elements in the application are missing alt attributes, making their content inaccessible to users who rely on screen readers.

Files and locations:

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

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

The carousel slide icon has no alt attribute. When a slide represents a Helm chart, the icon is the chart's identifying visual — screen reader users cannot determine which chart is being shown.

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

<img :src="type.logo">

Alert receiver type logos have no alt attribute, so screen reader users cannot identify the receiver type from the icon.

3. shell/pages/c/_cluster/istio/index.vue – lines 101 and 137

<img :src="kialiLogo">
...
<img :src="jaegerLogo">

Kiali and Jaeger product logos on the Istio tools page have no alt attribute.

WCAG 2.2 Reference

WCAG 2.2 § 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, except for the situations listed.

Every meaningful image must have a text alternative. Decorative images should use alt="" to instruct assistive technologies to ignore them. Images that convey information (such as product logos identifying a tool) must have descriptive alt text.

Suggested Fixes

<!-- Carousel.vue: use the chart display name as alt text -->
<img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`"
     :alt="slide.chartNameDisplay">

<!-- ReceiverIcons.vue: use the type name -->
<img :src="type.logo" :alt="type.name || ''">

<!-- istio/index.vue -->
<img :src="kialiLogo" alt="Kiali">
...
<img :src="jaegerLogo" alt="Jaeger">

Generated by Daily Accessibility Review · ● 1.6M · ◷

• expires on Jun 1, 2026, 8:48 AM UTC