SEOLZ

Scrollable region focusable

Quick win

Found on 9% of audited stores.

Make every scrollable region on your store reachable and operable by keyboard by adding tabindex="0" (or placing focusable content inside it) so users who cannot use a mouse can scroll it.

What it is

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.

Why it matters

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.

How to fix it

  1. Identify every element on your site that has a CSS overflow value of auto or scroll (common culprits: product description containers, review widgets, terms-and-conditions boxes, image galleries, data tables, and custom dropdowns).
  2. Check whether the scrollable container itself, or any element inside it, is naturally focusable (e.g. a link, button, or input field). If so, no change is needed — keyboard users can already reach it.
  3. If the container has no naturally focusable content, add tabindex="0" directly to the scrollable element (e.g. <div class="scrollable-desc" tabindex="0">). This places it in the natural Tab order so keyboard users can focus and then scroll with arrow keys.
  4. Optionally add a visible focus style (CSS :focus outline) so keyboard users see clearly which element is focused — a plain tabindex with no visual indicator is confusing.
  5. Add a meaningful aria-label or aria-labelledby attribute to the container so screen-reader users understand what the scrollable region contains (e.g. aria-label="Product description").
  6. Test by pressing Tab until the element receives focus, then use the Up/Down or Left/Right arrow keys to verify scrolling works without a mouse.
<div class="product-description"
     tabindex="0"
     aria-label="Product description"
     style="max-height:200px; overflow-y:auto;">
  <!-- scrollable content here -->
</div>

Fix it on your platform

Pick your platform for the exact steps.

How to fix scrollable region focusable on 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.
Full Shopify guide →Official Shopify docs ↗
How to fix scrollable region focusable on WooCommerce
  1. In your WordPress Admin, go to Appearance → Theme File Editor (or use a child theme) and locate the template that outputs the scrollable region — commonly woocommerce/single-product/description.php or a custom template part.
  2. Find the wrapping element (div, section, etc.) that carries the overflow-scroll CSS class.
  3. Add tabindex="0" and aria-label="Product description" to that element's opening tag.
  4. Add a :focus outline rule to your child theme's style.css: .woocommerce-product-details__short-description:focus { outline: 2px solid #005fcc; }
  5. Alternatively, install the 'WP Accessibility' plugin (by Joe Dolson), which provides helpers for common WCAG fixes, though tabindex may still need to be added manually to custom containers.
  6. Save and verify with keyboard Tab navigation on the front end.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix scrollable region focusable on BigCommerce
  1. In the BigCommerce Control Panel, go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
  2. Locate the Handlebars template for the scrollable region — typically templates/components/products/description.html or a custom partial.
  3. Add tabindex="0" and aria-label="Product description" to the container element in that template.
  4. Open assets/scss/ (or assets/css/) and add a :focus outline rule for the container class.
  5. Click Save & Apply, then use the Preview tool and keyboard Tab to confirm focus lands on the element.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix scrollable region focusable on Wix
  1. Open the Wix Editor for your site.
  2. Click the scrollable element (e.g. a Text Box or Container set to scroll), then click the Settings (gear) icon.
  3. In the Accessibility panel (Settings → Accessibility), set the Tab Stop toggle to ON — this is Wix's equivalent of tabindex="0".
  4. Add an ARIA label in the same Accessibility panel under 'Label' or 'ARIA label'.
  5. If the scrollable region is a custom HTML element embedded via Wix's HTML iFrame widget, edit the HTML code inside the widget and add tabindex="0" aria-label="..." directly to the scrollable container.
  6. Publish and test with keyboard navigation.
Full Wix guide →Official Wix docs ↗
How to fix scrollable region focusable on Squarespace
  1. In the Squarespace Pages panel, open the page containing the scrollable block and click Edit.
  2. Click the scrollable content block to select it, then open its Block Settings.
  3. Squarespace does not expose tabindex via the GUI; you must use the Code Injection feature. Go to Settings → Advanced → Code Injection and add a small JavaScript snippet: document.querySelectorAll('.your-scrollable-class').forEach(el => { el.setAttribute('tabindex','0'); el.setAttribute('aria-label','Product description'); });
  4. Add a CSS rule via Design → Custom CSS: .your-scrollable-class:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
  5. Replace .your-scrollable-class with the actual CSS class visible in browser DevTools.
  6. Save and verify with keyboard Tab navigation.
Full Squarespace guide →Official Squarespace docs ↗
How to fix scrollable region focusable on Webflow
  1. Open your project in the Webflow Designer and select the scrollable Div Block or Section.
  2. In the right-hand Settings panel (the gear icon), find the 'Custom Attributes' section at the bottom.
  3. Click the + button and add attribute Name: tabindex, Value: 0.
  4. Add a second attribute: Name: aria-label, Value: Product description (or appropriate label).
  5. Open the Style panel and add a :focus state to the element with an outline (e.g. 2px solid #005fcc).
  6. Publish the site and test keyboard navigation to confirm Tab reaches the element.
Full Webflow guide →Official Webflow docs ↗
How to fix scrollable region focusable on Adobe Commerce (Magento)
  1. In your theme directory (app/design/frontend/<Vendor>/<theme>/), locate the relevant .phtml template — commonly Magento_Catalog/templates/product/view/description.phtml.
  2. Find the container div that wraps the scrollable content and add tabindex="0" aria-label="Product description" to its opening tag.
  3. Add a focus CSS rule in your theme's web/css/source/ Less/CSS file: .product.description:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
  4. Run bin/magento setup:static-content:deploy and bin/magento cache:clean to apply changes.
  5. Verify in a browser using keyboard Tab navigation.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find scrollable region focusable — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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.

Why does scrollable region focusable matter?

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.

How do I fix scrollable region focusable?

Make every scrollable region on your store reachable and operable by keyboard by adding tabindex="0" (or placing focusable content inside it) so users who cannot use a mouse can scroll it.

Authoritative references

Related Accessibility (WCAG) issues