What's wrong
When multiple elements share the same ID, assistive technology can only associate the very first matching node.
Who it affects
Screen readers announce the wrong product name, price, or modal description.
How to fix on Shopify
Append Liquid's `{{ section.id }}` or `{{ forloop.index }}` to generate unique IDs across repeating product cards.
Code example
Problematic Code
LIQUID
{% for product in collection.products %}
<h3 id="product-title">{{ product.title }}</h3>
<button aria-labelledby="product-title">Quick Add</button>
{% endfor %}Recommended Accessible Code
LIQUID
{% for product in collection.products %}
<h3 id="product-title-{{ section.id }}-{{ product.id }}">{{ product.title }}</h3>
<button aria-labelledby="product-title-{{ section.id }}-{{ product.id }}">Quick Add</button>
{% endfor %}How to check your fix
Inspect the page with DevTools Console using `document.querySelectorAll('[id="your-id"]')` to confirm no duplicates exist.