# Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

ID: F42

Technology: failures

Type: Failure

## When to Use

HTML

## Description

This failure occurs when JavaScript event handlers are attached to elements to emulate links. A 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 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.

It is possible to use the ARIA `role` attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the `role` attribute to identify anonymous elements as links is not recommended.

The `a` and `area` elements are intended to mark up links.

## Examples

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

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

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

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

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

    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:

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

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

    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:

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

## Tests

### Procedure

For all elements presented as links which use JavaScript event handlers to make the element emulate a link:

1. Check if the programmatically determined role of the element is "link".
2. Check if the emulated link can be activated using the keyboard.

### Expected Results

- If check #1 is false then this failure condition applies and the content fails Success Criteria 1.3.1 and 4.1.2. If check #2 is false then this failure condition applies and the content fails Success Criteria 2.1.1 and 2.1.3.

## Related Techniques

- F59
- G115

## Resources

- Accessible Rich Internet Applications (WAI-ARIA)