Navigation and Hyperlinks

Overview

The 508 standards address the use of image maps (see glossary if you are not familiar with the term, "image map") in Section 508 - Standards E and F and require that designers provide a mechanism by which a screen reader user can bypass lengthy listings of hyperlinks in Section 508 - Standard (o).

Section 508 doesn't address language for hyperlinks or suggestions for identifying what text in a phrase should be set as link text. However, this course provides a look at the importance of link text. Likewise, 508 doesn't discuss the use of HTML headings. This page presents a look at the importance of headings in navigating and using a page with a screen reader.

Section 508 - Standard (e)

Redundant text links shall be provided for each active region of a server-side image map

Section 508 - Standard (f)

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shapes

Section 508 - Standard (o)

A method shall be provided that permits users to skip repetitive navigation links.

back to top

Explanation - Standard (e) - Server Side Image Maps

Before discussing the accessibility issues of server side image maps, it is fair to advocate for the use of client side image maps. They are recognized by many in the web design community as the preferred map type. Nonetheless, an explanation of server side image maps and their accessibility issues is forthcoming.

If a page relies on server side image maps, users that are unable to move and click with the mouse will not be able to activate the hyperlinks. A brief explanation of server side image map functionality is needed.

When a user places the mouse on a region of the image map and clicks the mouse, the web page sends the coordinates of the mouse placement on the image to the web server. The web server gathers these coordinates and sends the web browser back the address of the web page (URL) that the user should be sent to. The URL that is returned is based entirely on the coordinates marking the location where the mouse had been when the user clicked. There is no other way to activate the hyperlink regions of a server side image map. This situation presents a barrier to anyone that is unable to use the mouse.

Does this mean that a server side image map can't be used? No, but it does indicate that an alternative means of accessing the links must be provided.

back to top

Techniques for Accessible Server Side Image Maps

There is one requirement and two suggestions that apply to server side maps.

The requirement is to offer a text alternative to the server side map regions. This technique is a requirement if a server side map is used. Repeating the link in a text form on the page will allow users to access the links embedded in the image map. The text link alternatives can be located anywhere on the web page. Placement is up to the designers preference. Many designers offer the links near the bottom of the page. See the example below for a visual representation of this requirement (Text alternative links are at the bottom of the example). The buttons on the New Media Center graphic are each intended to be server side image map regions. (The hotspot regions are not functional, rather they are for example.)

One suggestion relates back to the text alternates presented above. The image map requires an alt-text description as all images do. The alt-text for a server side image map can be used to direct screen reader users to the placement of the alternative text links. This technique is not a requirement. The HTML code below illustrates this usage of alt-text. Note the alt-text assignment.

<img src="../images/header_nav.gif" alt="NMC Main Menu (links of this image map are available at the bottom of the page" ismap>

A second suggestion recognized by the accessibility community is to use client side image maps rather than server side. Web design experts are challenged to identify examples of image map regions that can't be defined in a client side image map. Client side image maps are almost always easier to create and if care is taken are accessible without needing text alternatives.

back to top

Explanation - Standard (f) - Client Side Image Maps and Alternative Text

Client-side image map tools are able to define hotspot hyperlink regions that are rectangular, circular, or any polygon shape. These options mean that a designer is able to mark almost any shape as a region. An individual that encounters an image map is able to use the mouse to click on the region that they choose. This action carries the user to the targeted web site. However, this action is limited to individuals that can use the mouse, unless alternative text is assigned to each region of the image map. If the image map regions are marked with alt-text, then screen readers are able to identify and read these regions to the user as hyperlinks.

Let's take this one more step. The New Media Center (NMC) graphic below contains eighteen image map hotspot regions. The NMC graphic does have an alt-text assignment. None of the hotspot regions have alt-text. When a screen reader encounters this image, it will be able to identify the alt-text for the NMC image and inform the listener that this is an image map. That's it. A barrier exists as the map is not accessible.

back to top

Techniques for Accessible Client Side Image Maps

Alt-text assignment within HTML code

Client side image maps are indicated by AREA tags. The AREA tag will contain the shape of the image map region, the coordinates of the shape within the large graphic, and the destination a user will reach when choosing this link. See the following example.

<area shape="rect" coords="9,6,79,68" href="http://www.doit.wisc.edu"/>

This hotspot region can be made accessible by adding an alt-text declaration. Inspect the code with the alt-text included.

<area shape="rect" coords="9,6,79,68" href="http://www.doit.wisc.edu" alt="Division of Information Technology"/>

Each of the hotspot regions needs to be assigned appropriate alt-text.

Alt-text assignment within Dreamweaver

Adding alt-text using Dreamweaver is easy.

1. Create or select the hotspot region.
2. Note that the image property inspector will display a field titled, "Alt".
3. Enter alt-text in the Alt field of the property inspector.
4. Repeat this process with all other hotspot regions.

Priority 1194.22(o) - Explanation

Many web sites use top or side navigation to lead people to important parts of their web site. This links usually appear on many or all pages in the site. People who use assistive technologies such as screen readers will need to read through all of these links each time they go to a page.By placing either an invisible image or a text link which skips the navigation, you will allow users with screen reading technologies to skip directly to the content.

back to top

Explanation - Standard (o) - Skip Navigation Link

Standard (o) makes finding the main content of a web page easier for users of assistive technology. If you would examine the HTML code of many web pages from top to bottom, you might find content grouped together in this order:

1. Information about the department that owns the web site. Graphics and text that help visitors understand the identify of a department.
2. Main level site navigation.
3. The main content of the page - articles, facts, findings, directions, etc.
4. Page footer information. Contact information, page dates, etc.

When a sighted user visits a web page, a quick visual skimming of the page provides an understanding of the page layout. From that point, an individual is able to move directly to the needed information. Assistive technology is much different. A screen reader will read word by word through each section. Word by word includes alt-text for images, all hyperlinks, and any text. Let's suppose that a screen reader user wants to get directly to the main content of the page. This content is reached only after listening to all of the departmental information presented within graphics and listening to all the links. This situation is exacerbated when the user follows a link to a different page in the site where the same progression of content may be repeated. If a web page provided the user with the opportunity to skip page components 1 and 2 in this model, a much more efficient page would result.

Understand that the content described here is not inaccessible, but may be frustrating to users of assistive technology. A solution is presented by Standard (o)'s requirement to provide a skip navigation link.

There are different methods that designers use to meet this standard. All rely upon the concept of a link type known as a named anchor. A named anchor link allows a user to travel from one point within a web page to another. This site makes use of many named anchors. Near the top of this page is a group of links under a heading titled, "What you will find in this lesson?" When you choose one of these links, your browser brings you to the area of the page that you have chosen. The anchor is the destination of the hyperlink chosen at the top of the page.

back to top

Technique for Creating a Skip Navigation Link

In the case of the skip navigation link requirement, a designer needs to complete two steps:

1. Create a named anchor link at the initiation of the main content area of the page.
2. Insert a link that points to the named anchor created in step one.

Adding a Named Anchor to HTML Code

If the named anchor is to be placed directly into the HTML code, use the code below as a model.

<a name="standardo" id="standardo"></a>

The name attribute of the HTML tag sets the anchor. You will need to remember this name. Avoid spaces in the name. Stick to lower case letters.

Place this code immediately prior to the HTML code that contains the main content of the page.

Inserting a Link to a Named Anchor in HTML Code

Correct placement of the skip navigation link is anywhere near the top of the page. It is often the first item on the web page. Connect to the named anchor using HTML code similar to the example below.

<a href="#standardo">Skip Page Navigation</a>

Many designers prefer to have this link transparent to sighted visitors. A small graphic matching the color of the background can be used. Note the image that is included. It uses alt-text to present the skip page navigation option.

<a href="#standardo"><img src="skipnav.gif" alt="skip page navigation" height="1" width="1"></a>

Observe the href attribute of the code. It identifies the destination as the name of the anchor. Spelling must be exact. The name is prefaced with a number sign (#). This is required for the link to work.

Adding a Named Anchor using Dreamweaver

Placement of the named anchor requires two steps.

1. Place your cursor immediately prior to the first word in the main content area of the page.
2. Choose Insert, then Named Anchor from the Dreamweaver menu bar. Type the name of the anchor. Avoid spaces and use lower case.

Inserting a Link to a Named Anchor in Dreamweaver

Creation of a link to a named anchor is completed in several steps.

1. Enter or select the text or graphic that will be used as a hyperlink.
2. Complete the Link field on the property inspector by typing, the number sign (#), followed by the name of the named anchor. Spelling must be exact.

back to top

Other Considerations

Use of HTML Headings

The Section 508 standards don't address the use of HTML headings. Yet, for users of assistive technology the inclusion of HTML headings is one of the most important navigation elements that a designer can add to a web page.

Screen readers are able to extract headings from HTML markup. Upon visiting a web page, a keystroke allows a user to pull a list of all HTML headings that have been used. From this list of headings, one is able to navigate directly to that portion of the page. The page you are reading makes use of HTML headings. A screen reader user would have access to the following as navigation options:

1. Navigation and Hyperlinks
2. What you will find in this lesson?
3. Overview
4. (E)
5. (F)
6. (O)
7. Explanation - Standard (e)
8. Techniques for Accessible Server Side Image Maps

This list would continue through each heading on the page.

Historically, headings were avoided by many designers due to their appearance. As support for style sheets has improved, designers are able to create aesthetically pleasing formats for headings.

Clarity of Hyperlink Text

In a fashion similar to HTML headings, assistive technology allows a user to extract all hyperlinks from a web page. This extraction removes links from the context in which they are written. Think about the links below.

University of Wisconsin-Madison's Web Accessibility Policy
Division of Information Technology Resources for Web Accessibility

Read in context both links provide a clear destination. Extracted from an assistive technology device, the link text only is removed. The result:

Policy
Division of Information Technology

Helpful? Policy about what? What am I going to find about the Division of Information Technology?

As with HTML headings, the Section 508 standards don't address link text, however, proper labeling will make a page and/or site easier to navigate.

Navigating Using the Tab Key

Many sighted individuals don't realize that you can move through a web page using the tab key. If you can't use the mouse, this is a valuable key. In coordination with the page up/page down/arrow keys, it provides a means to traverse a page. Each time the tab key is pressed, the user is brought to the next link or form field in a page. This can simulate how an individual navigates a web browser without using the mouse. Try this for yourself. Go to a new web page in your browser. Start hitting the tab key upon page load and observe the manner by which you can move. Note: look for a lightly shaded gray border. It will travel from link to link upon each press of the tab key.

Designers can control the order by which a user will tab through a page. This is done through the use of the tabindex HTML attribute. Tabindex is assigned within a link and set to equal a numerical value. Note the tabindex attribute in the example.

<a href="index.htm" tabindex="1">Home</a>

This code would set the link to the Home page as the first page element the tab key would progress to.

back to top

Validation Technique(s)

The testing measures that follow can be used to evaluate compliancy of your web page(s) with the concepts presented for Standard (e), Standard (f) and Standard (o).

Standard (e) and Standard (f)

• view the page in your browser with the image viewing functionality disabled
• listen to the page using a screen reader, Braille display or speech synthesizer
• evaluate whether the page is readable and functional in a text browser like Lynx

Standard (o)

• listen to the page using a screen reader or speech synthesizer
• view the page using a text browser like Lynx

back to top

complete the navigation self-assessment