Web Standard: Linking to Related Content via Pop-ups, Overlays, New Browser Tabs/Windows and Same Browser Tabs/Windows

This standard was previously titled "Pop-ups and New Browser Windows."

Definitions

  • Closely related content is content that is intrinsically connected to a subset of content in the existing window.  For example, 
    • A definition is closely related to the word being defined
    • A description is closely related to the name of a process or technology
    • An answer key is closely related to a set of quiz questions
    • A larger version of an image is closely related to a smaller version of the same image.
    • A video is closely related to a still image of that video
    • An application is closely related to a description of that application, and to instructions for that application.
    • Location attributes are closely related to the location (point, line or polygon) on a map
  • A pop-up is a window, smaller than the full screen, intended to supplement the primary browser window.
  • An overlay is a colorbox, lytebox or other modal box, a window that requires you to do something in it (including closing it) before you can return to the main window, overlaid on top of the primary browser window.
  • New browser windows are typically the same size as the original window, and usually have their own stand-alone information.

Content Requirements

  • Do not use pop-ups, overlays, new windows or tabs unless the content they display is closely related to the content in the existing window (see the definition of “closely related content” above). 
  • Include text identifiers.  When displaying closely related content, if the content opens in a pop-up, overlay, new window or tab, use text identifiers after or nearby the link to warn your visitors that clicking on the particular link(s) will result in a pop-up, or colorbox, new window or tab opening.  
    • Exceptions: 
      • Locations on web maps and map applications that, when clicked, result in a pop-up, overlay, or similar feature, do not need to include text identifiers. 
      • Text to which the "Add Definitions" feature is applied does not need to include a text identifier.

Examples

For overlays, see: Style Guide: Colorbox

About this Standard

Effective date: 09/12/2012
Date approved: 10/08/2014
Web Council review by: 11/01/2016 (or earlier if deemed necessary by the Web Council)

How a Colorbox Looks: This is the Colorbox Heading

... and this is the colorbox text.