WCAG 2.1.1: Keyboard

WCAG 2.1.1 Keyboard is a level A success criterion from WCAG 2.0. All functionality should be operable through a keyboard, except where the path cannot be done from a keyboard at all, such as freehand drawing.

People who cannot use a mouse, including many screen-reader users, cannot buy if a control is click-only.

How to test

Put the mouse aside. Tab through the menu, the product options and the cart. Every action should work with Enter or Space.

How to fix

Use links and buttons. Add a keyboard handler if a custom widget must stay.

Example that fails

The mobile menu opens only on a click event on a div.

Example that passes the check

The menu button is a button and the items are links.

Shopify

In the header section, the menu toggle must be a button and the items must be anchors. Do not use a click-only div.

WooCommerce

Theme mobile menus should use button and a elements. Custom mega menus need key handlers.

WordPress

Build menus with the navigation block so items are links.

Wix

Use the menu element, not shapes with click actions.

Related fixes