Accessibility in Practice: External Links

Something you're supposed to do with external links is to visually mark them with an icon or indicator as well as some type of screen reader text that informs the user they are leaving the site and/or opening the page in a new window. But how can we do this with Drupal? There are menu links, link fields, and links added via WYSIWYG fields to contend with, not to mention the fact that in most cases we are handing over the administrative keys to clients. You can't expect site admins to have the same level of knowledge and dedication to accessible external link formatting all the time, so we needed to come up with a way to format them automatically. We've crafted a solution that helps address at least the cases of link fields, whether they be menu or otherwise, outlined below.

First, we have this link alter snippet, which will append the appropriate HTML we need for screen reader text and our visual icon to external links:

/**
 * Implements hook_link_alter().
 */
function MODULENAME_link_alter(&$variables) {
  // add "opens in a new window" text to external links or links that have target="_blank".
  if ((!empty($variables['options']['attributes']['target']) && $variables['options']['attributes']['target'] == '_blank')
    || $variables['url']->isExternal()) {
    $variables['text'] = t('@text <span class="external-link-icon" aria-label="(opens in a new window)"></span>', [
      '@text' => $variables['text'],
    ]);
  }
}

This gives us a link output that looks something like this:

<a href="https://linkaddress.com" tabindex="0">
    Link Text <span class="external-link-icon" aria-label="(opens in a new window)"></span>
</a>

Then, we add some styling to add our visual indicator of an external link. In our particular case, we utilized a Font Awesome icon for our external link, but using your own external link icon that fits in with your site's aesthetic should do the trick:

.external-link-icon::before {
  content: '\f08e';
  font-family: "Font Awesome 5 Pro";
  margin-left: 5px;
}

There you have it. Please note that there are a variety of ways to accomplish this task (see WebAIM's writeup on external links), both visually and in code, so take this approach as a foundation to do what fits your site, with a goal of still fulfilling the purpose of external link visual/screen reader indication in a way that works with your site needs.

Takeaway

There is, unfortunately, no single point of consensus on how to present external links, but the basic needs are the same: an external link should have both a visual and screen reader text indicating to the user that they are going to be leaving the site or window. How these manifest themselves is still open for interpretation, but aiming for universally understood graphics and/or simple language lays the best foundation for good external link treatment.