[Blog list] Image alt duplicates title text

[svinkle]

Issue summary

The Blog list template features the main blog image with alt text. The alt text is redundant as it repeats the visible heading text. This causes an overly verbose user experience for screen reader users.

Screenshots

(Screenshot Removed)

Current code

HTML

(Screenshot Removed)
<!-- … -->
<h2 class="article-card__title" id="Article-10759274554">
  (BII Removed)
</h2>

<!-- Other blog list items… -->

Steps to reproduce

1. Go to a Dawn theme store with any supported browser
2. Navigate to a blog list page
3. With an active screen reader, use the virtual cursor to navigate through the list content items

Behavior

Expected

• Image alt to be empty unless a value is provided by the merchant.

Actual

• Image alt duplicates blog title text.

Recommendation

Set the image alt attribute value as empty by default. This will set the image as "decorative" and be bypassed by screen readers.

If the image has a unique alt value set in the Admin, add this to the image alt attribute.

Recommended code

HTML

<img
  srcset="…"
  src="//cdn.shopify.com/s/files/1/0014/4972/1914/articles/120315_BRIGHTEN-UP_MAIN_2048x2048_78152212-9ced-46eb-b10a-bba9a25a778d_533x.jpg?v=1521742849"
  sizes="(min-width: 1600px) 750px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
  alt="{image.alt}"
  width="2048"
  height="1365"
  loading="lazy"
  class="motion-reduce"
/>
<!-- … -->
<h2 class="article-card__title" id="Article-10759274554">
  (BII Removed)
</h2>

<!-- Other blog list items… -->

Specifications

• Browser: Any
• Dawn version: 2.1.0
• Component: Blog list
• WCAG Principal: Perceivable
• WCAG SC: 1.1.1 Non-text Content
• Severity: Low
• Effort: Low
• Related: https://github.com/Shopify/dawn/issues/693

[pizzaz93]

The files related to this issue seem to have alt as "" or a dynamic value as recommended.

https://github.com/Shopify/dawn/search?q=class%3D%22motion-reduce%22