SVG images missing a text alternative on Shopify
What this is
3 SVG graphics marked as images have no accessible name.
Who it affects
- Screen reader users
Standards
How to fix it
- Add `aria-label="…"` (or a `<title>` child referenced with `aria-labelledby`) to the `<svg role="img">`.
- If the graphic is decorative, remove `role="img"` and add `aria-hidden="true"` instead.
Example
Before
<svg role="img" viewBox="0 0 24 24"></svg>After
<svg role="img" viewBox="0 0 24 24" aria-label="TODO: describe the graphic"></svg>Or mark decorative graphics with aria-hidden="true".
On Shopify
Products: Admin → Products → open the product → click the image → "Add alt text". Theme images: Online Store → Customize → select the image section → fill the alt text field. Liquid: `{{ image | image_url | image_tag: alt: image.alt }}`.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.