Guides · Accessibility
How to name links and buttons
Links or buttons on your page have no name, often because they are icons: a magnifying glass, a cart or a social media logo. Sighted visitors can guess what the icon does. A screen reader finds no words, so it may only say "link" or "button", and the person listening cannot tell where it goes.
What a name is
The name is the text a browser passes to screen readers and voice control software. It usually comes from the words inside the link or button. An icon has no words, so you have to supply them.
Your report can raise this in two ways. One is a missing name. The other is a name that differs from the words on screen. People using voice control say what they see, for example "click Buy now". If the hidden name is "Purchase", that command may not work.
How to fix it
- Open your report and look at which links or buttons it lists.
- Decide what each one does and write that in a few words, such as "Search" or "Follow us on Instagram".
- Add the name using one of the methods below.
- If the control has visible words, make sure the name contains them, ideally at the start.
Pick the method that suits the control:
- Visible text is the simplest name. If you have room, add a word beside the icon.
- For a link that is only an image, write alt text describing where the link goes.
- For an icon, add an
aria-label. This name is not shown on screen.
<a href="/cart" aria-label="Cart">
<svg aria-hidden="true">...</svg>
</a>
<button type="button" aria-label="Close menu">
<svg aria-hidden="true">...</svg>
</button>When the visible words are "Buy now" and you want more detail, keep those words first:
<a href="/desk" aria-label="Buy now: walnut desk">Buy now</a>On site builders
Most unnamed controls come from a theme, an app or a widget, so you may not be able to reach the code yourself.
- WordPress: check the settings of the block, theme or plugin for a label field. If there is none, a developer can edit the template.
- Shopify: icons in a theme are set in its code. Ask the theme's developer, or check for a newer version.
- Wix: look for accessibility options in the element's settings. Some labels need developer mode, and support varies by element. Available options vary by element.
- Squarespace: try the block's settings first. Custom icons may need a developer.
To a developer, say: "Give each control listed in this report an accessible name that includes its visible text."
How to check
Press Rescan on your report after you publish the change. It confirms that a name exists and contains the visible words. Read each name yourself and ask whether it would make sense on its own.