What's wrong
Misspelled roles like `role="btn"` or `role="nav"` are ignored by assistive tools.
Who it affects
Screen readers treat the element as generic text or a generic container, discarding accessibility semantics.
How to fix on Shopify
Correct typo roles to standard W3C roles such as `button`, `navigation`, `banner`, or `complementary`.
Code example
Problematic Code
LIQUID
<div role="btn" class="cart-button">Cart</div>Recommended Accessible Code
LIQUID
<button type="button" class="cart-button">Cart</button>
<!-- Or if div is mandatory -->
<div role="button" tabindex="0" class="cart-button">Cart</div>How to check your fix
Inspect elements with `role` attributes in DevTools. Check against the W3C WAI-ARIA Roles specification.