Skip to content
Pandus
en Change language
Menu

WCAG A/AA requirement Priority: Serious

Some scrollable areas cannot be used with a keyboard

Some boxes on the page scroll, but keyboard users cannot move into them to scroll.

This text was translated automatically and has not been reviewed by a native speaker yet.

Why it matters to your customers

People who use a keyboard instead of a mouse cannot read the rest of a size table, delivery terms or a filter list, so they miss information or options.

Who is affected

  • keyboard users
  • people with motor disabilities
  • screen reader users

How to fix it

Make each scrollable region reachable by keyboard: add tabindex="0" with an accessible name (aria-label) and a suitable role, or make sure it contains a focusable element. Better: avoid small scroll boxes for important content.

On Shopify

Usually tables, tabs, filter lists or app widgets in the theme. Add tabindex and a label in the theme's Liquid sections, or avoid fixed-height scroll boxes in CSS.

On Shoptet (CZ)

Usually tables or text boxes in the template or content. Avoid fixed-height boxes in your content; report template issues to Shoptet or a partner.

On PrestaShop

Usually product tabs, tables or faceted search lists. Fix it in the theme's .tpl templates or CSS.

On WooCommerce

Usually tables, tabs or widgets from the theme or plugins. Fix it in child-theme templates or CSS, or report it to the plugin author.

Standards

Standards
StandardClause
WCAG 2.2 2.1.1 (A) Keyboard
WCAG 2.2 2.1.3 (AAA) Keyboard (No Exception)
WCAG 2.1 2.1.1 (A) Keyboard
WCAG 2.1 2.1.3 (AAA) Keyboard (No Exception)
WCAG 2.0 2.1.1 (A) Keyboard
WCAG 2.0 2.1.3 (AAA) Keyboard (No Exception)
EN 301 549 4.1.1 9.2.1.1
EN 301 549 3.2.1 9.2.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.2.1.1

Automated check: axe-core rule scrollable-region-focusable. dequeuniversity.com, github.com, www.w3.org, www.w3.org, www.etsi.org

Related checks

All rules we check