Alt text that says nothing

Tab through the example. The line under the image is the alt a screen reader would read — a filename, then decoration.

Example

decorative swirl divider graphic image — Court High 84 — $120

Markup

Edit the HTML. The example above is live in this page, so Tab and a screen reader read it the same way they would on any other site.

HTML for the example

<figure class="lab-figure">
  <img src="/img/sneaker.svg" width="220" height="150" alt="IMG_2847_final_v3.png">
  <img src="/img/flourish.svg" width="220" height="18" alt="decorative swirl divider graphic image">
  <figcaption class="lab-caption">Court High 84 — $120</figcaption>
</figure>

<figure class="lab-figure">
  <img src="/img/sneaker.svg" width="220" height="150" alt="IMG_2847_final_v3.png">
  <img src="/img/flourish.svg" width="220" height="18" alt="decorative swirl divider graphic image">
  <figcaption class="lab-caption">Court High 84 — $120</figcaption>
</figure>