iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can keep a compact “Read more” link in an article card, but its purpose should still be clear when someone encounters the link on its own. The simplest option is descriptive visible text; if the design requires the shorter label, provide a useful accessible name or programmatically connect the link to the card’s heading.
Why “Read more” can be unclear
“Read more” does not say what the link opens. That can make repeated links difficult to distinguish in a screen-reader link list or when moving through links with a keyboard. W3C WAI advises: “Write link text so that it describes the content of the link target.” Its writing guidance names “read more” as an ambiguous label and recommends describing the destination instead: W3C WAI writing guidance. W3C also documents the difficulty of repeated generic labels in its F84 failure technique.
Best option: make the visible link descriptive
When the layout allows it, replace the generic label with text that identifies the destination, such as “Read the guide to keyboard shortcuts” or “Explore the coastal storm update.” The link can remain concise; the key is to distinguish its destination from neighboring links.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteKeep the short label and add context accessibly
If the visual design depends on “Read more,” you can preserve those visible words while making the link’s purpose clearer to assistive technology. W3C techniques are examples, not mandatory implementations; choose the pattern that fits the component and confirm its result in your supported environments.
#1 Best Overall
Associate the link with the card heading
Use aria-labelledby to make the visible heading and link label contribute to the link’s accessible name. For example:
<article>
<h2 id="story-title">Storms hit the east coast</h2>
<p>A short summary of the report.</p>
<a href="/stories/east-coast-storms" aria-labelledby="story-title read-more-label">
<span id="read-more-label">Read more</span>
</a>
</article>The link’s accessible name includes the heading and “Read more,” so the destination has context when the link is encountered separately. W3C’s ARIA7 technique illustrates this approach with a heading and a “Read more” link.
Rank #2
Give the link a descriptive aria-label
You can also use an aria-label that starts with the visible words and adds the destination, for example:
<a href="/stories/east-coast-storms" aria-label="Read more about storms hitting the east coast">Read more</a>Starting with “Read more” keeps the accessible name aligned with the visible label, which matters for people who use speech input as well as assistive technology. W3C explains this pattern in its ARIA8 technique.
Rank #3
- Used Book in Good Condition
Choose the pattern that works for the component
- Use descriptive visible text when you can. It gives everyone the destination without relying on extra hidden context.
- Use
aria-labelledbywhen a nearby, visible heading already identifies the card and should form part of the link’s accessible name. - Use
aria-labelwhen the link needs a concise, explicit name that is not conveniently assembled from existing text. Begin with the visible label.
W3C also documents ways to provide context through a preceding heading or the enclosing paragraph: H80 and H78. Descriptive link text remains the clearest choice where the design permits it.
Check the result, not just the markup
- Inspect the link’s computed accessible name. Confirm it identifies the specific destination, not just “Read more.”
- Check links outside their surrounding card. In a screen-reader link list or keyboard navigation, each repeated call to action should remain distinguishable.
- Check the name against the visible text. If you use
aria-label, ensure it starts with the visible words and describes the same action. - Listen to the full card. Make sure the heading, summary, and link provide useful context without making the link name unnecessarily long or duplicating nearby content.
- Test in the environments you support. The cited W3C techniques describe patterns; they do not establish how every browser and assistive-technology combination will announce a particular implementation.
Why a title attribute is not the main fix
Do not rely on the HTML title attribute as the primary way to explain a generic link. W3C’s H33 technique prefers descriptive link text or text that is visually hidden while remaining available to assistive technology.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →
