Techniques for WCAG 2.0

On this page:

-

# F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable

## Applicability

HTML and XHTML with Scripting.

This failure relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 2.1.1 (Keyboard)
  - How to Meet 2.1.1 (Keyboard)
  - Understanding Success Criterion 2.1.1 (Keyboard)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

## 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.

Example Code:

    function doNav(url)
    {
       window.location.href = url;
    }

    function doKeyPress(url)
    {
       //if the enter key was pressed
       if (window.event.type == "keypress" &&
           window.event.keyCode == 13)
       {
          doNav(url);
       }
    }

The markup for the image is:

Example Code:

    <p>
    	<img src="bargain.jpg"
    		tabindex="0"
    		alt="View Bargains"
    		onclick="doNav('viewbargains.html');"
    		onkeypress="doKeyPress('viewbargains.html');"
    	>
    </p>

### 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.

Example Code:

    window.onload = init;

    function init()
    {
    	var objAnchor = document.getElementById('linklike');

    	objAnchor.onclick = function(event){return changeLocation(event,
    'surveyresults.html');};
    	objAnchor.onkeypress = function(event){return changeLocation(event,
    'surveyresults.html');};
    }

    function changeLocation(objEvent, strLocation)
    {
    	var iKeyCode;

    	if (objEvent && objEvent.type == 'keypress')
    	{
    		if (objEvent.keyCode)
    			iKeyCode = objEvent.keyCode;
    		else if (objEvent.which)
    			iKeyCode = objEvent.which;

    		if (iKeyCode != 13 && iKeyCode != 32)
    			return true;
    	}

    	window.location.href = strLocation;
    }

The markup for the `div` element is:

Example Code:

    <div id="linklike">
    View the results of the survey.
    </div>

## Resources

Resources are for information purposes only, no endorsement implied.

- Accessible Rich Internet Applications (WAI-ARIA) Version 1.0

## Related Techniques

- G115: Using semantic elements to mark up structure

## Tests

### Procedure

1. Check whether there are JavaScript event handlers on an element that emulates a link.

2. Check whether the programmatically determined role of the element is link.

### Expected Results

- If check #1 is true and check #2 is false, then this failure condition applies and content fails the Success Criterion.

- Top
- Contents
- Intro
- Previous: Failure F41
- Next: Failure F43