Part 4: Accessible Hyperlinks

Part 4: Accessible Hyperlinks

Hyperlinks (links) are usually bits of text on your webpage that link to other parts of your website, or to external resources by clicking or tapping. Ultimately, they provide a simple way for users to quickly access additional resources without having to physically look around for it. In addition to text, links can also be such things as images, buttons and urls.

An example of a link can be found just above here, in the text coloured blue and underlined. So, if you were accessing the Virtual Inclusion website for the first time, you can quickly see the other parts in this series and easily navigate to them.

This way, it allows the creator of the content to provide a lot more information without having to write endless text on their webpage.

Hopefully this all sounds straightforward and you’re thinking “I get it, but why are links important to accessibility?”

Non-descriptive links: The first aspect I would like to mention is non-descriptive links. You may have used them countless times but not thought too much about it. I am talking about ‘Click Here’ and ‘Read More’ type links. The internet is littered with them and for many of the 2 million people in the UK living with sight loss (more than 350,000 registered blind or partially sighted) these type of links can have a significant impact on their ability to use the internet.

Screen reader users often do not read the link in context to the rest of the paragraph. Many with visual impairments use screen readers to scan the page for links in the same sense that many people scan a webpage with their eyes for the ‘contact us’ link. Imagine scanning through a website and only hearing a lot of random ‘click here’ and ‘read more’ sounds. Not only will this be quite frustrating, it will severely limit your ability to navigate through a website.

Luckily, this aspect can be easily fixed by changing the wording and link focus of the sentence. Instead of writing ‘Click here to contact us’ try using ‘Please contact us if you have any questions’.

URL links: Another aspect of non-descriptive links are when a full url is used as a link. URL links often have challenges regarding readability and length. They can have a combination of dashes, hyphens, dots, numbers and letters which ultimately make no sense to anyone, especially if reading in isolation and using a screen reader. This does not mean the url links cannot be used if they are relatively short e.g. virtualinclusion.com, but if it were virtualinclusion.com/accessibility/ASIN/159446#html you could change it to something like Virtual Inclusion’s Accessibility Review (not real link).

Length of link text: Keep the amount of link text to just what is needed to describe the link e.g. Using the sentence ‘Please contact us if you have any questions’, you would not need to make the whole sentence the hyperlink as the phrase ‘contact us’ is sufficient to identify the destination. Keep the link concise enough to describe the link and no longer.

Capital Letters: Full capital letter  words (e.g. FULL CAPITAL LETTER WORDS) are harder to read for everyone, and more so for many people with disabilities. Screen readers can also have difficulty processing capital letter links. This can result in every individual letter of the word being spoken. It is much more difficult to differentiate the shapes and may be impossible for those with a cognitive impairment to read.

Images: If you have an image that links to another resource of information, then please make sure the image has alternative text to describe where the link goes. If you do not do this a screen reader may just read the file name, which is generally unhelpful to the user. If you maintain your own website and using something like wordpress, adding alt text to images is very easy. In your media library, simply click on the image you wish and a box should open with an area for the alternative text.

Underline links: Lastly, should you underline all links? In most cases, you should underline links when they are in the body of the text and ensure they have sufficient contract to meet WCAG guidelines. This does not apply to items such a navigation bars that sit along the top of your website. However, these should be designed so it is apparent the user can click on them as a link.

All of the above are quite easy issues to resolve, they just require you to be aware of the issues and challenges when writing text on your website. One of the main things to remember is, are my links clear, readable and descriptive. If they are, it will go along way to ensuring the accessibility of your website. If not, then follow some of the things discussed above that will help improve your website accessibility.

Summary Points.

• Use descriptive links to describe the destination of the link.
• Keep the amount of hyperlink text to just what is needed to describe the link.
• Use a readable url link.
• Use capital letter appropriately.
• Add alternative text to all images.
• Underline links and ensure they have sufficicent colour contrast, when they in the body of the webpage.
• If a link opens a document such as a PDF, try and include that in the description and also the size of the file e.g. Accessibility Guidelines, PDF 2MB.
• Read Website Content Accessibility Guidelines: Link Purpose for more information.