Accessible hyperlinks

Knowing how to create good hyperlinks in your online content can improve not only the usability but also the accessibility of your resources. By following these simple steps you will not only improve the experience for sighted users who can visually scan your content and quickly know where the links will take them, but also for screen reader users who often navigate through content by using links.

• Avoid using full URLs in your content. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, etc. which make sense to scripts and databases but not to people. They can also be extremely long and frustrating to listen to for screen reader users. Instead embed the hyperlink in other text which is readable and understandable e.g. Use a link such as Constructing Accessible Web Sites instead of pasting the whole url e.g. https://www.amazon.co.uk/Constructing-Accessible-Web-Sites-Thatcher/dp/1590591488/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1580052433&sr=8-1.
• Use concise and descriptive links which tell users exactly where following the link will take them. e.g. instead of Click here to learn the difference between  accessible, usable, and universal design, use Learn the difference between accessible, usable, and universal design. If you're not sure about your link description, try asking yourself the question "Have I provided enough context so that if the only information my user had was the link, could they decide whether it would be useful for them or not." Also remember that screen reader users often navigate through online content using hyperlinks, so they will often skip from one hyperlink to the next. Imagine how frustrating and unhelpful it would be if all of the links they jumped to simply said "Click here" or "Find out more".
• If you add an email address use the full address, rather than the name of the person with their email address embedded e.g. instead of Susi Miller use susi@elahub.net
• Although the default way to show that text is a hyperlink is to change the text colour and use underlining, people sometimes choose other ways to visually differentiate their hyperlinks. This can risk sighted users not being able to recognise that text is a hyperlink until they hover their mouse over the text. e.g. If you use bold and a different colour text to show something is a hyperlink, then your users may think this is just a heading style and may miss it completely.
• Finally, remember that these tips apply to all online content, not just websites or social media articles. Writing good hyperlink text can also improve your emails, eLearning and online documents.

Useful links

• University of Minnesota hyperlinks article. Has some great examples and demonstrates what inaccessible hyperlinks sound like to screen readers.
• WebAim links and hypertext article

Screen Readers

If you want to test how your resource will sound when it is read out by a screen reader we recommend NVDA which is free and open source.

• NVDA screen reader
• Deque University: NVDA keyboard shortcuts

See www.elahub.net for free eLearning accessibility help and resources.