Link accessibility
Learn to use meaningful link text and aria-label.
Meaningful link text
Screen-reader users recognise links by their text. Vague text like 'Click here', 'Here' or 'More' tells nothing about the destination. Pick descriptive text instead, such as 'View recipes'.
A good link text still makes sense out of context. People who skim the page also look at links first; clear text helps everyone.
The aria-label attribute
Sometimes a link holds only an icon or a short word; an arrow, for instance. A sighted user can guess the meaning from context, but a screen reader lacks it. The aria-label attribute adds a spoken label to the link.
Example: <a href="/help" aria-label="Open the help page">?</a>. The screen reader says 'Open the help page' instead of '?'. The sighted user still sees '?'.
Exercise Write a link with aria-label
Write a link. Its href goes to /help, its text is just ? and its aria-label value is Open the help page.
Show example solution
<a href="/help" aria-label="Open the help page">?</a>Test yourself
-
Which is the most meaningful link text?
- 'Click here'
- 'Here'
- 'More'
- 'View recipes'
Show answer
'View recipes' — Correct. 'View recipes' states the destination clearly.
-
Add the aria-label attribute
<a href="/help" ____="Open the help page">Help</a>Show answer
<a href="/help" aria-label="Open the help page">Help</a> -
Match each problem to its fix
- 'Click here' text
- Use descriptive text
- Icon-only link
- Add aria-label
- 'Here' link
- State the context
- Very long link
- Keep it short