"Read More"
- Kim Collins (Unlicensed)
Using descriptive link text
Using descriptive link text can benefit all users, but particularly those using a screen reader.
Just as visual users scan a page by skimming headings, bullets, and links, screen reader users may use the same elements to scan a page. Unlike visual users, however, when a screen reader user is scanning by links, they may not have immediate access to the content surrounding the link.Â
Good (descriptive) link text
Try to structure your content so that it allows for descriptive link text, as in the example below. The heading of each card is linked, eliminating the need for an extraneous "read more" link.
The following screenshot shows the Elements List viewer in NVDA, a popular screen reader. The Elements List viewer shows a list of all links on the current page. (Other elements that can be viewed in this tool include Headings, Form fields, Buttons, and Landmarks.) Notice that the page being viewed uses strong, descriptive link text. A user could easily scan the list of links and quickly determine which link held the content they wanted to read.
Bad (generic) link text
If the previous example had been marked up with "Read more" as the link text, instead of the descriptive link text, the Elements List viewer would provide no help to a screen reader user trying to navigate by links.
Techniques for screen readers
While it is preferable to use descriptive link text as the visible link – as in the "Good (descriptive) link text" section above – there are techniques you can employ to help screen reader users if you must use the "Read more" pattern.
Extra text can be added to a link that is only available to screen readers (using Bootstrap's .sr-only class, which hides content visually, but leaves it available to screen readers). In the example below, "Read more" links include a visually hidden span, that describes what the user can read more about. Note that while this approach helps screen reader users, it involves extra markup that content editors may not be able to use.
Resources
"Learn More" Links: You Can Do Better