Inform users when a link opens in a new window

The Challenge
When people view Web pages, they have no way of telling if a link will open in a new browser window. After the fact, they observe that a new window has opened and know to close it if they want to go back to the original site. However, screen readers generally don't alert people that a new browser window is going to open or has opened. This means that when someone using a screen reader attempts to use the "Back" button, nothing happens because there is no browsing history in the new window. In fact, they may find they've opened many new windows and don't know how they got to the latest one. Users with cognitive disabilities also may get confused when presented with multiple browser windows. People should be informed when a link doesn't open in the current window or leads to an external Web site.

Solutions

  • As a general rule, avoid opening new browser windows.
  • If you must open new browser windows or send people to an external site, do one or more of the following:
    • Include an alert in parentheses at the end of the link:

      Web Accessibility in Mind (link opens in new window)
      and
      World Wide Web Consortium (links to external site)

      If this feels too clunky, apply a CSS style to the parenthetical information to "hide" it from sighted users while allowing screen readers to read the text as part of the link.

    • Use a title attribute in your link so that sighted users will see a "tool tip" when hovering over the linked words.

      <a href="http://www.webaim.org" target="_blank" title="Link opens in new window">
      or
      <a href="http://www.w3.org/" title="Link to external site">

    • Add visual cues to convey link information. WebAIM recommends that an icon with a page and an arrow Link opens in new window should denote that a link opens in a new browser window, while an icon with a globe and an arrow Link to external site should indicate that a link goes to an external Web site. The icons are usually placed at the end of the link.