How to fix scrollable region focusable on Shopify

Steps for Shopify

1. In your Shopify Admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
2. Identify the template or section file that renders the scrollable region — common files include sections/product-template.liquid, sections/main-product.liquid, or snippets/product-description.liquid.
3. Find the container div or section that has a CSS class applying overflow: auto / overflow: scroll (check assets/theme.css or assets/base.css for the class definition).
4. Add tabindex="0" and an aria-label to that opening tag, e.g.: <div class="product-description" tabindex="0" aria-label="Product description">
5. In the CSS file, add a focus style: .product-description:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
6. Save both files, then preview the theme and press Tab to confirm the element is focusable.

<div class="product-description"
     tabindex="0"
     aria-label="Product description"
     style="max-height:200px; overflow-y:auto;">
  <!-- scrollable content here -->
</div>

What is scrollable region focusable?

A "scrollable region" is any box on your page that has a scrollbar — for example, a product description box with a fixed height, a reviews section with overflow scrolling, a custom dropdown list, or a side-by-side comparison table. When a sighted user without a mouse (or a user who relies entirely on the keyboard) presses Tab to navigate, they must be able to reach that box and scroll through its content using arrow keys. If the scrollable container has no focusable element inside it and no tabindex attribute, the keyboard simply skips it entirely, making the content inside inaccessible. WCAG Success Criterion 2.1.1 ("Keyboard") requires that all functionality — including scrolling — be operable by keyboard alone.

Keyboard accessibility is a legal requirement in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada) — failing it exposes your business to accessibility complaints and litigation. Shoppers who rely on keyboards (people with motor disabilities, power users, switch-access device users) cannot read the content hidden inside your scrollable box, which directly kills conversions for that segment. Search engines also value accessible, well-structured pages as a quality signal. Fixing this is usually a one-line code change and removes a real barrier for real customers.

See the complete Scrollable region focusable guide for every platform and the full background.