Slider
Sliders move and catch the eye,
But fast and flashing can pass folks by.
Add a pause and let them steer,
With keyboard, label, role all clear.
Testing elements
Post Slider animated
What’s being checked
If the slider is wrapped in a <section> tag or a container with region role, with an aria-label or aria-labelledby attribute naming it.
Slides must be contained in an unordered list.
Users building the slider should have the ability to set heading levels.
Previous/next and dot navigation should be <button> elements
All buttons have meaningful labels.
If dot navigation includes aria-current for the current item
Keyboard focus does not go to any hidden items, for example to links on slides that are not currently visible.
Screen readers don’t read any hidden items.
Focus shifts to the selected slide when using navigation buttons – this is important so screen reader users don’t have to Shift+Tab backward to find the slide they have selected.
Auto-play carousels have a pause button or the ability to add a pause button.
Animations respect preferss-reduced-motion.
All focusable elements have a visible keyboard focus.