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.
aelement 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.
- For link text that is short and therefore often inadequately descriptive,
titleattribute can be used provide a more detailed description of the link target.
targetattribute 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.
accesskeyattribute is controversial in the web accessibility community.
Accesskeywas 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
accesskeyspecification is weak and implementations varied widely, which resulted in a mixed improvement in accessibility. One of the main problems when using
accesskeyis that it interferes with browser and assistive technology shortcut keys.
accesskeywas 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,
accesskeyis 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
areaelement is used as a part of
mapelements to create areas within images that activate links. The
mapelement is often used to create navigation bars. Links created using the
areaelement must have redundant text links since none of the major graphical browsers render
alttext for the
areaelement, making content inaccessible to many visually impaired users using high contrast settings in their graphical browser or OS.
- Any time an
areaelement is used to create a link, the
altattribute 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
- 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)
- 1.2 Provide redundant text links for each active region of a server-side image map. [Priority 1]
- 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Priority 1]
- 13.1 Clearly identify the target of each link. [Priority 2]
- 9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
Image Map Example from Southern Illinois University
map example includes
alt text for
area elements and redundant text links for the
area element links.
HTML Source Code
<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">
<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">
<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/feedback/">Register to win</a></li>
<li><a href="http://www.siu.edu/newguestbook.html">Sign the guestbook</a></li>
In this example the
alt text should indicate the target of the link and not describe the image.