Links

Hyperlinks are at the heart of the web; it is critical that they be functionally accessible to all users. The text associated with links must provide a clear indication of the target of a link. Links with the text "Click here" or "more..." are ambiguous and force users to examine content surrounding a link to infer its probable destination. This is a minor annoyance to sighted users, but a major problem for speech reader users.

Text surrounded by graphics may readable by sighted users; however, a user relying on a speech reader for browsing will be confused by the jumbled document order and unlikely to find the important contextual content. The result is speech users following unrelated links or missing a useful link and therefore creating a generally frustrating user experience.

Links opening pages in new windows is also a problem since users cannot use the "back" key to retrace their steps. This is especially a problem for speech users who may not have been warned of the window change or have missed the warning that a new window was opened.

HTML Markup

a: The a element is the main element used to create hyperlinks in a web resource and it is critical that the text associated with the link clearly indicate the target of the link. Do not use uninformative link text like "click here" or "more". Do not have the same link text point to different web resources and do not have different link text point to the same web resource.
a:title: For link text that is short and therefore often inadequately descriptive, the title attribute can be used provide a more detailed description of the link target.
a:target="_new": The target attribute set to the value "_new" is often used to open a link in a new window. Many developers do this for links that take users to external websites, assuming that the user may return to the original window to resume browsing. This creates problems because the user's browsing history is destroyed such that users cannot use the "back" key to return to the linking resource. Opening new windows also adds to desktop clutter and confusion. Speech users and users with visual impairments also might not notice that a new window has opened and can easily become confused when the back button does not take them back to the linking resource. It is important to note that most graphical browsers allow users to decide if they want to open up links in new windows.
a:accesskey: The accesskey attribute is controversial in the web accessibility community. Accesskey was originally included in HTML to improve accessibility by providing a way for authors to define keyboard shortcuts to frequently used links and form controls. The accesskey specification is weak and implementations varied widely, which resulted in a mixed improvement in accessibility. One of the main problems when using accesskey is that it interferes with browser and assistive technology shortcut keys. accesskey was slow to be implemented in major browsers and there are differences in existing implementations, making it difficult for users to know what accesskeys are available, how to activate accesskeys, and what behavior will result once the link is activated. In the Best Practices, accesskey is used sparingly for internal page navigation and then only with the number keys in order to reduce keyboard conflicts and internationalization issues. See Accesskey section of the best practices document for more information on accesskey.
AREA: The area element is used as a part of map elements to create areas within images that activate links. The map element is often used to create navigation bars. Links created using the area element must have redundant text links since none of the major graphical browsers render alt text for the area element, making content inaccessible to many visually impaired users using high contrast settings in their graphical browser or OS.
IMG:ALT and AREA:ALT: Any time an img or area element is used to create a link, the alt attribute content should not describe the image but instead describe the target of the link. This text can be used by screen readers or rendered instead of the image by some graphical browsers to improve access to screen reader users and people with visual impairments.

Related Accessibility Requirements

Section 508

1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.
1194.22 (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 shape.
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.

Web Content Accessibility Guidelines (WCAG 1.0)

Image Map Example from Southern Illinois University

The image map example includes alt text for area elements and redundant text links for the area element links.

HTML Source Code

<map name="FPMap0">
  <area href="http://www.siu.edu/hp/aboutsiu.html" alt="About SIU" coords="10, 2, 116, 14" shape="rect">
  <area href="http://www.siu.edu/hp/siu_searches.html" alt="Search" coords="12, 16, 106, 29" shape="rect">
  <area href="http://www.siu.edu/hp/feedback/" alt="Register to win" coords="112, 15, 215, 28" shape="rect">
  <area href="http://www.siu.edu/newguestbook.html" alt="Sign the guestbook" shape="rect" coords="219, 16, 321, 28">
  <area href="http://www.siu.edu/hp/calendars.html" alt="Calendars" shape="rect" coords="327, 15, 423, 29">
  <area href="http://www.siu.edu/hp/directories.html" alt="Directories" shape="rect" coords="326, 2, 427, 14">
</map>

<p style="text-align: center"><img align="bottom" alt="Southern Illinois University" border="0" ismap src="../images/siuGOLDtopmenu_BLUE.gif" vspace="5" usemap="#FPMap0" width="436" height="30">

<ul class="map">
  <li class="first"><a href="http://www.siu.edu/hp/aboutsiu.html">About <abbr title="Southern Illinois University">SIU</abbr></a></li>
  <li><a href="http://www.siu.edu/hp/siu_searches.html">Search</a></li>
  <li><a href="http://www.siu.edu/hp/feedback/">Register to win</a></li>
  <li><a href="http://www.siu.edu/newguestbook.html">Sign the guestbook</a></li>
  <li><a href="http://www.siu.edu/hp/calendars.html">Calendars</a></li>
  <li><a href="http://www.siu.edu/hp/directories.html">Directories</a></li>
</ul>
</p>

Image Example

In this example the alt text should indicate the target of the link and not describe the image.

HTML Source Code

Main Menu

Sand Trail

Links

HTML Markup

Related Accessibility Requirements

Section 508

Web Content Accessibility Guidelines (WCAG 1.0)

Image Map Example from Southern Illinois University

HTML Source Code

Image Example

HTML Source Code