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

Next lesson: Button vs link

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies