Creating accessible links in documents and PDFs

How do screen readers understand links?

A screen reader is a piece of software that enables people with visual impairments to use a computer. Most screen readers understand of a website or document, based on correct HTML setup and then read it aloud to the visually impaired user.

If the information source is correctly tagged for accessibility the screen reader user can access any information with ease without assistance from other people.

How do you make a link accessible?

Now that you know who you are trying to reach and how they are going to navigate your document, you are ready to learn the correct way to make links useful for everyone.

Before we get started, it is worth mentioning that there is no real difference between html links on web pages and links in documents. They are both the same kind of html links and are meant to be handled the same way.

More than a URL – what is link text?

The place to start is also the most important part of creating correct and meaningful link text, “hypertext link” or as Microsoft Word, PowerPoint and Excel puts it “Text to display”. Links should not be a URL (the link target or the address), such as www.oddev.demo.supertusch.com, but rather a concise description of what the link destination is.

Most screen readers will usually know that something is a link, because of the html setup. This means they will read it aloud to the screen reader users by stating “Link:” before reading the actual link text that you have written. This means you do not need the text to include the actual web address as a visible part of the text, but only as a hidden hyperlink inside the link text.

Bad example of a link

Please visit www.oddev.demo.supertusch.com to learn more about our products.

Good example of an accessible link

Please visit the Omnidocs homepage to learn more about our products.

Creating meaningful link text

Some users use their assistive technology, to only read a list of links available in the document that they are currently accessing. This is an effective way to navigate both websites and documents – especially if they contain a table of contents or if you make certain that all links have unique link text.

However, this method of navigation only works if their list of links has concise and descriptive link text. All links should be able to stand alone and still convey its function and purpose without the context of the surrounding text. That’s why “Click here” or “more” are examples of inefficient and disorienting link text.

Bad example of a meaningful link text

You can click here to get more information about accessibility on our website.

Good example of a meaningful link text

You can learn more about accessibility on our website.

Creating concise link text

You should always try to avoid long link text. For visual users, it may break line spacing and appear as two separate links, while for the screen reader user, it may be tedious and difficult to navigate through your website or document if the links are overly long.

By limiting the length of your links, you can make your document more visually appealing, while also making it easy for screen reader users to both understand your site and scan the links quickly for easy navigation.

Bad example of a link text

You can create accessibility in documents using assistive software.

Good example of a concise link text

Creating accessibility in documents is easier with assistive software.

Images, objects, and files can also be links

Images can be links, but as a general rule they should not be.

If you must use an image as a link, make sure to treat it like a link, and not the way you would normally treat an alt text. This means that the text of the image, should be used as link text, rather than to describe any visual elements.

Always make sure that, if you use an image as a link, it should be accompanied by a normal link text that follows the above guidelines, to make sure that your documents are easy to read and navigate for all users.

Best practice and further information

Now you know what to do with links and what not to do. If you want to make your link text even better for all users, take a look at some of the best practice below if you want more information.

• Don’t write “Link to”. Screen readers know, due to formatting, that it is reading a link. If you use “Link to” in your link text, the screen reader user will hear “Link: link to something”.
• If a document is likely to be printed, it is necessary to have the URL visible instead of a link text.
• You can add a mouse hover tooltip or screentip, but make sure that you do not put essential information in the tooltips, as it may be inaccessible to some users.
• If the link opens in a new tab or window, make sure that you write this at the end of the hyperlink text, for example in parentheses.
• Always make sure to have your links underlined, it makes the link easier to tell apart from the rest of the text for users with vision.
• Link text should have a different colour than the surrounding text. That does not necessarily mean the hyperlink has to be blue, but make sure it differs.