Link name

Quick win

Found on 69% of audited stores.

Add a descriptive, screen-reader-accessible text label to every link on your store so assistive technology can announce its purpose.

What it is

Every clickable link on a webpage must have a meaningful text label that screen readers can announce to blind or low-vision users. A "link-name" failure means a link exists on your page but has no readable text — it might be an icon-only button (like a shopping cart or social media icon), an image link with no alt text, or an empty `<a>` tag. The WCAG 2.4.4 criterion ("Link Purpose") requires that the purpose of each link can be determined from the link text alone, or from its immediate surrounding context. Without a name, a screen reader will announce something useless like "link" or read out the raw URL instead of telling the user where the link goes or what it does.

Why it matters

Accessibility failures like this expose your store to legal risk under laws such as the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK) — lawsuits targeting e-commerce sites for WCAG non-compliance have increased sharply year over year. Beyond legal risk, approximately 7–8 million screen reader users in the US alone cannot navigate or purchase from a store with unnamed links, directly costing you sales. Google's crawlers also use link anchor text as a ranking signal, so unnamed links pass zero topical relevance to the pages they point to, weakening your internal linking SEO. Fixing this is typically a quick-win code change that immediately improves both accessibility compliance and search engine crawlability.

How to fix it

  1. Identify every unnamed link: look for icon-only links (social media icons, cart icons, arrow buttons), image links, and empty anchor tags — these are the most common culprits.
  2. For text links that are empty or have only whitespace, add concise, descriptive visible text inside the <a> tag that explains the link destination or action (e.g. 'View Product Details' rather than 'Click here').
  3. For icon-only or image-only links, choose one of three approved methods: (a) add a visually-hidden span with descriptive text inside the link, (b) add an aria-label attribute directly on the <a> tag, or (c) if the link contains an <img>, add a meaningful alt attribute to that image.
  4. For SVG icon links, add aria-label to the <a> tag OR add a <title> element as the first child of the <svg> and set aria-labelledby on the <svg> pointing to that <title>'s id — and add aria-hidden='true' to decorative SVG paths.
  5. Verify the fix using a free tool: run axe DevTools browser extension, WAVE, or your platform's built-in accessibility checker — the link-name violation should clear. Also tab through the page with a keyboard and listen with a screen reader (NVDA on Windows, VoiceOver on Mac/iOS) to confirm the announced text makes sense in context.
  6. Audit all page templates (header, footer, product cards, blog listing, cart) — named link fixes must be applied at the template level, not just on one page, so every instance is resolved site-wide.

Fix it on your platform

Pick your platform for the exact steps.

How to fix link name on Shopify
  1. In your Shopify Admin, go to Online Store → Themes → and click 'Edit code' (or Customize → Edit code for theme 2.0 themes).
  2. The most common culprits are in 'sections/header.liquid' (nav/cart icon links), 'sections/footer.liquid' (social media icon links), and 'snippets/card-product.liquid' (product card image links).
  3. For icon-only links (e.g. cart, search, social icons), add an aria-label attribute: <a href='/cart' aria-label='Shopping cart'>…icon…</a>.
  4. For image links in product cards, locate the wrapping <a> tag around the product image and add aria-label='View [product title]' or ensure the inner <img> has a descriptive alt='{{ product.title }}' attribute.
  5. For social media icon links in the footer, add aria-label matching the network name: <a href='{{ settings.social_instagram_link }}' aria-label='Follow us on Instagram' target='_blank'>.
  6. Save each file, then use the Shopify Theme Preview to tab through the page and confirm announced link names make sense.
Full Shopify guide →Official Shopify docs ↗
How to fix link name on Shopify Plus
  1. Follow the same steps as Shopify above — Shopify Plus uses the same theme code architecture.
  2. If your store uses a custom Hydrogen/headless storefront, apply fixes directly in your React components: add aria-label props to <a> and <Link> elements, and aria-hidden='true' to decorative SVG icons.
  3. For enterprise themes with a design system, update the Icon component or Button component at the source so all instances inherit the fix.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix link name on WooCommerce
  1. Go to WordPress Admin → Appearance → Theme File Editor (or use a child theme via FTP/SFTP to avoid overwriting on updates).
  2. Common problem files: header.php or header-*.php (navigation and cart icon links), footer.php (social icons), and woocommerce/content-product.php or loop/loop-start.php (product card image links).
  3. For the mini-cart icon link, locate the cart widget output and add aria-label='Shopping cart, [item count] items' or use a visually-hidden span.
  4. Install the 'WP Accessibility' plugin (author: Joe Dolson) — it automatically adds skip links and fixes some common unnamed link issues in standard WordPress output without code edits.
  5. For social icon links added by plugins (e.g. Simple Social Icons), configure the plugin's settings to include link labels, or override the template with a child theme snippet that adds aria-label attributes.
  6. After saving, validate with the axe browser extension on your storefront.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix link name on BigCommerce
  1. Go to BigCommerce Admin → Storefront → My Themes → click 'Edit Theme Files' (or download the theme via 'Download' and edit locally, then re-upload).
  2. Common files: templates/components/common/header.html (cart/search icon links), templates/components/common/footer.html (social links), templates/components/products/card.html (product card links).
  3. For icon links, add aria-label to the anchor: <a href='{{urls.cart}}' aria-label='View shopping cart'>.
  4. For product card image links, add aria-label='View {{product.name}}' to the wrapping <a> around the product image.
  5. Save and publish the theme, then test using the WAVE browser extension on your live storefront preview.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix link name on Wix
  1. Open the Wix Editor for your site. Click on any icon button or image link that is flagged.
  2. With the element selected, click the 'Settings' (gear) icon or right-click and choose 'Link' to review the link — then click 'Accessibility' or 'Tooltip' settings.
  3. In the element's Settings panel, find the 'Accessibility' section and enter a descriptive 'ARIA label' (e.g. 'Open Instagram profile'). Wix Editor supports aria-label fields for buttons and image elements.
  4. For Wix menus and icon buttons added through the Add panel, select the element → Settings → Accessibility → type a label in the 'Label' field.
  5. If using Wix Studio (Wix's advanced editor), you can inspect and set ARIA properties per-element in the Inspector panel under 'Accessibility'.
  6. Publish the site and verify with the WAVE browser extension.
Full Wix guide →Official Wix docs ↗
How to fix link name on Wix Studio
  1. In Wix Studio, click any link element (icon, image, button) on the canvas to select it.
  2. Open the right-hand Inspector panel and scroll to the 'Accessibility' section.
  3. Enter a meaningful description in the 'ARIA Label' field (e.g. 'Go to product page for Blue Running Shoes').
  4. For elements embedded in repeaters (e.g. product grids), set the label dynamically using the dataset/content binding — e.g. bind aria-label to the product name field so every card gets a unique, accurate label.
  5. Publish and verify with axe DevTools or WAVE.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix link name on Squarespace
  1. Squarespace has limited direct code access. Go to Website → Pages → click the relevant page → Edit, then locate the block containing the problematic link.
  2. For image blocks used as links: click the image block → Edit → Link, then add alt text in the 'Image Alt Text' field — Squarespace uses this as the accessible name for linked images.
  3. For social icon blocks: Squarespace automatically adds aria-labels to its built-in social links block based on the network name — ensure you are using the native Social Links block, not a custom code block with raw icon HTML.
  4. For custom code blocks (HTML/CSS/JS): go to the block → Edit → paste your code with proper aria-label attributes on all <a> tags.
  5. For header/navigation icon buttons (cart, search): go to Design → Site Styles or the header settings — Squarespace's native icons are typically labelled, but if you've added a custom icon via Code Injection (Settings → Advanced → Code Injection → Header), add aria-label to those elements.
  6. Publish and test with WAVE.
Full Squarespace guide →Official Squarespace docs ↗
How to fix link name on Webflow
  1. Open the Webflow Designer. Click the link or image element that is flagged.
  2. In the right-hand Settings panel (the gear icon), scroll down to the 'Accessibility' section.
  3. For a Link Block wrapping an icon or image: enter a descriptive label in the 'Label (aria-label)' field (e.g. 'View cart').
  4. For a plain Link element with no visible text: type the descriptive label in the 'Label (aria-label)' field, or add a Text element inside the link and apply a 'visually-hidden' class (set width:1px; height:1px; overflow:hidden; position:absolute; clip:rect(0,0,0,0); white-space:nowrap).
  5. For SVG icons placed inside Link Blocks: select the SVG element and in Settings → Accessibility, set aria-hidden='true' so screen readers ignore the decorative graphic and rely solely on the link's aria-label.
  6. Publish and verify with axe DevTools or NVDA + Chrome.
Full Webflow guide →Official Webflow docs ↗
How to fix link name on Adobe Commerce (Magento)
  1. Locate the relevant .phtml template file. Common problem areas: Magento_Theme/templates/html/header.phtml (search/cart icon links), Magento_Catalog/templates/product/list.phtml (product card links), Magento_Theme/templates/html/footer.phtml (social links).
  2. Always make changes inside a custom theme (app/design/frontend/[Vendor]/[theme]/) rather than editing core files — copy the template into your custom theme directory first.
  3. For icon-only links in the header, add aria-label: <a href='<?= $block->getUrl('checkout/cart') ?>' aria-label='<?= __('View shopping cart') ?>'>.
  4. For product image links in the product list, add aria-label='<?= $escaper->escapeHtmlAttr(__('View %1', $product->getName())) ?>' to the wrapping <a> tag.
  5. Run bin/magento cache:flush and bin/magento setup:static-content:deploy after saving template changes, then verify with axe DevTools.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix link name on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template structure and fix approach are identical.
  2. Create or use a custom theme under app/design/frontend/ and copy only the affected .phtml files into it before editing.
  3. Flush the cache after changes: bin/magento cache:flush.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix link name on PrestaShop
  1. Go to PrestaShop Admin → Design → Theme & Logo → select your theme → click 'Edit' or access via FTP.
  2. Common problem templates: themes/[yourtheme]/templates/_partials/header.tpl (cart/search icons) and themes/[yourtheme]/templates/catalog/_partials/miniature.tpl (product card links).
  3. Use a child theme override (copy the file to themes/[yourtheme]/templates/) so core updates don't overwrite changes.
  4. For icon links, add aria-label: <a href='{$urls.pages.cart}' aria-label='{l s='View cart' d='Shop.Theme.Global'}'>.
  5. Clear the Smarty cache (Advanced Parameters → Performance → Clear cache) after saving.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix link name on Headless / Custom (I build in code)
  1. Audit all <a> elements in your component library. Any link containing only an icon, SVG, or image with no visible text must receive an aria-label prop/attribute.
  2. For React: <a href='/cart' aria-label='View shopping cart'><CartIcon aria-hidden='true' /></a>
  3. For icon components (SVG), always pass aria-hidden='true' on the SVG when the parent link already has an aria-label, to avoid double-announcements.
  4. For image links, ensure the <img> has a descriptive alt attribute; if the link also needs a separate label, use aria-label on the <a> and set alt='' on the image to avoid duplication.
  5. Add a linting rule (eslint-plugin-jsx-a11y rule: anchor-has-content + anchor-is-valid) to your CI pipeline to catch regressions automatically.
  6. Run axe-core or Playwright accessibility audit as part of your automated test suite.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find link name — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Link name?

Every clickable link on a webpage must have a meaningful text label that screen readers can announce to blind or low-vision users. A "link-name" failure means a link exists on your page but has no readable text — it might be an icon-only button (like a shopping cart or social media icon), an image link with no alt text, or an empty `<a>` tag. The WCAG 2.4.4 criterion ("Link Purpose") requires that the purpose of each link can be determined from the link text alone, or from its immediate surrounding context. Without a name, a screen reader will announce something useless like "link" or read out the raw URL instead of telling the user where the link goes or what it does.

Why does link name matter?

Accessibility failures like this expose your store to legal risk under laws such as the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK) — lawsuits targeting e-commerce sites for WCAG non-compliance have increased sharply year over year. Beyond legal risk, approximately 7–8 million screen reader users in the US alone cannot navigate or purchase from a store with unnamed links, directly costing you sales. Google's crawlers also use link anchor text as a ranking signal, so unnamed links pass zero topical relevance to the pages they point to, weakening your internal linking SEO. Fixing this is typically a quick-win code change that immediately improves both accessibility compliance and search engine crawlability.

How do I fix link name?

Add a descriptive, screen-reader-accessible text label to every link on your store so assistive technology can announce its purpose.

Related Accessibility (WCAG) issues