Skip to content

Accessibility

Energy labels present an ordered scale from A to G, with the vehicle’s rating marked as the current value. Accessibility hinges on exposing that scale as an ordered list so its sequence and length are conveyed, and on marking the current rating so assistive technology announces which band applies — meeting WCAG 2.1 AA. The scale is a static read-out, not an interactive control, so accessibility is a matter of semantics and contrast rather than keyboard behaviour.

For designers

Section titled “For designers”
  • The scale bands and any text on them must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
  • The rating must never be conveyed by the band colour alone — pair it with the letter (A–G) and its position on the scale, so the value survives for users who can’t distinguish the colours. Source: WCAG 1.4.1 Use of Color.
  • If a label ever becomes interactive (e.g. a link to the rating’s detail), its focus style must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
  • Use semantic colour tokens rather than fixed values, so the component adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

Render the scale as an ordered list (<ol>): the native list semantics convey both the sequence and the total count, and screen readers announce the position of each rating for free — no extra ARIA is needed for the order itself. A single rating shown on its own is decorative and takes no list markup. The per-element name and state — the list’s accessible name and the marker on the current rating — are in the Labelling elements section below.

Labelling elements

Section titled “Labelling elements”

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

Scale list

The <ol class="tng-energy-labels"> that holds the ratings. Its native list role conveys the sequence and count; name it with aria-label (e.g. "Energy efficiency ratings") so it doesn’t announce as an unnamed list.

Current rating

The list item for the vehicle’s rating. Mark it with aria-current="true" so assistive technology announces it as the current value, and make sure its text names the rating (the letter, e.g. “A”) so the announced value is meaningful rather than an empty position.

Source: WCAG 4.1.2 Name, Role, Value.