MediumNavigationMeasured

Icon buttons and links screen readers can’t name

Icon-only buttons and links, such as the cart, search, menu or slider arrows, have no label, so a screen reader announces them only as “button” or “link”.

Checked on: every page the audit scans · Zolvio’s check: “Buttons and links screen readers can't name”

Why it costs you sales

Blind and low-vision shoppers browse with a screen reader, which reads out each button’s and link’s name. An icon with no text or label behind it is read as just “button” or “link”, so they can’t tell which one opens the cart, the menu or search.

The WCAG accessibility guidelines ask that every button and link has a name that says what it does (success criteria 4.1.2 and 2.4.4). A label isn’t shown on screen, so adding one doesn’t change how the store looks.

How Zolvio detects it

On every page it scans, at desktop size (1,440 pixels wide) and at 375 pixels wide, Zolvio finds the buttons and links a shopper can see that have no text, label, title or image text: any link or button in the header and the menus (such as the cart, search, account and menu icons), and the buttons of the product section (quantity, swatches, gallery), of the cart (quantity and remove) and of sliders (arrows and dots). The footer isn’t checked. Chrome’s accessibility tree then decides: a control is flagged when the name Chrome gives it, the one a screen reader announces, is empty or only an icon font’s symbol.

Each control is reported once, on the first page that shows it: the header’s on the homepage, a product section’s on the first product page. The finding lists each one (up to ten) with where it is, the icon it shows and its code.

A store using an accessibility overlay app (such as accessiBe, UserWay or AudioEye) isn’t judged, since the app labels controls with its own script, which the audit’s browser doesn’t load. Neither are slider arrows and dots on a page that requests files from public code libraries (such as jsDelivr, unpkg or cdnjs): a slider library loaded from one usually names them in a shopper’s browser.

This finding is reported after AI review: on paid plans with AI turned on, the AI agent checks it against the audit’s evidence before it reaches your issue list. Audits without AI report only the 22 measured checks.

How to fix it

  1. In Online Store → Themes → Edit code, find each control the finding lists: search the theme’s sections and snippets for its class name.
  2. Give it a label that says what it does, such as aria-label="Open cart", or visually hidden text inside it; for a linked image, give the image alt text.
  3. For controls an app adds, ask the app’s developer to label them.
  4. Check with your phone’s screen reader (VoiceOver on iPhone, TalkBack on Android): each control should be read out by its name.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Icon buttons and links screen readers can’t name” cost a Shopify store sales?

Blind and low-vision shoppers browse with a screen reader, which reads out each button’s and link’s name. An icon with no text or label behind it is read as just “button” or “link”, so they can’t tell which one opens the cart, the menu or search. The WCAG accessibility guidelines ask that every button and link has a name that says what it does (success criteria 4.1.2 and 2.4.4). A label isn’t shown on screen, so adding one doesn’t change how the store looks.

How does Zolvio detect “Icon buttons and links screen readers can’t name”?

On every page it scans, at desktop size (1,440 pixels wide) and at 375 pixels wide, Zolvio finds the buttons and links a shopper can see that have no text, label, title or image text: any link or button in the header and the menus (such as the cart, search, account and menu icons), and the buttons of the product section (quantity, swatches, gallery), of the cart (quantity and remove) and of sliders (arrows and dots). The footer isn’t checked. Chrome’s accessibility tree then decides: a control is flagged when the name Chrome gives it, the one a screen reader announces, is empty or only an icon font’s symbol. Each control is reported once, on the first page that shows it: the header’s on the homepage, a product section’s on the first product page. The finding lists each one (up to ten) with where it is, the icon it shows and its code. A store using an accessibility overlay app (such as accessiBe, UserWay or AudioEye) isn’t judged, since the app labels controls with its own script, which the audit’s browser doesn’t load. Neither are slider arrows and dots on a page that requests files from public code libraries (such as jsDelivr, unpkg or cdnjs): a slider library loaded from one usually names them in a shopper’s browser.

How do I fix “Icon buttons and links screen readers can’t name” on Shopify?

In Online Store → Themes → Edit code, find each control the finding lists: search the theme’s sections and snippets for its class name. Give it a label that says what it does, such as aria-label="Open cart", or visually hidden text inside it; for a linked image, give the image alt text. For controls an app adds, ask the app’s developer to label them. Check with your phone’s screen reader (VoiceOver on iPhone, TalkBack on Android): each control should be read out by its name.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Session recordings — Watch how real shoppers move through your store.