Creating Accessible Websites

Dealing With Navigation


General Points

Underlined blue text is commonly recognised as a link so you will improve usability if you stick to this convention.

• Links created using CSS selectors a:hover and a: link are accessible, but be aware that some users experience difficulty with things moving or changing on the screen.

• Users must be able to tab to each link. This should happen automatically if you are using hypertext links or creating links from images.

Drop down menus generated with JavaScript are not accessible and if used, need alternative text links. Likewise, "links" created with JavaScript that need a mouseover action or click to display information on the same page are not accessible.

• Provide a site map and some guidance notes for disabled users.

• Build in a "crumb" menu on each page (list of links showing location from the home page).

• Don't build links into Flash or Shockwave elements - screen readers and tab keys can't access them.

• Use tab index and access key tags to assist users who can't use a mouse. Code info to follow in due course. (Not necessary to achieve Priority 1 Checkpoint).

Slow Down Screenreaders

It is possible to assist screen reader users by slowing down the rate at which links are read out. Create a transparent gif of about 5x5 pixels in your usual image manipulation software. If you can't create transparency, use the same colour as the background of the links menu.

Type out the list of links across the page and separate each by using | or [ ]. Insert the transparent spacer gif on either side of the | or between each set of []. Give each spacer gif an alt tag (use "" as the image does not contain important information).

Skip Menu

Provide a "skip menu" link at the start of each list of links so users with screen readers don't have to listen to them every time a new page is loaded.

Locate a button, transparent gif or hypertext link above all the links and label it appropriately e.g. "Skip Navigation". Place an anchor at the start of important content on the same page and create a link to it.

<<Back to list :: Next>>

Intro | SENDA | Disabled Users | Accessible Pages | Testing | Further Info | Getting Help