- Why it matters for shoppers
- If the icon carries meaning, such as a payment method or “free shipping”, a screen reader user misses it. If it is decoration, it should be hidden from screen readers.
- Where it usually lives in a Shopify theme
- Icon snippets, payment icons in the footer, trust and feature icons.
- Direction for a fix
- Hide decorative icons with aria-hidden="true". Give meaningful icons role="img" and an aria-label or a title element.
- What the test can see
- The test cannot tell a decorative icon from a meaningful one, so each of these needs a quick look.
- Examples from the demo store
svg#template--16865899806958__292dac11-23ed-40ac-b6d4-86de17cdf5ef-standard-1-svgsvg#template--16865899806958__e52cc19f-1b18-4d8d-9fa8-9bdf403e9352-standard-1-svgsvg#3666d04c-1d81-4a98-a31b-fe1439def1ee-svg