Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

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

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.

About SIUSearchRegister to winSign the guestbookCalendarsDirectories

Southern Illinois University

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.

Z Chocolate Website

HTML Source Code

<p><a href="http://www.zchocolat.com/"><img src="../images/images-link-01.jpg" alt="Z Chocolate Website"/></a></p>