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.

Carousel wrapper

Wrap the component in a role="group" with aria-roledescription="carousel" and an aria-label to give screen readers context.

<div
  class="tng-count-indicator"
  role="group"
  aria-roledescription="carousel"
  aria-label="Items"
></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"). When navigation does not wrap, use aria-disabled="true" on the boundary button to communicate the disabled state to assistive technology.

<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>