Fix empty buttons
Empty buttons have no accessible name, so assistive technology cannot say what they do.
Cart, menu and close controls are the usual cases, and they block the whole journey.
Steps
- Find buttons with no text.
- Add visible text or an aria-label that matches the action.
- Prefer visible text when the design allows it.
Failing example
A cart icon button with no name.
Better example
The button name is Cart.
Shopify
In the Shopify header section, add visually hidden text or an aria-label of Cart, Menu or Search on icon buttons. Do not leave an empty button tag.
WooCommerce
In the WooCommerce theme header, add screen-reader text inside the cart button. Quantity steppers need names too, such as Increase quantity.
WordPress
Name icon buttons in the theme or block. A button that only contains an SVG needs a text alternative.
Wix
In the Wix Editor set the accessible name on the icon button. Do not rely on the icon being obvious.