External Links

Introduction

External links point to non-BBC domains.

Whether the external link is inline (e.g. inside a paragraph) or as an item belonging to a list of 'further reading', it must be accompanied by the GEL Iconography external link icon.

External links navigate the user to new and potentially unfamiliar user interfaces. Blind users should be warned of this context change by including some visually hidden text reading "leave BBC site" or similar.

Recommended markup

Inline external link

<p>...
  <a href="http://example.com/link/to/external/resource">
    <span class="gel-sr">leave BBC site:</span>
    Football Association of 
    <span class="gel-nowrap">
      Wales
      <svg class="gel-icon gel-icon--text" aria-hidden="true" focusable="false">
        <use xlink:href="path/to/gel-icons-all.svg#gel-icon-external-link" style="undefined"></use>
      </svg>
    </span>
  </a>
...</p>

Notes

• <span class="gel-sr">leave BBC site:</span>: This text comes before the link's unique text content in both inline and list-based external links. It is visually hidden using the gel-sr class^[1] and warns screen reader users of the change in context target="_blank" will invoke. In most screen reader software it will be read after the link role, resulting in "link, leave BBC site: [unique link text]". The appended colon ensures there is a pause between "leave BBC site" and the link text.
• gel-icon: The icon must use the GEL Iconography external link icon. In addition, apply focusable="false" to ensure Internet Explorer and some versions of Edge do not place the SVG in focus order^[2] if JavaScript is not taking care of this already.
• gel-nowrap: Use this <span> to wrap the icon and the last word of the link's unique text. By applying white-space: nowrap it ensures the icon never becomes a widow (wraps onto a new link by itself)

External link list

<h2>Further reading</h2>
<ul class="gel-external-links">
  <li>
    <a href="http://example.com/external/link">
      <svg class="gel-icon gel-icon--text" aria-hidden="true" focusable="false">
        <use xlink:href="path/to/gel-icons-all.svg#gel-icon-external-link" style="undefined"></use>
      </svg>
      <span class="gel-sr">leave BBC site:</span>
      Football Association of Wales
    </a>
  </li>
  <li>
    <a href="http://example.com/external/link">
      <svg class="gel-icon gel-icon--text" aria-hidden="true" focusable="false">
        <use xlink:href="path/to/gel-icons-all.svg#gel-icon-external-link" style="undefined"></use>
      </svg>
      <span class="gel-sr">leave BBC site:</span>
      Europa League final
    </a>
  </li>
  <li>
    <a href="http://example.com/external/link">
      <svg class="gel-icon gel-icon--text" aria-hidden="true" focusable="false">
        <use xlink:href="path/to/gel-icons-all.svg#gel-icon-external-link" style="undefined"></use>
      </svg>
      <span class="gel-sr">leave BBC site:</span>
      West Bromwich Albion official site
    </a>
  </li>
</ul>

Notes

• The main difference between external links within lists is that the icon comes before the content.
• <ul> and <li>: It is important list markup is used since it identifies itself to assistive technologies, enumerates the items, and provides navigation options in screen readers.
• <h2> In most cases, lists of external links should be introduced by a heading. This makes them more discoverable within the document structure, both visually and by screen reader shortcuts. Make sure the heading is of the correct level (see Headings) and contains suitable text, such as "Further reading" or "Read more".

Recommended layout

The link itself does not need any special styling, and should inherit link styling for the context. But be sure to wrap the last word and icon in a gel-nowrap <span> to stop the icon becoming a widow (inline external links only).

.gel-nowrap {
  white-space: nowrap;
}

Unfortunately, upon removing the bullets from the list using list-style: none, some Voiceover versions cease to identify the list. This can be remedied by placing some arbitrary pseudo-content before each item. In the following solution^[2:1], a zero-width space is added:

.gel-external-links {
  list-style-type: none;
}

.gel-external-links li::before {
  content: '\200B';
}

Some white space is placed between external links in the list formation to improve demarcation and legibility:

.gel-external-links li + li {
  margin-top: 0.5rem;
}

High contrast

How the component looks with a Windows High Contrast Mode theme active.

Reference implementation

Open in new window

Related research

This topic does not yet have any related research available.

Further reading, elsewhere on the Web

---

1. Gist of the gel-sr (visually hidden) class https://gist.github.com/Heydon/c8d46c0dd18ce96b5833b3b564e9f472 ↩︎

2. "Removing SVG Keyboard Focus in IE" — websemantics.uk, https://websemantics.uk/articles/removing-svg-keyboard-focus-in-internet-explorer/ ↩︎ ↩︎