Button name
Moderate effortFound on 41% of audited stores.
Add a descriptive, screen-reader-accessible name to every button on your site so assistive technology users know what each button does.
What it is
Every button on a webpage must have an "accessible name" — a short piece of text that describes what the button does. This name is what screen readers announce aloud when a blind or low-vision user navigates to that button. An accessible name can come from visible text inside the button (e.g. "Add to Cart"), an `aria-label` attribute, or a linked text element. When a button has no accessible name — for example it contains only an icon or an image with no alt text — screen readers may announce it as simply "button," leaving users with no idea what it does. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires all interactive controls to have a programmatically determinable name.
Why it matters
Screen reader users — a significant and growing segment of online shoppers — cannot use your store if they cannot identify your buttons. A "Search," "Add to Cart," or "Checkout" button with no accessible name is effectively invisible to them, directly costing you sales and customers. Beyond conversions, accessibility failures like this create real legal exposure: lawsuits under the ADA (US), the European Accessibility Act (EU), and equivalent laws worldwide increasingly target e-commerce stores. Google also uses accessibility signals as a proxy for page quality, so fixing these issues can contribute positively to your organic search rankings and Core Web Vitals scores. Fixing unnamed buttons is one of the highest-impact, lowest-effort accessibility improvements you can make.
How to fix it
- Identify every button that has no visible text — common offenders are icon buttons (hamburger menu, search icon, close/X, social share, cart icon, slider arrows, and quantity +/– controls).
- For buttons that already have visible text inside them, ensure that text is real HTML text (not an image of text) and is not hidden from screen readers with aria-hidden or display:none.
- For icon-only buttons (SVG or image icons with no label), add an aria-label attribute directly on the <button> element describing its action, e.g. aria-label="Search products" or aria-label="Close menu".
- If the button's label already exists as visible text elsewhere on the page (e.g. a tooltip or a nearby heading), use aria-labelledby pointing to that element's id instead of duplicating text.
- For icon images inside buttons, add a descriptive alt attribute to the <img> tag (e.g. alt="Add to wishlist") OR add aria-label to the button itself and set alt="" on the image to avoid double-reading.
- After making changes, test with a free screen reader (NVDA + Firefox on Windows, VoiceOver + Safari on Mac/iOS) by tabbing to each button and confirming the announced name is clear and descriptive, then re-run your accessibility scanner to confirm the button-name rule passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix button name on Shopify
- In your Shopify Admin, go to Online Store → Themes → click the '…' menu next to your active theme → Edit code.
- Locate the template or snippet file containing the offending button. Common files: sections/header.liquid (hamburger/search/cart icons), snippets/product-form.liquid or sections/main-product.liquid (Add to Cart, quantity buttons), snippets/icon-*.liquid (reusable icon includes).
- For icon-only buttons, add aria-label directly to the <button> tag. Example: change <button class="search-toggle"> to <button class="search-toggle" aria-label="Open search">.
- If your theme uses SVG icons inline, add aria-hidden="true" to the <svg> element and rely on the button's aria-label for the name, preventing double-reading.
- For quantity +/– buttons, find the input stepper markup and add aria-label="Increase quantity" / aria-label="Decrease quantity" to each button.
- Save the file, preview the theme, and test with VoiceOver (Mac) or NVDA (Windows) to confirm each button announces correctly. You can also install the free 'Accessibility Checker' app from the Shopify App Store for ongoing monitoring.
How to fix button name on WooCommerce
- In WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP to avoid losing changes on theme updates).
- Locate the template responsible for the button: single-product.php or woocommerce/templates/single-product/add-to-cart/ for product buttons; header.php or your theme's header partial for nav icon buttons.
- Add aria-label attributes to icon-only <button> elements. For WooCommerce core buttons (e.g. the cart icon widget), use a filter hook in your child theme's functions.php to modify output rather than editing plugin files directly.
- To modify WooCommerce's own button markup, copy the relevant template from wp-content/plugins/woocommerce/templates/ into wp-content/themes/your-child-theme/woocommerce/ (matching the folder structure) and edit the copy.
- For third-party slider or gallery plugins (Swiper, Slick) that render unlabelled prev/next arrows, configure their accessibility options in the plugin settings, or add aria-label via the plugin's button customization fields.
- Install the free 'WP Accessibility' plugin (by Joe Dolson) — it automatically adds aria-labels to some common WordPress patterns and provides a framework for further fixes.
How to fix button name on BigCommerce
- In BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme → then Advanced → Edit Theme Files (opens the Stencil theme editor / WebDAV access).
- Locate the Handlebars template files containing offending buttons. Common locations: templates/components/common/header.html (nav/cart/search icons), templates/components/products/add-to-cart.html (product buttons), templates/components/carousel/ (slider arrows).
- Add aria-label attributes to icon-only <button> elements in these templates.
- If you use Page Builder widgets, edit the widget's HTML in Storefront → Page Builder, select the element containing the button, switch to HTML/Custom Code view, and add the aria-label there.
- Commit and push changes via Stencil CLI (stencil push) or save via the Theme Editor, then test with a screen reader.
- Re-run an accessibility scan (e.g. axe DevTools browser extension) to confirm the button-name violations are resolved.
How to fix button name on Wix
- Open the Wix Editor for your site. Click on the icon button or element you need to fix.
- In the element's settings panel, look for 'Settings' → 'Accessibility' or the 'Accessible Name' field that Wix exposes for buttons and interactive elements. Enter a clear, descriptive label (e.g. 'Open navigation menu').
- For Wix stores, go to the store's product page in the Editor, click on the Add to Cart or other store buttons, open Settings, and check the Accessibility/ARIA label field.
- If the button is inside a Wix App or block that does not expose an accessibility label field, report it via Wix Support — some app elements cannot be customized directly. As a workaround, replace the icon button with a text button where possible.
- For custom HTML embedded via Wix's HTML iframe embed widget, edit your custom code directly in the widget's HTML editor and add the aria-label attribute to the button markup.
- Preview the site and test with a screen reader to confirm the label is announced correctly.
How to fix button name on Squarespace
- In the Squarespace Editor, go to Pages → select the page, then click Edit. For site-wide elements like the navigation or cart button, go to Design → Site Styles or the Header/Footer settings.
- Squarespace does not expose aria-label fields in its visual editor. To add aria-labels to icon buttons, inject custom code: go to Settings → Advanced → Code Injection (available on Business plan and above) and add a JavaScript snippet that programmatically sets aria-label on the target buttons after the page loads.
- Alternatively, for page-specific buttons, use a Code Block (Insert Point → Code) and write the button in raw HTML with the aria-label included.
- For the cart icon, search icon, and hamburger menu (rendered by Squarespace's system), use Code Injection to run a small script: document.querySelector('.header-burger-btn').setAttribute('aria-label', 'Open menu'); — adapt the CSS selector to match your template's actual class names (inspect with browser DevTools).
- If you have a Developer-mode-enabled (version 7.0) template, edit the template files directly via the Template Editor to add aria-label attributes in the source markup.
- Test with VoiceOver or NVDA after publishing to verify the injected labels are announced.
How to fix button name on Webflow
- In the Webflow Designer, select the button element on the canvas that is missing a label.
- In the right-hand Settings panel (the gear icon), find the 'Accessibility' section. In the 'Aria Label' field, type a clear, descriptive name for the button (e.g. 'Close dialog' or 'Open search').
- For Navbar components (hamburger menu button), click the Navbar element, then open its Settings → find the Menu Button and set its Aria Label in the same Accessibility section.
- For CMS-driven buttons where the label should be dynamic (e.g. 'Add [product name] to cart'), bind the Aria Label field to a CMS field using Webflow's dynamic binding (click the purple database icon next to the Aria Label input and connect it to the appropriate CMS field).
- For e-commerce Add to Cart buttons, select the button inside the Product element, open Settings → Accessibility, and set the Aria Label or bind it dynamically.
- Publish the site and test with a screen reader or the axe DevTools browser extension to confirm no button-name violations remain.
How to fix button name on Adobe Commerce (Magento)
- Identify the offending button in your theme's template files. In your custom theme directory (app/design/frontend/Vendor/ThemeName/), locate the relevant .phtml template — e.g. Magento_Catalog/templates/product/view/addtocart.phtml for Add to Cart, or Magento_Theme/templates/html/header.phtml for header icons.
- Open the template file and add aria-label attributes to any icon-only <button> elements. Example: <button type="button" class="action search" aria-label="Search">.
- For buttons rendered by JavaScript UI components (e.g. KnockoutJS-bound elements), locate the corresponding HTML template in the module's web/template/ directory and add the aria-label there.
- After editing, run bin/magento cache:clean and bin/magento setup:static-content:deploy to apply changes.
- For third-party module buttons you cannot edit directly, create a layout XML override or a plugin/observer to modify the block's template output.
- Test on your staging environment with a screen reader and the axe DevTools extension before deploying to production.
How to fix button name on Shopify Plus
- Same as Shopify above; additionally check any custom checkout.liquid (available on Plus) for unnamed icon buttons in the checkout header or upsell sections.
- For headless / Hydrogen storefronts, locate the relevant .jsx/.tsx component (e.g. CartIcon.jsx) and add aria-label to the <button> element in JSX.
How to fix button name on Wix Studio
- Open your project in Wix Studio. Select the button component on the canvas.
- In the Properties panel on the right, look for the 'Accessibility' section and enter a descriptive label in the 'ARIA Label' field.
- If editing a custom-coded section, open the code panel and add aria-label="Descriptive name" directly in the JSX or HTML of the component.
- Use Velo (the Wix dev environment) for dynamic buttons: e.g. $w('#myButton').setAttribute('aria-label', 'Open cart');
- Publish and validate with the axe browser extension.
How to fix button name on Magento Open Source
- Follow the same steps as Adobe Commerce above — template paths and cache-clearing commands are identical for Magento Open Source.
How to fix button name on PrestaShop
- In your theme directory (themes/<your-theme>/templates/), locate the relevant .tpl file (e.g. _partials/header.tpl, catalog/product.tpl).
- Find the <button> element and add aria-label="{l s='Descriptive name' d='Shop.Theme'}" using PrestaShop's translation helper.
- Clear the PrestaShop cache under Advanced Parameters → Performance → Clear Cache, then verify with axe DevTools.
How to fix button name on OpenCart
- Navigate to your theme folder: catalog/view/theme/<your-theme>/template/. Open the relevant .twig or .tpl file (e.g. common/header.twig, product/product.twig).
- Locate the <button> element and add aria-label="Descriptive name" to the tag.
- Save, refresh the store cache if applicable, and verify with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find button name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Button name?
Every button on a webpage must have an "accessible name" — a short piece of text that describes what the button does. This name is what screen readers announce aloud when a blind or low-vision user navigates to that button. An accessible name can come from visible text inside the button (e.g. "Add to Cart"), an `aria-label` attribute, or a linked text element. When a button has no accessible name — for example it contains only an icon or an image with no alt text — screen readers may announce it as simply "button," leaving users with no idea what it does. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires all interactive controls to have a programmatically determinable name.
Why does button name matter?
Screen reader users — a significant and growing segment of online shoppers — cannot use your store if they cannot identify your buttons. A "Search," "Add to Cart," or "Checkout" button with no accessible name is effectively invisible to them, directly costing you sales and customers. Beyond conversions, accessibility failures like this create real legal exposure: lawsuits under the ADA (US), the European Accessibility Act (EU), and equivalent laws worldwide increasingly target e-commerce stores. Google also uses accessibility signals as a proxy for page quality, so fixing these issues can contribute positively to your organic search rankings and Core Web Vitals scores. Fixing unnamed buttons is one of the highest-impact, lowest-effort accessibility improvements you can make.
How do I fix button name?
Add a descriptive, screen-reader-accessible name to every button on your site so assistive technology users know what each button does.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN