A11y

Implements the WAI-ARIA Carousel pattern. Adds semantic roles and labels so screen readers announce the carousel correctly.

What it adds

The core slider already hides non-visible slides with aria-hidden and maintains a live region that announces the current slide. This plugin adds the full structural layer on top:

Element	Attributes added
Outer wrapper	`role="region"`, `aria-roledescription="carousel"`, `aria-label="..."`
Each real slide	`role="group"`, `aria-roledescription="slide"`, `aria-label="1 of 5"`

With this in place a screen reader will announce "Image carousel, region" on focus, and "slide, 1 of 5" when entering each slide.

Import

import { a11y } from '@andresclua/sliderkit-plugins'

Options

Option	Type	Default	Description
`containerLabel`	string	`'Image carousel'`	`aria-label` on the carousel region. Describe what the carousel contains.
`slideLabel`	string	`'{{index}} of {{total}}'`	Template for each slide's `aria-label`. Use `{{index}}` (1-based) and `{{total}}`.

 Basic example
 import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, a11y } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    a11y(),
  ],
})
 Custom labels
 // Product gallery
a11y({
  containerLabel: 'Product images',
  slideLabel: 'Product photo {{index}} of {{total}}',
})

// Spanish
a11y({
  containerLabel: 'Galería de imágenes',
  slideLabel: 'Imagen {{index}} de {{total}}',
})
 Behaviour notes
  All attributes are removed cleanly on slider.destroy().
 Clone slides (added by loop:true) are not labelled — only real slides.
 The core already sets aria-hidden="true" on off-screen slides and maintains an aria-live="polite" region that announces the current position. This plugin adds the structural carousel semantics on top of that.