Skip to content
Pandus
en Change language
Menu

WCAG A/AA requirement Priority: Critical

Some buttons have no name

Some buttons have no readable label, for example an icon-only "add to cart", search or menu button.

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

Why it matters to your customers

Screen reader and voice control users cannot tell which button adds to cart, opens the menu or submits the search. This can stop them from buying at all.

Who is affected

  • blind customers
  • screen reader users
  • voice control users

How to fix it

Give every button a name: visible text, aria-label, or aria-labelledby pointing to visible text. Icon-only buttons need an aria-label such as "Add to cart" or "Close". Do not rely on title attributes or CSS-only icons.

On Shopify

Usually icon buttons in the theme (menu, search, quantity, close) or buttons injected by apps. Add labels in the theme's Liquid snippets; ask app developers to fix buttons their apps add.

On Shoptet (CZ)

Usually icon buttons in the template. Check whether the template has a newer version with labels; otherwise ask Shoptet or a partner to change the template code.

On PrestaShop

Usually icon buttons in the theme or modules (cart, search, menu). Add aria-label in the theme's .tpl templates or overridden module templates.

On WooCommerce

Common in themes, page builders and cart or wishlist plugins. Add labels in the child-theme templates or plugin settings; report plugin buttons without names to the plugin author.

Standards

Standards
StandardClause
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Automated check: axe-core rule button-name. dequeuniversity.com, github.com, www.w3.org

Related checks

All rules we check