Skip to content

Accessibility

A Label is a small, non-interactive visual element that categorises content or carries a quick piece of technical information, with or without a leading icon. It follows no single WAI-ARIA pattern — it isn’t interactive — and meets WCAG 2.1 AA by leaning on plain text semantics: its label is real text, any decorative icon stays out of the assistive-technology tree, its meaning is never carried by colour alone, and it stays out of the tab order so it is never mistaken for a control.

For designers

Section titled “For designers”
  • The label text and icon must maintain accessible contrast (at least 4.5:1) against every supported surface. On a contrast surface the scheme adds a background plate that preserves it. Source: WCAG 1.4.3 Contrast (Minimum).
  • Meaning must never be conveyed by colour alone — pair each colour with text, and add an icon where it reinforces the category, so users who can’t distinguish (for example) the green and red variants still understand it from the text and icon. Source: WCAG 1.4.1 Use of Color.
  • Labels are informative, not interactive. Don’t style them to look like buttons or chips — that would mislead people into thinking they can be clicked.
  • When two Labels are read together as a pair (a double label, split by a vertical divider), name what the two share so the relationship is explicit — the divider itself is decorative and carries no meaning. Each Label must still meet the 4.5:1 contrast ratio on its own; pairing them adds no new contrast requirement.

For developers

Section titled “For developers”

A Label is just text inside a .tng-label container — it takes no role and no interactive semantics, and a screen reader announces its text like any other content. Two things keep it accessible, both wired per element in the Labelling elements section below: keep any leading icon decorative so it doesn’t double-announce the label, and never give the Label interactive semantics or a tab stop, so it isn’t mistaken for a control. When a Label stands in as the value of a labelled field (for example “Fuel type: Hybrid”), make sure the surrounding structure makes that pairing clear so a screen reader announces the term and value together.

Two Labels can also form a double label — read together as a pair, split by a vertical divider (its markup is on the Develop tab). Wrap the pair in a container with role="group" and an aria-label that names the relationship, so a screen reader announces them as one named group rather than two loose values, and keep the divider decorative with aria-hidden="true" so it isn’t announced as “vertical bar”.

Labelling elements

Section titled “Labelling elements”

Give every element the role, name, and state assistive technology needs.

Label

The .tng-label container carries no role — it is presentational. Its accessible name is its own text content, so keep that text short and self-describing; it announces as plain text with no added ARIA.

Decorative icon

The leading <i class="tng-icon"> is decorative: mark it aria-hidden="true" so it is removed from the accessibility tree and never doubles the label. If an icon genuinely adds meaning the label’s text doesn’t, surface that meaning in text rather than leaving it on a hidden icon.

Source: WCAG 4.1.2 Name, Role, Value.