- 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
svgsvg.swipper_common_icon_classsvg.rounded-pill