What's wrong
Omitting required attributes like `aria-checked` on `role="checkbox"` causes assistive technologies to malfunction.
Who it affects
Screen reader users cannot tell whether a filter is selected or what range a slider represents.
How to fix on Shopify
Ensure custom variant swatches or filter toggles initialize all required ARIA state attributes.
Code example
Problematic Code
LIQUID
<div role="checkbox" class="filter-checkbox">
In stock
</div>Recommended Accessible Code
LIQUID
<div
role="checkbox"
aria-checked="{% if filter_value.active %}true{% else %}false{% endif %}"
tabindex="0"
class="filter-checkbox"
>
{{ filter_value.label }}
</div>How to check your fix
Validate custom controls with axe DevTools to confirm all required ARIA attributes are present and dynamically updated.