Skip to content

Accessibility

The List presents a set of related items as one group. Built on native list markup, it carries list semantics for free, so assistive technology can announce the item count and each item’s position (“list, 3 items, item 1 of 3”) without any extra wiring. It is a static, non-interactive container — it takes no focus and has no keyboard model of its own — and meets WCAG 2.1 AA.

For designers

Section titled “For designers”
  • Item labels must keep accessible contrast against every supported surface (lists sit inside dropdowns, modals, and side panels). Source: WCAG 1.4.3 Contrast (Minimum).
  • Dividers, and any non-text indicator that carries meaning, must have sufficient contrast against the surface behind them. Source: WCAG 1.4.11 Non-text Contrast.
  • If an item’s status is shown with colour, never let colour be the only cue — pair it with text, an icon, or a shape. Source: WCAG 1.4.1 Use of Color.
  • Keep row height and spacing consistent and comfortable so the list stays scannable; where a consumer makes a row interactive, that target should clear the 44 px minimum.
  • Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the list adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

Build the list from native <ul> or <ol> with <li> children so the list role, item count, and each item’s position are exposed to assistive technology automatically — no ARIA needed. Source: WCAG 1.3.1 Info and Relationships.

Watch the Safari quirk: setting list-style: none (as the styled tng-list does to drop the native markers) makes Safari and VoiceOver strip the list role, so the count and position are lost. Restore it with role="list" on the container when your styling removes the markers. The tng-plain-list variant keeps its markers and needs no such fix.

Name the list when its purpose isn’t clear from surrounding context: associate a visible heading with aria-labelledby, or give the container an aria-label, so it doesn’t announce as an unnamed list. When the list follows a heading that already describes it, no extra name is needed. Source: WCAG 4.1.2 Name, Role, Value.

Where a row wraps a link, button, or checkbox to make it actionable, that control’s role, keyboard behaviour, and accessible name belong to the consumer’s content — the List documents only its own item structure.