See plans and pricing

When a section of a page scrolls independently from the rest of the page (a long product description box, a scrolling cart line-item list, or an overflow menu), keyboard-only users need a way to move focus into that region and scroll it with the arrow keys or Page Up/Down. If nothing inside the region and the region itself can ever receive focus, a keyboard user cannot reach that content at all.

How to fix it

1. Find a container with a fixed height and overflow: auto or overflow: scroll — common for a scrollable product-description box, a mini scrollable cart-items list, or a long overflow dropdown menu.
2. If the scrollable container has no focusable descendant (no links, buttons, or inputs inside it), add tabindex="0" directly to the scrollable element itself so keyboard users can Tab to it and then use arrow keys to scroll.
3. If the container does contain focusable descendants (e.g. links to each cart line item), tabindex="0" on the outer container is not required, but confirm at least one of those descendants is reachable by keyboard and that scrolling still works when it has focus.
4. Add a visible focus style (e.g. a CSS outline) to the scrollable container when tabindex="0" is used, so sighted keyboard users can see where focus landed.
5. Test by clicking into the page body, pressing Tab until focus reaches the scrollable region, then using arrow keys or Page Down to confirm the region scrolls.

<div class="product-description" style="height:150px; overflow:auto;">
  <p>Long product description text that overflows the fixed-height box...</p>
</div>

<div class="product-description" tabindex="0" style="height:150px; overflow:auto;">
  <p>Long product description text that overflows the fixed-height box...</p>
</div>

View the full rule reference from Deque University

See plans and pricing