Fixing Keyboard on Webflow (WCAG 2.1.1)
Everything a customer can do with a mouse must also be possible with a keyboard alone.
Why it matters
This is the failure that ends a sale outright. If the size selector, the cart drawer or the payment step cannot be reached with Tab and operated with Enter or Space, the customer does not get a degraded experience — they get no way to buy at all. It affects far more people than screen reader users: anyone with a motor impairment, anyone using voice control or a switch device, and anyone whose trackpad has failed. Keyboard support is also what makes the rest of accessibility testable, so a keyboard failure usually indicates several others.
Webflow — where to look
Interactions-driven dropdowns and modals; custom code embeds.
What to do
Webflow's native Dropdown component handles keyboard interaction; a dropdown built manually out of Div Blocks and Interactions does not. Use the native component, or add focus handling and an Escape handler yourself.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.
How to verify the fix
- Unplug the mouse. Genuinely — do not just decide not to use it.
- From the top of a product page, complete a purchase using only Tab, Shift+Tab, Enter, Space and the arrow keys.
- Open the cart drawer and confirm focus moves into it, that Escape closes it, and that focus returns to the control that opened it.
- Tab through the whole page once and confirm focus never gets stuck in an embedded widget.
Other platforms
- Fixing Keyboard on Shopify
- Fixing Keyboard on WooCommerce
- Fixing Keyboard on Wix
- Fixing Keyboard on Squarespace
The full criterion
Read the full explanation of WCAG 2.1.1 Keyboard, or the formal W3C definition.