Links Examples

HTML Markup Details

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.

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 SIU
• Search
• Register to win
• Sign the guestbook
• Calendars
• Directories

HTML Source Code

Image Example

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

HTML Source Code