Add visual and accessible indicators when a link opens in a new window

[carrythebanner]

Opening a link in a new window is often best avoided, but sometimes useful. For example, the "Markdown" help link on the "Add an Event" form opens in a new window so that you don't lose your progress on the form.

An unexpected change of context can be surprising, though, and doubly so for someone using a screen reader or other assistive tech. There should be visible and accessible indicators to clue people in that the link will open in a new window.

• Add title="Opens in a new window" to the link element. This will appear on mouse hover, and is typically announced to screen readers when focused.
• Add a visual differentiator, such as an icon. I recommend placing it in the DOM (rather than CSS-inserted as ::aftercontent) so that it can be marked as redundant and skipped by screen readers with aria-hidden="true".

You can see an example of this in action on https://www.shift2bikes.org/ — in the main nav, see "Midnight Mystery Ride" under "Featured Events."

Additionally, a good practice for external links that open in a new window is adding rel="noopener" (see https://mathiasbynens.github.io/rel-noopener/).