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.

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=”URL of closely related content” 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 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 spectroscopy": gamma spectroscopygamma spectroscopyThe 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

All EPA public web content must adhere to the EPA Web Standards, the U.S. Web Design System guidelines, and the 21st Century Integrated Digital Experience Act.

Original effective date: 09/12/2012
Last approved on: 2/12/2020
Web Council review by: 02/12/2023 (or earlier if deemed necessary by the Web Council)