Create accessible external links

[joemull]

User stories

• As a screen reader user, I do not want links to open in an external tab without my knowing, because I may not know they have opened in that tab, and I can't use "back" to get back to where I was easily
• As a sighted reader, I want external links to open in a new tab consistently, because most websites do this, and I use multiple tabs to keep track of where I was browsing
• As a sighted reader, I want there to be some visual indication of external links

Proposed solution Use JS to detect links to external domains and add attributes as follows:

<a
  href="https://external.example.org"
  rel="noopener"
  target="_blank">Example
  External Resource<span class="sr-only"> 
(opens in new tab)</span></a>

Also, potentially add a visual cue.

This solution would satisfy WCAG 2.2.

Context

• Tailwind CSS sr-only
• Summary blog post with recommended compromise: "External Links, New Tabs, and Accessibility"

dev notes Using an icon to indicate a link opens in a new tab or window (CSS rule that checks target) e.g. a[target="_blank"]:after

@joemull will investigate how this affects TinyMCE and how we can ensure user provided links get this accessibility improvements

[StephDriver]

I have reached a similar conclusion - for external links, we should indicate in the text that the link will be opening in a new tab. And I prefer the solution with a visual cue Something along these lines:

as described on Digital A11y

Perhaps the example that combines the aria-describedby and the visual cue? while adding "opens in a new tab" does satisfy the WCAG, it does add more cognitive load than a visual cue.

[StephDriver]

I wonder whether it would be cleaner to do this just in the CSS without needing any JS, with a target for any links which have other domains?

a[href^="http"]:after