Skip to content


About links and accessibility

Someone who is visually impaired may be using a screen reader. A screen reader can identify links. Someone with a mobility impairment may be using the keyboard to navigate around a webpage, for example, using the tab key. When they do this, the cursor should visit each link in turn. Each link can then be activated by pressing 'enter'.

Single A

Making links

Links need to be built in the programmatic language of the page, for example, as links formed using the a element in HTML. This means that assistive technologies can identify links and make use of them. This means that there should not be any content on the page that mimics links in appearance.

As well being a different colour from surrounding text, links should also include additional visual clues such as underlining for those with poor colour vision, or those using a screen in a high glare environment.

From a usability point of view, links in menus do not necessarily need underlining, if all text is a link.

A special case is using images as links.

Making the purpose of your links clear

Links must have text that describes the purpose of the link. For this reason, web addresses or URI's are not considered informative and should not be used.

At the very least, links should be organised in a meaningful sequence for people using assistive technology. This is because assistive technology does not render stylesheets, which may have been used to arrange content on the page. To test this, turn off stylesheets, and see how the order of the page changes.

If you want to get fancy, the links should also be put in an order that follows logical sequences and relationships with the content. This may mean changing the default tab order of links and other interactive elements.

Operating the links in a webpage

All links should be operable with the keyboard and should be visible (highlighted) when they receive focus.

The number of links that open new windows and tabs should be kept to a minimum. If a link opens a new window, then the user should be warned.

For links in table cells, the reading order is important for tables containing links in table cells, but the context of the link in the cell, which includes the text in the cell and its associate heading, should make sense.

Double A

Making links

Links can be identified as a different colour from surrounding text, as long as link text has a contrast ratio of 3:1 from non-link text (and they are underlined).

Making the purpose of your links clear

Links that have the same function in a website or page, should have consistent link text. For example, all links that go to a 'Contact Us' page, should have the same text.

Operating the links in a webpage

To make sure links are visible if someone is using the keyboard, developers should at least keep the default 'focus' functionality of the browser, assistive technology or operating system.

Triple A

Making links

The minimum contrast ratio between a link and its background should be 7:1.