Links That Open in a New Window

  • I am a link that opens in a new window.

     If you hover over the link above, you’ll notice a “Opens a new window” tooltip in the bottom right corner of the viewport. Creative developed a solution that finds all links in a page that open in a new window via target="_blank" attribute and displays the tooltip if a link is hovered or focused. The solution also adjusts the aria-label on the link if one exists. Another great aspect of the solution is that it utilizes a JavaScript MutationObserver that watches for changes to <a> tags in the <body>. This is necessary for dynamic content that is loaded via AJAX request, for example, after a page has already loaded.

    The social icons in the footer also all open in a new window so those are great examples to check out too. Check them out with your mouse and/or favorite screen reader!

    Our functionality that handles links that open in a new window is based on WCAG 2.0, Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways. More can be found on G201: Giving users advanced warning when opening a new window.

    Examples of Success Criterion 3.2:

    • Check that there is a warning spoken in assistive technology that this link opens to a new window.
    • Check that there is a visual warning in text that this link opens to a new window.