WebsightWhat it asks for, in plain English
People should be able to tell what a link is for from the link text alone, or from the link text together with what is immediately around it: the same sentence, the same list item, the same table cell, or the heading just above. 'Read more' on its own says nothing; 'Read more' inside a card whose heading is 'Composting workshop' is acceptable at this level, though better link text is still better.
This matters because screen reader users often pull up a list of every link on the page and jump from it, and in that list the surrounding sentence is gone. Twelve links all called 'Read more' are useless there.
A link may be deliberately vague if it is vague for everyone, for example a mystery link in a game. Image links take their purpose from the image's alt text.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.4 page has the full intent, techniques and definitions.
Who it affects
Someone using a screen reader brings up the links list and hears 'click here, click here, click here, read more, read more'.
A person with a cognitive impairment cannot predict what will happen when they follow 'here' and avoids it.
Anyone scanning a page quickly reads link text first and skips the rest, so vague links are simply missed.
Example
In a screen reader's links list this is 'Read more, Read more, Click here'. Which one is the seed swap?
Each link makes sense on its own. The list of links is now a useful table of contents.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}h2{font-size:16px;margin:0 0 4px}p{margin:0 0 12px}a{color:#1d4ed8}</style>
<h2>Composting workshop</h2><p>Saturday morning at the allotments. <a href="#">Read more</a></p>
<h2>Seed swap</h2><p>Bring spare packets to share. <a href="#">Read more</a></p>
<h2>Hedge laying</h2><p>A full day with the rangers. <a href="#">Click here</a></p><style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}h2{font-size:16px;margin:0 0 4px}p{margin:0 0 12px}a{color:#1d4ed8}</style>
<h2>Composting workshop</h2><p>Saturday morning at the allotments. <a href="#">Book the composting workshop</a></p>
<h2>Seed swap</h2><p>Bring spare packets to share. <a href="#">Seed swap details</a></p>
<h2>Hedge laying</h2><p>A full day with the rangers. <a href="#">Hedge laying: dates and kit list</a></p>How to check it
- Read every link's text by itself, ignoring the sentence around it. Does it say where the link goes?
- With a screen reader, open the links list (VoiceOver rotor, or Insert+F7 in NVDA) and read down it. Repeated vague entries are the failures.
- Where a link is vague, check whether its sentence, list item, table cell or the heading above it supplies the purpose.
- Check image links and icon links have alt text or a label that says where they go.
What Websight checks for 2.4.4
Websight runs these automated checks for 2.4.4:
area-alt
An image map lets one picture have several clickable regions, each defined by an area element with an href.
A
Links must have text a screen reader can announce
link-name
Every link needs text that a screen reader can announce and a voice control user can say.
Websight flags links that have no accessible text at all, such as an icon link with no label. Whether 'Read more' makes sense in its context needs a person; that is on the manual checklist.
Practical tips
- Make the link text the name of the thing it leads to: the article title, the product, the page.
- Keep 'Read more' if the design insists, but add the subject with visually hidden text: 'Read more<span class="visually-hidden"> about the seed swap</span>'.
- Never link the word 'here'.
Other criteria in guideline 2.4, Navigable
- 2.4.1 Bypass Blocks (level A)
- 2.4.2 Page Titled (level A)
- 2.4.3 Focus Order (level A)
- 2.4.5 Multiple Ways (level AA)
- 2.4.6 Headings and Labels (level AA)
- 2.4.7 Focus Visible (level AA)
- 2.4.11 Focus Not Obscured (Minimum) (level AA)