Accessibility

For designers

Colour is not enough

Never rely on colour alone to convey meaning. Pair each colour with text, and add an icon where it reinforces the category, so people who can’t distinguish the colours still understand it.

Make sure the text and icon colour meet WCAG AA contrast (at least 4.5:1) against the surface behind them. On a contrast surface the label gains a background plate from the scheme, which keeps that contrast.

Non-interactive by nature

Labels are informative, not interactive. Don’t style them to look like buttons or chips, and don’t place them in the tab order — that would mislead people into thinking they can be clicked.

Semantic context

When a label is the value of a field — for example in a spec list — keep the relationship clear so it reads as a pair, such as “Fuel type: Hybrid”, rather than the value alone.

For developers

Non-interactive markup

Render labels with a non-interactive element such as <span>. Don’t add role="button" and don’t make them keyboard-focusable.

Decorative icons

The icon is decorative — hide it from assistive technology with aria-hidden="true" so the label isn’t announced twice.

<span class="tng-label is-green">
  <i class="tng-icon icon-self-charging" aria-hidden="true"></i>
  <span>Hybrid</span>
</span>

Hybrid

Expose the relationship

When the label is a field value, mark up the pairing so a screen reader announces “Fuel type: Hybrid” rather than “Hybrid” on its own.

<dl>
  <dt>Fuel type</dt>
  <dd>
    <span class="tng-label is-green">
      <i class="tng-icon icon-self-charging" aria-hidden="true"></i>
      <span>Hybrid</span>
    </span>
  </dd>
</dl>