Employers' Forum logo Web accessibility hints and tips logo

Website accessibility Hints and Tips

Hypertext links

Clear and concise hypertext links are key to accessible Website navigation.

Hypertext link text should make sense when read out of context. Otherwise visually impaired people using screen readers are likely find it hard to navigate your pages, for example avoid the use of 'click here' or 'more'. This is because rather than ploughing from the start of the page to the link they want every time, they can draw up a list of links present on a page into a selection box and choose the one they want.

If for design consistency you want to use link names such are 'more' or 'read' either ensure the title tag for each link with the same text is unique or create a graphic with the text and use different alternative text descriptions.

Use the link title attribute to expand the description of a link giving the user more information about whether they want to follow the hyperlink.

Whenever possible, links should be separate from text. If you cannot avoid using links within text, make them stand out from the surrounding text, by underlining them, making them larger or using a different font. This is particularly helpful for people with motor impairments who do not have fine mouse control or who use an alternative device for navigating around the Website.

The use of JavaScript on sites for navigation and validation is one of the hardest accessibility problems to fix, using it for non-essential page functionality like rollovers is not a major issue.

  • Have a terse but meaningful link description - unique to each link on a page don't use 'click here' or 'more' . [W3C 13.1]
  • When you link out of your site to another site or a link opens a new browser window you need to give some warning . [W3C 10.1]
  • Use the link title attribute to expand the description of a link giving the user more information about whether they want to follow the hyperlink.
  • Avoid pop up windows and 'spawned' windows. [W3C 10.1]
  • Differentiate between structural navigation links (top and side navigation bars) and links in the main content of a page. For example underline links within page text and make them blue (most common colour for unvisited links on the Web) to clearly indicate they are hypertext link - whatever you do ensure consistency


back to top