- Links must have some text associated to them
- if you are making an image a link, ensure the image has useful alt text.
- Link text should be descriptive
- Links should make sense out of context and out of sequential order.
- Links do not need to include "link" in the link text, because all users already know that the link is a link.
- Don’t use the title attribute.
- Place the distinguishing information at the beginning of a link.
Links are essential on the internet, but poorly labelled links are unhelpful and disorientating. Links should always have some text, and ideally some human readable text. The link text should give a good indication of where its going, and what the user should expect. For example if it’s opening in another tab its helpful to let people know. Also if its going to another website.
‘Read more’ and ‘click here’ are particularly unhelpful for people using assistive technologies who might come across these links out of context.
It's worth knowing that people using screen readers can access a list of links on a web page, and navigate to them. They can order them as they appear on the page, or alphabetically. A blind or partially sighted user might use the keyboard to skip through the page link by link - just hearing the link text.
The implications of this are that
- Links should make sense out of context
- They should not be overly verbose
- Place unique information at the beginning when possible
- Use intuitive labelling for common links (eg. Contact )
How does a screen reader know what link text?
A link, in HTML is made up of an anchor tag <a>. This anchor wraps the thing that we see as a link. this could be a word or an image. All the text that is wrapped by the anchor tag, including the alternative image text will be read as the link text.
If there is no text, the screen reader will look for the title attribute. Failing that, it will read out the URL.
URLs are often meaningless to people. If you do need to write out a full URL try to keep it short, generate a nice alias if you can, or generate a short readable URL using one of the many online services.
The title attribute is not exposed by all browsers in an accessible way meaning that people using keyboards and touch-only devices will likely never see that information.
It is therefore not recommended to use the title attribute on <a> elements. If you do use it don't double up on the accessible name of the link, this can produce unnecessary duplicate announcements to some screen readers.
Summary:
- Links must have some text associated to them
- if you are making an image a link, ensure the image has useful alt text.
- Link text should be descriptive
- Links should make sense out of context and out of sequential order.
- Links do not need to include "link" in the link text, because all users already know that the link is a link.
- Don’t use the title attribute.
- Place the distinguishing information at the beginning of a link.