Aria command name
Moderate effortFound on 8% of audited stores.
Give every button, link, and menuitem a clear, accessible name so screen readers can announce what it does.
What it is
The `aria-command-name` rule flags interactive elements — specifically buttons (`role="button"`), links (`role="link"`), and menuitems (`role="menuitem"`) — that have no accessible name. An "accessible name" is the text a screen reader reads aloud when a user lands on that element. It can come from visible text inside the element, an `aria-label` attribute, an `aria-labelledby` attribute pointing to another element's text, or (for images used as buttons) a meaningful `alt` attribute. When none of those exist, the screen reader either reads nothing at all or reads something meaningless like the raw URL or a string of punctuation, leaving visually impaired shoppers completely in the dark about what the control does.
Why it matters
WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) is a Level AA requirement, meaning it is referenced in most accessibility laws worldwide — including the ADA (US), EN 301 549 (EU), AODA (Canada), and EAA (UK/Europe). Failing it exposes your store to legal complaints and demand letters that are increasingly common against ecommerce sites. Beyond legal risk, blind and low-vision shoppers using screen readers simply cannot use controls without accessible names — they cannot add items to a cart, navigate menus, or complete a purchase — directly costing you revenue and customers. Additionally, Google uses accessibility signals as one of many quality indicators, so a more accessible site can support better crawlability and user experience scores.
How to fix it
- Identify every flagged element: use your browser's DevTools Accessibility panel (Chrome: right-click element → Inspect → Accessibility tab) or the axe DevTools browser extension to find which buttons, links, or menuitems lack an accessible name.
- If the element has visible text inside it, ensure that text is not hidden with CSS (e.g., `display:none`, `visibility:hidden`, or `font-size:0`) — restoring visible text is the best fix because it helps all users, not just screen reader users.
- If the element is icon-only (e.g., a cart icon, a hamburger menu, a search magnifier, a social-media icon), add an `aria-label` attribute with a short, descriptive name that explains the action: e.g., `aria-label="Open cart"`, `aria-label="Main menu"`, `aria-label="Search products"`.
- If you prefer to use text that already exists elsewhere on the page, point to it with `aria-labelledby="id-of-that-text"` on the element.
- For icon images used as the sole content of a link or button, set a meaningful `alt` attribute on the `<img>` tag (e.g., `alt="Go to homepage"`) instead of leaving it empty or omitting it.
- Re-run the axe browser extension or your accessibility scanner after saving changes to confirm the rule no longer fires.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria command name on Shopify
- In your Shopify admin, go to Online Store → Themes → click 'Customize' on your active theme.
- To edit theme code directly: Online Store → Themes → Actions → Edit code.
- Locate the Liquid template or snippet that renders the offending element. Common culprits: `snippets/header.liquid`, `sections/header.liquid`, `snippets/cart-icon.liquid`, or `snippets/icon-*.liquid`.
- Find the `<button>`, `<a>`, or element with `role="button"` / `role="link"` / `role="menuitem"` that has no visible text.
- Add `aria-label="Descriptive action name"` directly to the HTML tag (e.g., `<button aria-label="Open cart">{% render 'icon-cart' %}</button>`).
- If the theme uses a visually-hidden helper class (common in Dawn and other Shopify themes), wrap a `<span class="visually-hidden">Open cart</span>` inside the button instead — this is even better as it is visible to all assistive technologies.
- Click Save, then re-test with the axe browser extension.
How to fix aria command name on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SFTP).
- Identify the template file rendering the flagged element: common files are `header.php`, `functions.php` partial includes, or block template HTML files in block-based themes.
- Find the `<button>`, `<a>`, or ARIA-role element without text.
- Add `aria-label="Descriptive action name"` to the tag, OR wrap the inner text/icon in `<span class="screen-reader-text">Label text</span>` — WooCommerce and most WP themes already include a `.screen-reader-text` CSS class that hides text visually but keeps it accessible.
- Alternatively, install the 'WP Accessibility' plugin (by Joe Dolson) which automatically adds accessible labels to common WooCommerce controls like cart and search buttons.
- Save, clear any caching plugins, and re-run axe to verify.
How to fix aria command name on BigCommerce
- In your BigCommerce control panel, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme (or download and edit locally via Stencil CLI).
- Navigate to the relevant Handlebars template — typically `templates/components/header/navigation.html`, `templates/components/cart/preview.html`, or `templates/components/common/mobile-menu-toggle.html`.
- Locate the `<button>`, `<a>`, or role-attributed element with no accessible name.
- Add `aria-label="Descriptive action name"` to the element tag, or add a `<span class="is-srOnly">Label</span>` inside it — BigCommerce Cornerstone theme ships with an `.is-srOnly` utility class for exactly this purpose.
- Save and push your changes; use the Stencil CLI `stencil start` to preview locally before pushing to production.
- Re-test using the axe browser extension.
How to fix aria command name on Wix
- Open your site in the Wix Editor (or Wix Studio Editor).
- Click the flagged element (button, icon, or link) to select it.
- In the panel on the left or in the element's settings, look for 'Accessibility' or 'Settings' → 'Accessible Label' / 'ARIA Label' field — Wix exposes this for buttons and links in the Editor.
- Type a short, descriptive label (e.g., 'Open navigation menu') in that field.
- If the option is not visible in the visual editor, switch to 'Dev Mode' (Wix Editor: turn on Dev Mode via the top bar) and add `aria-label` directly in the element's properties panel or in the Velo (JavaScript) code for that element: `$w('#myButton').setAttribute('aria-label', 'Open cart');`
- Publish the site and re-test with axe.
How to fix aria command name on Squarespace
- Log in to your Squarespace account and go to Website → Pages or Design → Custom CSS.
- For icon-only buttons built with Squarespace blocks (e.g., social icons, navigation buttons), Squarespace auto-generates some labels but may miss custom icon blocks.
- Go to Pages → select the page → click Edit → click the flagged block/element → open its block settings and fill in the 'Description', 'Alt text', or 'Button label' field if available.
- For site-wide elements like the cart icon or mobile nav toggle that are part of the theme and not directly editable in the block editor, go to Design → Custom CSS and inject a CSS-based visually-hidden label workaround, OR use Settings → Advanced → Code Injection to add a small JavaScript snippet that sets `aria-label` on those elements after the page loads (see code snippet below).
- Re-publish and test with axe to confirm the label appears.
How to fix aria command name on Webflow
- Open your Webflow project in the Designer.
- Select the flagged element (button, link block, or navbar toggle) in the canvas or Navigator panel.
- In the right-hand Settings panel (the gear icon), scroll to the 'Accessibility' section.
- In the 'Label (aria-label)' field, type the descriptive name for the element (e.g., 'Open mobile menu', 'View shopping cart').
- For link blocks wrapping an SVG or image icon, also set the 'Alt text' on the image element inside the link, or add a visually-hidden text element: add a Text element inside the link block, give it the class `sr-only`, then define `.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }` in your global CSS.
- Publish and re-test with axe.
How to fix aria command name on Adobe Commerce (Magento)
- SSH into your server or open your code editor and navigate to your active theme directory: `app/design/frontend/<Vendor>/<theme>/`.
- Identify the PHTML or XML layout file responsible for the flagged element — common locations: `Magento_Theme/templates/html/header.phtml`, `Magento_Checkout/templates/cart/minicart.phtml`, or `Magento_Theme/templates/html/topmenu.phtml`.
- Open the file and find the `<button>`, `<a>`, or element with an ARIA role that has no accessible text.
- Add `aria-label="<?= $escaper->escapeHtmlAttr(__('Descriptive action name')) ?>"` to the element (always use the escaper and translation helper for Magento templates).
- Alternatively, add a `<span class="sr-only">` (define the utility class in your theme's CSS) inside the element.
- Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy`, then re-test with axe.
How to fix aria command name on Shopify Plus
- Follow the same Liquid code-editing steps as Shopify above; Shopify Plus gives you the same theme code editor plus access to checkout.liquid.
- For unlabelled elements specifically inside the checkout (e.g. remove-item buttons), edit checkout.liquid (available only on Shopify Plus) and add the appropriate aria-label attributes.
- Use Shopify's Accessibility app or a third-party accessibility overlay audit to surface remaining issues after editing.
How to fix aria command name on Magento Open Source
- Follow the same theme-override and template-editing steps as Adobe Commerce (Magento) above.
- Locate the relevant .phtml or Knockout .html template, copy it to your custom theme, add `aria-label` (and `aria-hidden="true"` on decorative SVGs), flush cache, and re-deploy static content.
How to fix aria command name on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → Your current theme and use the theme editor or FTP/file manager to access theme templates.
- Locate the relevant .tpl (Smarty) file (e.g., themes/your-theme/templates/_partials/header.tpl or cart-summary.tpl).
- Find the unlabelled `<button>` or `<a>` and add `aria-label="Descriptive action"`. For SVG icons, add `aria-hidden="true"`.
- Clear the PrestaShop cache (Advanced Parameters → Performance → Clear cache) and verify on the front end with axe DevTools.
How to fix aria command name on Drupal
- In Drupal admin, go to Appearance and identify your active theme.
- In your custom or sub-theme, locate the Twig template file responsible for the unlabelled element (e.g., button.html.twig, menu.html.twig).
- Add `aria-label="{{ 'Descriptive action'|t }}"` to the element tag (using Drupal's translation function for internationalisation). Add `aria-hidden="true"` to decorative SVGs.
- Rebuild the Twig cache (Configuration → Development → Performance → Clear all caches, or `drush cr`) and verify with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find aria command name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria command name?
The `aria-command-name` rule flags interactive elements — specifically buttons (`role="button"`), links (`role="link"`), and menuitems (`role="menuitem"`) — that have no accessible name. An "accessible name" is the text a screen reader reads aloud when a user lands on that element. It can come from visible text inside the element, an `aria-label` attribute, an `aria-labelledby` attribute pointing to another element's text, or (for images used as buttons) a meaningful `alt` attribute. When none of those exist, the screen reader either reads nothing at all or reads something meaningless like the raw URL or a string of punctuation, leaving visually impaired shoppers completely in the dark about what the control does.
Why does aria command name matter?
WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) is a Level AA requirement, meaning it is referenced in most accessibility laws worldwide — including the ADA (US), EN 301 549 (EU), AODA (Canada), and EAA (UK/Europe). Failing it exposes your store to legal complaints and demand letters that are increasingly common against ecommerce sites. Beyond legal risk, blind and low-vision shoppers using screen readers simply cannot use controls without accessible names — they cannot add items to a cart, navigate menus, or complete a purchase — directly costing you revenue and customers. Additionally, Google uses accessibility signals as one of many quality indicators, so a more accessible site can support better crawlability and user experience scores.
How do I fix aria command name?
Give every button, link, and menuitem a clear, accessible name so screen readers can announce what it does.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN