Add more alternative text to various images (#14932)

* Add alt text for cast launcher images

* Hide icon with supervisor form field label

* Use attribute for iframe title for ingress view

* Hide some decorative ZWave/ZHA icons

* Hide image preload in state card configurator

* Use title for alt text  on image media

* Hide media art as decorative

* Do not allow empty string for image media

cast/src/launcher/layout/hc-layout.ts

@@ -22,7 +22,11 @@ class HcLayout extends LitElement {
     return html`
       <ha-card>
         <div class="layout">
-          <img class="hero" src="/images/google-nest-hub.png" />
+          <img
+            class="hero"
+            alt="A Google Nest Hub with a Home Assistant dashboard on its screen"
+            src="/images/google-nest-hub.png"
+          />
           <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth

cast/src/receiver/layout/hc-launch-screen.ts

@@ -12,6 +12,7 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
+          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
           src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
         />
         <div class="status">

hassio/src/components/supervisor-formfield-label.ts

@@ -15,7 +15,7 @@ class SupervisorFormfieldLabel extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.imageUrl
-        ? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
+        ? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
         : this.iconPath
         ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
         : ""}

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -60,8 +60,8 @@ class HassioIngressView extends LitElement {
     }
 
     const iframe = html`<iframe
-      .title=${this._addon.name}
-      .src=${this._addon.ingress_url!}
+      title=${this._addon.name}
+      src=${this._addon.ingress_url!}
     >
     </iframe>`;
 

src/panels/config/integrations/ha-domain-integrations.ts

@@ -92,6 +92,7 @@ class HaDomainIntegrations extends LitElement {
               <img
                 slot="graphic"
                 loading="lazy"
+                alt=""
                 src=${brandsUrl({
                   domain,
                   type: "icon",
@@ -153,6 +154,7 @@ class HaDomainIntegrations extends LitElement {
             <img
               slot="graphic"
               loading="lazy"
+              alt=""
               src=${brandsUrl({
                 domain: this.domain,
                 type: "icon",

src/panels/media-browser/ha-bar-media-player.ts

@@ -227,7 +227,9 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         })}
         @click=${this._openMoreInfo}
       >
-        ${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
+        ${mediaArt
+          ? html`<img alt="" src=${this.hass.hassUrl(mediaArt)} />`
+          : ""}
         <div class="media-info">
           <hui-marquee
             .text=${mediaTitleClean ||

src/panels/media-browser/hui-dialog-web-browser-play-media.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
@@ -76,7 +83,10 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
               ></ha-hls-player>
             `
           : mediaType === "image"
-          ? html`<img src=${this._params.sourceUrl} />`
+          ? html`<img
+              alt=${this._params.title || nothing}
+              src=${this._params.sourceUrl}
+            />`
           : html`${this.hass.localize(
               "ui.components.media-browser.media_not_supported"
             )}`}

src/state-summary/state-card-configurator.js

@@ -31,7 +31,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
 
       <!-- pre load the image so the dialog is rendered the proper size -->
       <template is="dom-if" if="[[stateObj.attributes.description_image]]">
-        <img hidden="" src="[[stateObj.attributes.description_image]]" />
+        <img hidden="" alt="" src="[[stateObj.attributes.description_image]]" />
       </template>
     `;
   }