Techniques for WCAG 2.0

On this page:

-

# SCR24: Using progressive enhancement to open new windows on user request

## Applicability

HTML 4.01 and XHTML 1.0

This technique relates to:

- Success Criterion 3.2.5 (Change on Request)
  - How to Meet 3.2.5 (Change on Request)
  - Understanding Success Criterion 3.2.5 (Change on Request)

## Description

The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. If the document type does not allow the `target` attribute (it does not exist in HTML 4.01 Strict or XHTML 1.0 Strict) or if the developer prefers not to use it, new windows can be opened with ECMAScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link (`a` element) and warns the user that the content will open in a new window.

## Examples

### Example 1:

Markup:

The script is included in the head of the document, and the link has an id that can be used as a hook by the script.

Example Code:

    <script type="text/javascript" src="popup.js"></script>
    …
    <a href="help.html" id="newwin">Show Help</a

Script:

Example Code:

    // Use traditional event model whilst support for event registration
    // amongst browsers is poor.
    window.onload = addHandlers;

    function addHandlers()
    {
      var objAnchor = document.getElementById('newwin');

      if (objAnchor)
      {
        objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
        objAnchor.onclick = function(event){return launchWindow(this, event);}
        // UAAG requires that user agents handle events in a device-independent manner
        // but only some browsers do this, so add keyboard event to be sure
        objAnchor.onkeypress = function(event){return launchWindow(this, event);}
      }
    }

    function launchWindow(objAnchor, objEvent)
    {
      var iKeyCode, bSuccess=false;

      // If the event is from a keyboard, we only want to open the
      // new window if the user requested the link (return or space)
      if (objEvent && objEvent.type == 'keypress')
      {
        if (objEvent.keyCode)
          iKeyCode = objEvent.keyCode;
        else if (objEvent.which)
          iKeyCode = objEvent.which;

        // If not carriage return or space, return true so that the user agent
        // continues to process the action
        if (iKeyCode != 13 && iKeyCode != 32)
          return true;
      }

      bSuccess = window.open(objAnchor.href);

      // If the window did not open, allow the browser to continue the default
      // action of opening in the same window
      if (!bSuccess)
        return true;

      // The window was opened, so stop the browser processing further
      return false;
    }

## Resources

Resources are for information purposes only, no endorsement implied.

- Wikipedia: Progressive Enhancement

## Related Techniques

- H83: Using the target attribute to open a new window on user request and indicating this in link text

## Tests

### Procedure

1. Activate each link in the document to check if it opens a new window.

2. For each link that opens a new window, check that it uses script to accomplish each of the following:

   1. indicates that the link will open in a new window,

   2. uses device-independent event handlers, and

   3. allows the browser to open the content in the same window if a new window was not opened.

### Expected Results

- #2 is true.

- Top
- Contents
- Intro
- Previous: Technique SCR22
- Next: Technique SCR26