Pips

Overview

Pip indicators provide an accessible way to navigate between items in a carousel or similar component.

Example Usage

The pip indicators are built using native HTML radio inputs, providing built-in accessibility and state management without JavaScript. Each pip expands when selected and includes proper ARIA labels for screen readers.

HTML

<div
  class="control-pip-wrapper skin-control"
  role="radiogroup"
  aria-label="Item navigation"
  aria-describedby="pip-navigation-description"
>

  <span id="pip-navigation-description" class="sr-only"
    >Use arrow keys to navigate between items
  </span
  >

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      checked
      aria-current="page"
      aria-label="Show item 1 of 6"
    />
    <span class="sr-only">Show item 1 of 6
    </span>

  </label>

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-label="Show item 2 of 6"
    />
    <span class="sr-only">Show item 2 of 6
    </span>

  </label>

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-label="Show item 3 of 6"
    />
    <span class="sr-only">Show item 3 of 6
    </span>

  </label>

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-label="Show item 4 of 6"
    />
    <span class="sr-only">Show item 4 of 6
    </span>

  </label>

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-label="Show item 5 of 6"
    />
    <span class="sr-only">Show item 5 of 6
    </span>

  </label>

  <label class="control-pip-label">

    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-label="Show item 6 of 6"
    />
    <span class="sr-only">Show item 6 of 6
    </span>

  </label>

</div>

CSS Variables

Variable	Default Value	Description
`--control-pip-size`	`12px`	Size (width/height) of individual pip indicators
`--control-pip-active-width`	`36px`	Width of the active/selected pip
`--control-pip-gap`	`8px`	Space between pip indicators
`--control-pip-ring-width`	`2px`	Width of the outline/focus ring around pips
`--control-pip-ring-offset`	`2px`	Offset distance of the outline/focus ring
`--control-pip-scale`	`1.1`	Scale factor for pip hover/focus effect
`--control-pip-mobile-size`	`10px`	Size of pip indicators on mobile devices
`--control-pip-mobile-active-width`	`30px`	Width of active/selected pip on mobile devices
`--control-pip-transition`	`var(--duration-speed-default)`	Transition timing for standard pip state changes
`--control-pip-swap-transition`	`var(--duration-speed-slow)`	Transition timing for pip selection changes

Accessibility

Implemented Accessibility Features

Complete keyboard navigation support through native radio controls
Semantic structure using radiogroup role
Clear descriptive labels for navigation (“Show item X of Y”)
Purpose description via aria-description for keyboard usage
Screen reader context through sr-only class
Visual focus indicators through native radio states
Proper use of semantic HTML with <label> elements
Current state indication through native radio checked state
Content relationships via aria-controls
Touch-friendly target sizes through label wrapping
Motion-respecting animations using prefers-reduced-motion
Consistent naming patterns across all controls

Accessibility Considerations when Implementing

Ensure radio input names are unique per instance
Match aria-controls values with corresponding content IDs
Maintain proper tab order matching visual presentation
Consider auto-advance pause on focus/hover
Handle dynamic content updates appropriately
Maintain state synchronization between controls and content