How to fix button name on Squarespace

Steps for Squarespace

1. 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.
2. 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.
3. Alternatively, for page-specific buttons, use a Code Block (Insert Point → Code) and write the button in raw HTML with the aria-label included.
4. 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).
5. 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.
6. Test with VoiceOver or NVDA after publishing to verify the injected labels are announced.

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.

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.

See the complete Button name guide for every platform and the full background.