Accessibility

A tag is a compact, mostly static label — it categorises or highlights content and usually carries no interaction of its own, so it follows no single WAI-ARIA pattern; it meets WCAG 2.1 AA by leaning on plain text semantics. An accessible tag reads the same whether the user sees it, hears it, or tabs to its controls: its label is real text, any decorative icon stays out of the assistive-technology tree, a dismissible tag exposes its close affordance as a native button with a clear name, and its status is never carried by colour alone.

For designers

• The label text (12px Book) against its surface, and every background, border, and status-fill combination, must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
• Status must never be conveyed by colour alone — pair each variant (is-error, is-info, is-success) with text or an icon so the meaning survives for colour-blind and monochrome users. A meaningful icon must not merely duplicate the label; a decorative one carries no meaning at all. Source: WCAG 1.4.1 Use of Color.
• When a tag carries a focusable control — a dismiss button or a link — its focus style must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. A tag link must also read as distinct from the surrounding tag text. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.
• Tags use no animation or flashing and introduce no visual noise, so they raise no motion concern.

For developers

A plain tag is just text inside a .tng-tag container — it takes no role and no interactive semantics, and a screen reader announces its label like any other text. Two decisions shape whether that stays accessible, and both are wired per element in the Labelling elements section below: keep any leading icon decorative so it doesn’t double-announce the label, and — when the tag is dismissible — expose the close affordance as a native <button> with its own accessible name rather than a click-handling <span>. Where a tag contains a link, use a native <a> (.tng-link) so it is focusable and operable for free. Never let the status variant’s colour be the only signal of meaning.

Labelling elements

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

Tag / Label

The .tng-tag container carries no role — it is presentational. Its accessible name is its own text content (the <span> label), so keep that label 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 doesn’t, surface that meaning in text rather than leaving it on a hidden icon.

Dismiss button

When the tag can be removed, the close affordance is a native <button> — it carries role="button" and keyboard operation for free. Give it an accessible name that says what it removes, aria-label="Remove <name>" (e.g. "Remove Hybrid"), and mark its icon aria-hidden="true" so only the label is announced.

Source: WCAG 4.1.2 Name, Role, Value.

Content / Copy guidelines

Tags should use short, descriptive and consistent labels. The tone should be neutral, informative, and suitable for metadata or UI contexts.

• Text: Mandatory. One to three short words (e.g. “Hybrid”, “Low stock”, “Special edition”).
• Capitalisation: Sentence case (e.g. “In progress”).
• Max length: Aim for 18 characters or fewer to ensure layout stability.
• Icons: Optional. Should visually support the text meaning, not repeat it.
• Links: Optional. Must use clear, concise language (e.g. “Edit”, not “Click here”).
• Do not use emojis or punctuation in Tag labels.
• Avoid using verbs in the main label unless combined with a link.