Skip to content

Metadata strips

The metadata strip defines key metadata for an item of content, in a compact form

Version:
0.1.0
Status:
Draft

Introduction

The Metadata strip is a simple component to be provided as part of content such as a Promo. It defines key information attributed to the content like its publish date, and derivation.

<dl class="gel-metadata-strip">
  <div>
    <dt class="gel-sr">Published:</dt>
    <dd>
      <span aria-hidden="true">
        <svg class="gel-icon gel-icon--text" focusable="false">
          <use xlink:href="path/to/gel-icons-all.svg#gel-icon-duration"></use>
        </svg>
        1m
      </span>
      <span class="gel-sr">1 minute ago</span>
    </dd>
  </div>
  <div>
    <dt class="gel-sr">From:</dt>
    <dd>
      <a href="link/to/category">UK</a>
    </dd>
  </div>
</dl>
  • <dl> and <div>: The most appropriate markup for key/value based information is the definition (or 'description') list. It is permitted[1] to use <div> elements to wrap pairs of <dt> and <dd> elements for layout purposes.
  • class="gel-sr" for <dt>: The definition titles (<dt>s) are only needed for non-visual clarification in screen reader output. They are hidden visually using the gel-sr class.
  • gel-icon: The SVG icon (if present) is hidden along with the display text. It takes focusable="false" to remove it from focus order in some versions of IE and Edge[2]
  • aria-hidden="true" In some cases, the visually displayed text may not be sufficient for synthetic voice announcement. In these cases, the displayed text (and associated iconography) is hidden from assistive technologies with aria-hidden="true"[3] and an alternative wording is provided non-visually (using the gel-sr class to hide this text visually).

The <dl>, <dt>, and <dd> must have their user agent styles removed. The child <div>s are set to inline-block, with white-space: nowrap.

.gel-metadata-strip > div {
  display: inline-block;
  white-space: nowrap;
}

The purpose of nowrap is to ensure pairs of definition titles and their definitions wrap together and are never split across lines. This aids scanning and comprehension.

A border separator is included between—and only between—definition <div>s using pseudo-content:

.gel-metadata-strip > div + div::before {
  content: '';
  border-left: 1px solid;
  margin: 0 0.25rem;
}

This is preferable to using a character such as a pip ("|") which will be announced unhelpfully in some screen readers.

Some metadata values may be linked, such as the 'From' value in the Expected markup example. It is important these links are not differentiated by colour alone[4]. People who are colour-blind or who use non-colour displays cannot perceive colour differences and will not be able to distinguish the link.

Accompany any colour differentiation with text-decoration: underline, if this style is not already being inherited.

.gel-metadata-strip a {
  text-decoration: underline;
}

Aside from linked metadata, metadata strips are largely static. If a link uses target="_blank", warn the user by incorporating the external link icon and some visually hidden text for screen reader users.

<a href="/link/to/category">
  UK
  <span class="gel-sr">(opens new tab)</span>
  <svg class="gel-icon gel-icon--text" aria-hidden="true" focusable="false">
    <use xlink:href="assets/svg/gel-icons-core-set.svg#gel-icon-external-link"></use>
  </svg>
</a>

Reference implementation

Open in new window

This topic does not yet have any related research available.

Further reading, elsewhere on the Web


  1. "Allow <div> around each <dt><dd> group in <dl>" (WHATWG merged pull request), https://github.com/whatwg/html/pull/1945 ↩︎

  2. Don't make every <svg> focusable by default (issue) — Microsoft, https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8090208/ ↩︎

  3. "Accessibility chops: hidden and aria-hidden" — The Paciello Group, https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ ↩︎

  4. Use Of Color: Understanding WCAG 1.4.1, https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html ↩︎

Copyright © 2019 BBC. This content is published under the Open Government Licence, unless otherwise noted.

Got a minute?

We'd love to know what you think of our website.

Go to survey