Skip to content
Get packs

Carousel Accessibility Review

Checks carousel markup for pause controls, keyboard access, ARIA and reduced-motion support.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review web page templates, rendered HTML and shared components for slideshow (carousel) accessibility. Once installed, when asked, the agent checks whether carousels have pause or stop controls, keyboard navigation, proper ARIA roles, aria-live announcements of slide changes, and respect for the reduced-motion browser setting. It reports the exact elements or attributes that fall short and suggests fixes.

Great for

  • Front-end developers reviewing a site's carousel or slider components before release
  • Accessibility-minded teams auditing templates that use auto-rotating banners
  • Reviewers who want the final browser-facing HTML checked rather than only the framework source

Skip it if

  • Projects with no carousels, where the checks will not apply
  • Full accessibility audits: the skill focuses on one pattern, so other WCAG issues are outside its scope and may still need dedicated tools or expert review
  • Legal compliance sign-off: the agent's review is advisory and does not replace testing with assistive technology

Try asking

  • “Review our homepage hero carousel template and flag any auto-play without pause controls”
  • “Check the rendered HTML of our product slider for missing ARIA roles and aria-live regions”
  • “Explain to my team what accessibility requirements apply to our image carousel component”
  • “Suggest fixes so our carousel respects prefers-reduced-motion”
Step-by-step guide: how to use Carousel Accessibility ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    carousel-accessibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip carousel-accessibility.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip carousel-accessibility.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the rendered HTML output or a browser-captured DOM, not just framework source, since the skill asks for the final markup to be checked.
  • Pair the review with a real screen reader and keyboard-only test, because static checks cannot confirm the experience.
  • The skill points to references/rule.md for framework-specific examples; ask the agent to consult it for detailed guidance.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.