What's wrong
Drawer carts, sliding mobile navigation panels, or modal dialogs that are closed often keep `aria-hidden="true"` while inner buttons remain in the tab order.
Who it affects
Keyboard navigators tab into invisible elements on the page while screen readers remain completely silent, causing disorientation.
How to fix on Shopify
When closing drawer carts or popups, apply the HTML `hidden` attribute or `inert` attribute, or remove inner elements from the focus order with `tabindex="-1"`.
Code example
Problematic Code
LIQUID
<div id="CartDrawer" aria-hidden="true" class="cart-drawer is-closed">
<button type="button" class="btn-checkout">Checkout</button>
</div>Recommended Accessible Code
LIQUID
<div id="CartDrawer" aria-hidden="true" inert class="cart-drawer is-closed" hidden>
<button type="button" tabindex="-1" class="btn-checkout">Checkout</button>
</div>How to check your fix
Close the drawer or modal, then press Tab repeatedly through the page. Verify that focus never lands on hidden links or buttons inside the closed panel.