Accessibility Guide

<!-- Slider container with ARIA role -->
<div id="slider-id" class="tns-slider tns-carousel">
  <!-- Slides with ARIA attributes -->
  <div id="slider-id-item0" class="tns-item" aria-hidden="false" tabindex="0">
    <!-- Visible slide -->
  </div>
  <div id="slider-id-item1" class="tns-item" aria-hidden="true" tabindex="-1">
    <!-- Hidden slide -->
  </div>
</div>

<div class="tns-liveregion tns-visually-hidden" 
     aria-live="polite" 
     aria-atomic="true">
  slide <span class="current">1</span> of 5
</div>

<!-- Controls container -->
<div class="tns-controls" 
     aria-label="Carousel Navigation" 
     tabindex="0">
  <button type="button" 
          data-controls="prev" 
          tabindex="-1" 
          aria-controls="slider-id">
    prev
  </button>
  <button type="button" 
          data-controls="next" 
          tabindex="-1" 
          aria-controls="slider-id">
    next
  </button>
</div>

<!-- Navigation container -->
<div class="tns-nav" aria-label="Carousel Pagination">
  <button type="button" 
          data-nav="0" 
          tabindex="0" 
          aria-label="Carousel Page 1 (Current Slide)" 
          aria-controls="slider-id" 
          class="tns-nav-active">
  </button>
  <button type="button" 
          data-nav="1" 
          tabindex="-1" 
          aria-label="Carousel Page 2" 
          aria-controls="slider-id">
  </button>
</div>

<button type="button" 
        data-action="stop" 
        aria-label="stop animation">
  <span class="tns-visually-hidden">stop</span> animation
</button>

var slider = tns({
  container: '.my-slider',
  items: 3,
  arrowKeys: true  // Enable keyboard navigation
});

var slider = tns({
  container: '.my-slider',
  controls: true  // Controls get automatic keyboard support
});

var slider = tns({
  container: '.my-slider',
  nav: true
});

var slider = tns({
  container: '.my-slider',
  items: 3,
  controls: true,
  nav: true,
  arrowKeys: true,  // Global arrow key support
  autoplay: false   // Avoid auto-advancing during keyboard navigation
});

/* Focus styles for controls */
.tns-controls button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* Focus styles for navigation */
.tns-nav button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
}

/* Never remove focus indicators */
/* Bad: button:focus { outline: none; } */

var slider = tns({
  container: '.my-slider',
  items: 3
});

// Ensure focusable elements in hidden slides are properly hidden
slider.events.on('indexChanged', function(info) {
  // Hidden slides already have tabindex="-1"
  // Additional interactive elements are automatically handled
});

var slider = tns({
  container: '.my-slider',
  items: 3,
  controlsText: [
    '<span aria-hidden="true">❮</span><span class="sr-only">Previous slide</span>',
    '<span aria-hidden="true">❯</span><span class="sr-only">Next slide</span>'
  ],
  autoplayText: [
    '<span class="sr-only">Start automatic slideshow</span>',
    '<span class="sr-only">Stop automatic slideshow</span>'
  ]
});

/* Screen reader only text */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<div class="my-slider">
  <div>
    <img src="product1.jpg" alt="Red running shoes with white stripes">
    <h3>Running Shoes</h3>
    <p>Lightweight and comfortable for daily runs.</p>
  </div>
  <div>
    <img src="product2.jpg" alt="Blue hiking boots with yellow laces">
    <h3>Hiking Boots</h3>
    <p>Durable boots for mountain trails.</p>
  </div>
</div>

<!-- Automatically updated by Tiny Slider -->
<div class="tns-liveregion tns-visually-hidden" 
     aria-live="polite" 
     aria-atomic="true">
  slide <span class="current">3</span> of 5
</div>

var slider = tns({
  container: '.my-slider',
  items: 3,
  autoplay: true,
  autoplayButtonOutput: true,  // Required for accessibility
  autoplayTimeout: 5000
});

var slider = tns({
  container: '.my-slider',
  autoplay: true,
  autoplayHoverPause: true  // Pause when user hovers
});

var slider = tns({
  container: '.my-slider',
  autoplay: true
});

// Pause autoplay when any slide element receives focus
var sliderContainer = document.querySelector('.my-slider');
sliderContainer.addEventListener('focusin', function() {
  slider.pause();
});

var slider = tns({
  container: '.my-slider',
  autoplay: true,
  autoplayResetOnVisibility: true  // Pause when tab is hidden (default: true)
});

<!-- Good: Semantic structure -->
<section aria-label="Featured Products">
  <h2>Featured Products</h2>
  <div class="my-slider">
    <article>
      <img src="product.jpg" alt="Product description">
      <h3>Product Name</h3>
      <p>Product description</p>
      <a href="/product">View Details</a>
    </article>
  </div>
</section>

/* Ensure WCAG AA compliance (4.5:1 for normal text) */
.tns-controls button {
  background: #333;  /* Dark background */
  color: #fff;       /* White text */
}

.tns-nav .tns-nav-active {
  background: #0066cc;  /* Sufficient contrast with surroundings */
}

/* Show current slide clearly */
.tns-slide-active {
  border: 3px solid #0066cc;
}

/* Indicate disabled controls */
.tns-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Clear focus indicators */
button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tns-slider,
  .tns-item {
    transition: none !important;
    animation: none !important;
  }
}

var slider = tns({
  container: '.my-slider',
  speed: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300
});

/* Ensure adequate touch target size */
.tns-controls button,
.tns-nav button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Add spacing between touch targets */
.tns-nav button {
  margin: 0 8px;
}

var slider = tns({
  container: '.my-slider',
  items: 3,
  controls: true,      // Prev/next buttons
  nav: true,          // Dot navigation
  arrowKeys: true,    // Keyboard arrows
  mouseDrag: true,    // Mouse dragging
  touch: true         // Touch swiping
});

// Prefer manual control
var slider = tns({
  container: '.my-slider',
  autoplay: false  // Let users control navigation
});

// If autoplay is required:
var slider = tns({
  container: '.my-slider',
  autoplay: true,
  autoplayButtonOutput: true,  // Must provide pause control
  autoplayHoverPause: true,    // Pause on hover
  autoplayTimeout: 7000        // Longer intervals
});

# Install accessibility testing tools
npm install --save-dev axe-core pa11y

// Example: Automated accessibility test
const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/slider-page');
  
  const results = await new AxePuppeteer(page).analyze();
  console.log(results.violations);
  
  await browser.close();
})();