Count Indicator

A count indicator shows the current position within a set of items using dots and optional navigation controls.

<div class="tng-count-indicator">
  <div class="tng-count-indicator-helper">1 of 10</div>
  <div class="tng-count-indicator-dots">
    <div class="is-current"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="tng-count-indicator-buttons">
    <button class="tng-icon-button is-sm" aria-label="Previous">
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <button class="tng-icon-button is-sm" aria-label="Next">
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
</div>

Default

1 of 10

Contrast

1 of 10

Accessibility

The following are general recommendations. The exact approach depends widely on your use-case.

Wrapper

The count indicator is a set of navigation controls — it is not a carousel. It can be used in two contexts:

• Inside a carousel or gallery — In this case, role="group" aria-roledescription="carousel" and aria-label belong on the outer content container (the element wrapping both the slides and these controls), not on tng-count-indicator itself.
• Standalone pagination — When paginating a list or search results, use a <nav> element or add role="navigation" so screen readers expose it as a navigation landmark.

<nav class="tng-count-indicator" aria-label="Search results pages">…</nav>

If a landmark is not appropriate (e.g. the controls are already inside a labelled region), role="group" with an aria-label is a lighter alternative.

<div class="tng-count-indicator" role="group" aria-label="Gallery navigation">
  …
</div>

Helper text

Add aria-live="polite" to tng-count-indicator-helper so screen readers announce changes as the user navigates.

<div class="tng-count-indicator-helper" aria-live="polite">1 of 42</div>

Dots

The dots serve as a visual progress indicator. Depending on whether they are an accurate or approximate representation of the item count, choose one of the following patterns.

Decorative dots

When the dot count does not match the actual item count (e.g. a maximum of 10 dots is shown for 42 items), the dots are purely decorative. Add aria-hidden="true" to tng-count-indicator-dots — the helper text already conveys the current state.

<div class="tng-count-indicator-dots" aria-hidden="true">
  <div class="is-current"></div>
  <div></div>
  <div></div>
</div>

Semantic dots

When each dot maps 1:1 to an actual item, give the dots semantic meaning. Add role="group" and an aria-label to tng-count-indicator-dots. Mark each dot with an aria-label describing its position and use aria-current="step" instead of (or alongside) is-current to indicate the active item. The styles already support this — aria-current is handled alongside is-current.

<div class="tng-count-indicator-dots" role="group" aria-label="Progress">
  <div aria-current="step" aria-label="Item 1 of 5"></div>
  <div aria-label="Item 2 of 5"></div>
  <div aria-label="Item 3 of 5"></div>
  <div aria-label="Item 4 of 5"></div>
  <div aria-label="Item 5 of 5"></div>
</div>

Navigation buttons

Use aria-label on the buttons themselves (e.g. "Previous item", "Next item").

<div class="tng-count-indicator-buttons">
  <button class="tng-icon-button is-sm" aria-label="Previous item">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-sm" aria-label="Next item">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>