How to fix scrollable region focusable on Webflow

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.

Steps for Webflow

  1. Open the Webflow Designer for the relevant page.
  2. Select the Div Block or element that has overflow set to Scroll or Auto (found in the Style panel → Overflow).
  3. 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'].
  4. In the Style panel, add a :focus state and set an Outline (e.g. 2px solid #005fcc) so sighted keyboard users see focus.
  5. Publish the site and test by pressing Tab to reach the element, then arrow keys to scroll.
Official Webflow documentation ↗

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.

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.

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

Not sure if your Webflow store has this?

Run a free SEOLZ scan — we’ll find scrollable region focusable and every other issue across your whole site.

Scan my site free

Fix scrollable region focusable on another platform