Accessibility

Accessibility is on by default; there is no module to add.

What the slider does for you

• Roles: the viewport is a region with aria-roledescription="carousel" and your label (or the element's aria-label); every slide is a group with aria-roledescription="slide" and "Slide 3 of 8".
• Only visible slides are reachable: off-screen slides get inert and aria-hidden, so keyboard and screen reader users never land in a hidden slide.
• Announcements: a polite live region announces the slide when the user changes it. While autoplay runs, announcements are off so the reader is not interrupted every few seconds.
• Keyboard: arrows, PageUp/PageDown, Home/End on the focused slider; focusing a link in a partly hidden slide brings that slide into view.
• Autoplay control: a visible pause / play button (WCAG 2.2.2), pause on hover and focus, pause off screen.
• Reduced motion: 3D and WebGL become fades, layers appear without motion, autoplay and Ken Burns are off.
• Split text: headings split into letters keep an aria-label with the whole sentence.
• Real images: backgrounds keep their alt. The console warns about background images without an alt attribute (use alt="" for decorative ones).

Labels in your language

English and Turkish are built in and picked from the page lang (locale: "auto"). Any label can be replaced:

new InsigneSlider(el, {
  label: 'Featured stories',
  i18n: { prev: 'Vorherige Folie', next: 'Nächste Folie', slide: 'Folie {i} von {n}', goTo: 'Gehe zu Folie {i}' },
});

Your part

• Give the slider a name: aria-label="Featured stories".
• Write alt text for meaningful backgrounds.
• Keep text over images readable — a gradient shade behind the copy is usually enough.
• Avoid autoplay for content people must read.