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, lightbox, 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 or tabs 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 browser 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.
• target="_blank" is a bad security practice. If you must force a new tab/window, also include rel="noopener noreferrer" to prevent tab hijacking.
• Do not force downloading of PDF files. PDFs should open in the browser. If you would like the PDF to open in another tab or window, follow the other requirements in this standard.

Examples

• Sample text identifiers:
  • "(link will open in a new browser tab or window)"
  • "Note that all links below open in pop-ups."
• View:
  • How using the code <a href="/URLofcloselyrelatedcontent" target="_blank" rel="noopener noreferrer"> works to open a new window or tab (as selected by each visitor in his or her browser preferences). Note that clicking on this example link will result in the Web Guide homepage opening in a new window or tab.
  • How colorboxes look, using the directions on the Javascript: Colorbox page.
  • What visitors see when the Add Definitions feature is used for the term "gamma spectroscopygamma spectroscopy The analysis of photons (X-ray or Gamma) emitted from radioactive atoms as they undergo transformations to more stable atoms. The RadNet Fixed (Stationary) Monitors contain a detector system that provides information on the quantity and energy of photons emitted by radioactive material captured on the air filter (and the surroundings). These data may then be used by trained spectroscopists to identify the radioactive atoms that are emitting the gamma radiation.": (click the link to see).

For overlays, see: Style Guide: Colorbox

About this Standard

Original effective date: 09/12/2012
Last approved on: 04/13/2022
Web Council review by: 04/13/2025 (or earlier if deemed necessary by the Web Council)