Accessibility

The count indicator pairs a live status label (“1 of 6”) with previous / next controls, so it has no single WAI-ARIA interaction pattern of its own — it leans on live region behaviour for the count and native <button> semantics for the controls, and meets WCAG 2.1 AA. An accessible count indicator announces the current position as it changes, names each control, and exposes the boundaries of the sequence — so the user’s place is clear whether they see it, hear it, or tab through it.

For designers

• The label and the icon buttons — including their hover, focus, and disabled states — must maintain accessible contrast on every supported surface, including the on-image variant placed over photography. Source: WCAG 1.4.3 Contrast (Minimum).
• The disabled (boundary) state must never be conveyed by colour alone — the chevron’s shape already carries meaning; pair it with helper text where ambiguity remains. Source: WCAG 1.4.1 Use of Color.
• Focus styles 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 (e.g. foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.

For developers

The wrapper (.tng-count-indicator) is presentational, not a landmark — the landmark belongs on the surrounding region (carousel, gallery, paginated list) the indicator sits inside. Promote the wrapper itself only when that context isn’t already labelled. The controls are native <button> elements, so they carry their own semantics and keyboard operation for free; keep the chevron icons out of the accessibility tree with aria-hidden="true". Interactive targets must be at least 44 px high for comfortable touch use — comfortably clearing the WCAG AA minimum. Source: WCAG 2.5.8 Target Size (Minimum). Each element’s role, accessible name, and state are in the Labelling elements section below.

Labelling elements

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

Wrapper

Presentational by default — it takes no role. When the surrounding context isn’t already labelled, promote it to a landmark so the cluster is discoverable as a unit: <nav aria-label="Search results pages"> for pagination, or role="group" with an aria-label (e.g. "Gallery navigation") for a gallery.

Label

The count read-out (.tng-count-indicator-label). Add aria-live="polite" so assistive technology announces the new position as the user navigates; its text (“1 of 6”) is the accessible status.

Navigation buttons

Each icon-only <button> takes its accessible name from aria-label (e.g. "Previous item" / "Next item"), with the chevron marked aria-hidden="true". At the ends of the sequence, add the native disabled attribute to the boundary button rather than hiding it — screen-reader users discover the limit that way, and the focus order stays stable.

Source: WCAG 4.1.2 Name, Role, Value.