A few tips on accessible links

This video gives you some tips on how to create accessible links. A few tips on accessible links

Transcript

Hi, I’m Gosia from Nomensa, and today I’d like to talk about link text.

Links are one of the most basic elements of HTML, which allow users to navigate between web pages or sub-sections of the same page. There are few aspects of links which need to be considered in terms of accessibility. One of them is link text.

Good link text should clearly identify a link’s purpose. Ideally, users should be able to understand where the link will lead them from the link text alone, without needing additional context. Screen reader users often navigate pages by tabbing from link to link, or by using a list of all links on the page. Meaningless link texts such as “find out more”, “click for details”, or “read more” will not help users decide whether they want to follow the link.

Occasionally it may not be desirable to display the whole link text. In this case, part of that text can be hidden off-screen, as it was done on this page. Sometimes part of the link’s description is provided using surrounding text as the context for the link. In this case it’s important to ensure that the user can find out more about link’s purpose without moving the focus away from it. This additional description should precede the link and be placed in the same sentence, paragraph, or list item. Link context can also be provided by preceding heading or associated table cell and table headers.

Many of the screen readers include keyboard shortcuts which make them read out such logically related content without changing the focus. Although link text should be descriptive, it should also be concise. Wrapping a long sentence or a whole paragraph of text in a link is not a good idea; it will overload users with unnecessary information, and make skimming through content more difficult. The other thing to keep in mind is consistency: links with the same destination should have the same description. And likewise, links leading to different pages shouldn’t be described by the same text.

It is also good practice to include a target page title in the link phrase, or make it similar. This will provide a logical connection between selected link and newly loaded page, and will reassure the users that this is the page they wanted to go to. Otherwise, the users may be uncertain if they arrived to the right page.

So to summarize, accessible link text should be descriptive and concise. It should be possible to understand the purpose of a link from link text alone, or from a link text combined with its programmatically defined context. Also, links leading to the same pages should be consistently described across the site.