I'm building VibeFix.
Picture a link that looks fine on screen: a small cart icon in the corner of your header. If that link has no text behind it, a screen reader has no name to read out for it. The visitor can tell something is there, but not what it does.
19 of the 24 Shopify homepages we checked on 10 Nov had a link a screen reader can't read out. Keep the limits in mind: that was one automated check, on the homepage only, on 10 Nov, and the stores were not a random sample. They were picked because an earlier check had found issues. So this says nothing about Shopify stores in general.
What the rule checks
The axe rule is called "link-name". Deque's page for it says: "Link text and alternate text for images, when used as links, must be discernible by a screen reader". In plain words, every link needs a name that software can read.
Two WCAG criteria sit behind it, both Level A. Criterion 2.4.4 (Link Purpose, In Context) says: "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context". Criterion 4.1.2 (Name, Role, Value) says that for all user interface components, "including but not limited to: form elements, links and components generated by scripts", "the name and role can be programmatically determined".
Why it matters: the W3C says the point of 2.4.4 is "to help users understand the purpose of each link so they can decide whether they want to follow the link." A link with no name gives the visitor nothing to decide with.
Common places to look
I can't tell you how often each of these happens. These are simply the spots worth checking first on a store homepage:
- Icon-only links in the header: cart, search, account.
- Social icons in the footer, where each icon is a link.
- Images that are links, such as a logo or a collection tile, where the image has no alt text.
- Slides and banners where the whole picture is one link and no text says where it goes.
Find them yourself
- Install a free tool: axe DevTools or WAVE. Both are browser extensions.
- Open your homepage and run a scan.
- Look for a finding about links that need discernible text (axe) or an "Empty link" (WAVE).
- Click each result. The tool highlights the link on the page.
A scan only finds links with no name at all. It can't tell you whether a name like "click here" is a good one. That part is a human check.
Fix it in your theme
First, do the work on a copy. Shopify's help page says you can "duplicate your theme in your store and customize the duplicate." It also suggests making a backup copy "so that you can discard your changes." Edit the copy, check it, then publish it when you are happy. The steps are in Shopify's guide to duplicating themes.
Then pick the fix that fits the link.
1. Add visible text. The simplest option. A cart link that says "Cart" works for everyone.
2. Add visually hidden text. Keep the icon, and add text that only assistive tools read. Shopify's Dawn theme does this for its cart icon. The link holds an icon and this span: <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>. Dawn's CSS defines that class with rules such as position: absolute !important;, overflow: hidden;, width: 1px; and height: 1px;. Your theme may use the same class or a similar one, so search your theme files for "visually-hidden" before adding your own.
3. Add an aria-label to the link. For example, <a href="/cart" aria-label="Cart">. This gives the link a name without changing how it looks. Keep the label short and make it say where the link goes.
4. Add alt text to a linked image. When an image is the link, its alt text becomes the link's name. Say where the link goes, not what the picture looks like. We wrote a step-by-step guide: how to add alt text in Shopify.
Use the visually hidden class rather than hiding the text completely: text hidden with display: none is hidden from screen readers too.
After the change, run the scan again and see whether the finding is gone. Then tab through the header with your keyboard, and listen with a screen reader if you can. A clean scan is not the same as a good experience.
Where our check fits
We built a free, automated, read-only check of a store's public homepage. It tests only what software can test of WCAG 2.0 and 2.1, Levels A and AA. It doesn't test the newer WCAG 2.2 criteria, such as target size. If you want to see how the free options compare, we wrote a comparison of free Shopify accessibility checkers.
If you would rather not edit the theme yourself, you can see what the VibeFix AI agent does for stores at vibe-fixer.com/stores.
Nothing here is legal advice, and no scan can tell you whether your store meets a law. Fixing empty links is one concrete step that makes the homepage easier to use with a screen reader.
Top comments (1)
Useful, and stating the limits (one check, homepage only, not a random sample) keeps the number honest. One related spot for stores: product images used as links in collection tiles and product grids. When the image is the link, its alt text becomes the link name, and many themes leave it empty or fill it with the file name, so a screen reader reads something like IMG_4032.jpg. A quick pass is to open one product grid and check that each tile's alt text names the product, and that the same tile does not also carry a second empty link next to the title. It is the same fix as your point 4, just in the place where sellers add images most.