Scrollable region focusable
Quick winFound on 20% of audited stores.
Make every scrollable region on your site reachable by keyboard by adding tabindex="0" (or placing focusable content inside it) so keyboard and assistive-technology users can scroll it.
What it is
A "scrollable region" is any box on your page that shows a scrollbar — think a product description with a fixed height, a reviews panel, a custom dropdown list, or a map embed. When a visitor uses only a keyboard (Tab key) to navigate, they must be able to move focus into that box so they can scroll through its content. If the box itself is not reachable by keyboard, or contains no focusable element (like a link or button) that would pull focus inside it, the content is effectively hidden from anyone who cannot use a mouse. WCAG Success Criterion 2.1.1 (Keyboard) requires that all functionality — including scrolling to read content — is operable without a mouse.
Why it matters
Keyboard accessibility directly affects an estimated 7–26 % of users who rely on keyboards, switch devices, or screen readers to navigate the web. If those users cannot reach a scrollable product description, image gallery, or terms-of-service box, they cannot read critical information that may influence a purchase — leading to lost conversions and abandoned carts. More importantly, WCAG 2.1 Level AA is referenced in accessibility laws including the ADA (US), the European Accessibility Act, and the UK Equality Act; failing this criterion exposes your business to legal complaints, lawsuits, and regulatory action. Accessibility auditors and automated scanners flag this issue, making it a liability that is easy to prove and hard to defend.
How to fix it
- Identify the scrollable element — any element in your HTML that has a CSS rule such as overflow: auto, overflow: scroll, overflow-x: scroll, or overflow-y: scroll combined with a fixed height or width.
- Check whether the element itself, or any child inside it, is naturally focusable (e.g. a link <a>, button, input, or textarea). If yes, and users can Tab into those children to trigger scrolling, no change is needed.
- If the scrollable element contains only non-interactive content (text, images, divs), add tabindex="0" directly to the scrollable element so keyboard users can Tab to it and then use arrow keys to scroll.
- Add a descriptive accessible name using aria-label (e.g. aria-label="Product description") so screen-reader users know what region they have focused.
- Optionally add a visible :focus style (e.g. outline: 2px solid #005fcc) to the element so sighted keyboard users can see when it is focused.
- Test the fix by pressing Tab until the element receives focus, then use the arrow keys or Page Down to confirm the content scrolls without a mouse.
Fix it on your platform
Pick your platform for the exact steps.
How to fix scrollable region focusable on Shopify
- In your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- Identify the template or section file that contains the scrollable element (e.g. sections/product-template.liquid for a product description, or snippets/reviews.liquid for a reviews panel).
- Locate the HTML tag that has overflow: scroll / overflow: auto in its inline style or in a CSS class, and add tabindex="0" and an aria-label attribute to that tag.
- Open Assets → theme.css (or your main stylesheet) and add a :focus rule for that element: .your-scrollable-class:focus { outline: 2px solid #005fcc; }
- Save the file, preview the theme, and verify with Tab-key navigation.
How to fix scrollable region focusable on WooCommerce
- In your WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SSH).
- Find the template part that renders the scrollable region — common locations: woocommerce/single-product/description.php, or your theme's page templates.
- Add tabindex="0" and aria-label="[Region name]" to the scrollable wrapper element in that template file.
- Add a CSS :focus rule in Appearance → Customize → Additional CSS (or your child theme's style.css): .scrollable-region:focus { outline: 2px solid #005fcc; }
- Alternatively, install a plugin like 'Accessibility Toolkit' or 'WP Accessibility' which can inject tabindex on configurable containers.
- Test with the Tab key and arrow keys in a browser to confirm scrolling works without a mouse.
How to fix scrollable region focusable on BigCommerce
- In your BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme → click Edit Theme Files (or use Theme Editor → Edit Code for Stencil themes).
- Locate the Handlebars template file containing the scrollable element (e.g. templates/components/products/description.html or a custom partial).
- Add tabindex="0" aria-label="Product description" to the scrollable wrapper element.
- Add a :focus CSS rule in assets/scss/ or assets/css/ for that element class.
- Push/save the change, then preview and test keyboard navigation on the storefront.
How to fix scrollable region focusable on Wix
- Open the Wix Editor for the relevant page.
- Click the scrollable element (e.g. a text box set to scroll, or a Repeater/Box with overflow scroll).
- In the right-hand panel, click the Accessibility icon (the person icon) or go to Settings → Accessibility, and set the Tab Stop / focusable option to enabled if available.
- For custom HTML widgets: click the element → Settings → open the HTML/CSS code pane, then add tabindex="0" and aria-label to the container tag.
- If the scrollable element is a Wix-native component with no accessibility panel, consider restructuring the content to avoid a non-interactive scroll container, or use a Wix Custom Element / Velo (Dev Mode) to inject the tabindex attribute via code.
- Preview the page and test with Tab-key navigation.
How to fix scrollable region focusable on Squarespace
- In Squarespace, go to Pages → select the relevant page → Edit.
- Click the scrollable content block. If it is a Code Block containing custom HTML, click Edit on the block and add tabindex="0" aria-label="[Region name]" to the scrollable element's HTML tag.
- For Squarespace-native blocks (e.g. a scrolling text section), inject a CSS override via Design → Custom CSS: .your-block-class { /* already has overflow:auto */ } .your-block-class:focus { outline: 2px solid #005fcc; } — and use a Code Injection (Settings → Advanced → Code Injection) with a small <script> snippet to add tabindex="0" to the element by its class or data attribute.
- Save and preview. Test keyboard navigation with Tab and arrow keys.
How to fix scrollable region focusable on Webflow
- Open the Webflow Designer for the relevant page.
- Select the Div Block or element that has overflow set to Scroll or Auto (found in the Style panel → Overflow).
- In the Element Settings panel (the gear icon on the right), scroll down to Custom Attributes and add: Name = tabindex, Value = 0 and Name = aria-label, Value = [Region name, e.g. 'Product description'].
- In the Style panel, add a :focus state and set an Outline (e.g. 2px solid #005fcc) so sighted keyboard users see focus.
- Publish the site and test by pressing Tab to reach the element, then arrow keys to scroll.
How to fix scrollable region focusable on Adobe Commerce (Magento)
- Locate the relevant PHTML or HTML template in your custom theme under app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/ (e.g. product/view/description.phtml) or the relevant module template.
- Add tabindex="0" and aria-label="Product description" to the scrollable wrapper element in the template file.
- In your theme's web/css/source/ directory, add a :focus rule for the scrollable class in the relevant .less file: .product-description:focus { outline: 2px solid #005fcc; }
- Run bin/magento setup:static-content:deploy and bin/magento cache:flush to apply the changes.
- Test in the browser with Tab-key and arrow-key navigation to confirm the region is reachable and scrollable.
Does your site have this issue?
Run a free SEOLZ scan to find scrollable region focusable — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Scrollable region focusable?
A "scrollable region" is any box on your page that shows a scrollbar — think a product description with a fixed height, a reviews panel, a custom dropdown list, or a map embed. When a visitor uses only a keyboard (Tab key) to navigate, they must be able to move focus into that box so they can scroll through its content. If the box itself is not reachable by keyboard, or contains no focusable element (like a link or button) that would pull focus inside it, the content is effectively hidden from anyone who cannot use a mouse. WCAG Success Criterion 2.1.1 (Keyboard) requires that all functionality — including scrolling to read content — is operable without a mouse.
Why does scrollable region focusable matter?
Keyboard accessibility directly affects an estimated 7–26 % of users who rely on keyboards, switch devices, or screen readers to navigate the web. If those users cannot reach a scrollable product description, image gallery, or terms-of-service box, they cannot read critical information that may influence a purchase — leading to lost conversions and abandoned carts. More importantly, WCAG 2.1 Level AA is referenced in accessibility laws including the ADA (US), the European Accessibility Act, and the UK Equality Act; failing this criterion exposes your business to legal complaints, lawsuits, and regulatory action. Accessibility auditors and automated scanners flag this issue, making it a liability that is easy to prove and hard to defend.
How do I fix scrollable region focusable?
Make every scrollable region on your site reachable by keyboard by adding tabindex="0" (or placing focusable content inside it) so keyboard and assistive-technology users can scroll it.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN