Description

This failure occurs when JavaScript event handlers are attached to elements
to ''emulate links''. A control or link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links.
If scripting events are used to emulate links, user
agents including assistive technology may not be able to identify the links
in the content as links. They may not be recognized as interactive controls
by assistive technology, or they may be recognized as interactive controls
but still not recognized as links. Such elements do not appear in the links
list generated by user agents or assistive technology.

The <a href> and <area>
elements are intended to mark up links.

Attaching event handlers to elements that are not normally interactive, such
as span and div, can be quite disorienting to
users. Even if care is taken to provide keyboard access to such elements,
users may have a difficult time discovering that there are interactive
controls in the content or understanding what type of behavior to expect
from them. For example, users may not know which keystrokes are supported by
the script to activate the element. Additionally, these elements do not
generate the same operating system events as interactive elements, so
assistive technology may not be notified when the user activates them.

Examples

Failure Example 1: Scripting a <span> element

Scripted event handling is added to a span element so
that it functions as a link when clicked with a mouse. Assistive
technology does not recognize this element as a link.

Example Code:

<span onclick="this.location.href='newpage.html'">
Fake link
</span>

Failure Example 2: Scripting an <img> element

Scripted event handling is added to an img element so
that it functions as a link when clicked with a mouse. Assistive
technology does not recognize this element as a link.

Example Code:

src="go.gif"
alt="go to the new page"
onclick="this.location.href='newpage.html'"

Failure Example 3: Scripting an <img> element, with keyboard
support

Scripted event handling is added to an img element so
that it functions as a link. In this example, the link functionality
can be invoked with the mouse or via the Enter key if the user agent
includes the element in the tab chain. Nevertheless, the element
will not be recognized as a link.

Failure Example 4: Scripting a <div> element

This example uses script to make a div element behave
like a link. Although the author has provided complete keyboard
access and separated the event handlers from the markup to enable
repurposing of the content, the div element will not be
recognized as a link by assistive technology.