How to use the Carousel Accessibility Review agent skill

What the skill makes the agent do

Once installed, the agent checks carousels against four areas: whether there are pause or stop controls, whether keyboard navigation works, whether ARIA roles are correct, and whether slide changes are announced through aria-live. It also checks whether the carousel respects the reduced-motion browser setting.

The skill asks the agent to validate the final browser-facing markup, not only the source framework code. The agent reports the exact elements or attributes that fall short and suggests fixes.

• Pause or stop controls for auto-rotating carousels
• Keyboard navigation with arrow keys and Tab
• Proper ARIA roles
• aria-live announcements of slide changes
• Respect for prefers-reduced-motion

Install the skill

Download the skill ZIP from the page where you found this guide. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill available only in that project.

You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP there.

• Personal: unzip into ~/.claude/skills/
• Single project: unzip into the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with natural requests

You do not need a special command. Describe the task in plain language and mention carousels, sliders or auto-rotating banners. The skill's description is written for reviews of templates, rendered HTML and shared components related to carousel accessibility, so requests that name those things are the most likely to use it.

Point the agent at the files or pages you want checked. Rendered HTML is more reliable than framework source because the browser output is what assistive technology receives.

• "Review the carousel component in our header template for accessibility."
• "Check the rendered HTML of the homepage banner slider for pause controls and aria-live."
• "Does this shared slider respect prefers-reduced-motion?"
• "Audit the auto-rotating hero banners in these templates for keyboard navigation."

What a review looks like

The agent flags each problem with the exact element, attribute or route where the rendered HTML falls short, then suggests a fix. For example, it may point to a missing pause button, a live region that is absent, or a motion setting that is ignored.

Use the output as a list of items to verify. Fixes are suggestions, so test them in the browser before shipping.

What the skill needs and what it does not do

The skill lists no requirements. It does not run scripts and does not use the network. Its files are SKILL.md, which holds the core checks, and references/rule.md, which holds fuller implementation details and code examples that the agent can consult.

The skill covers one pattern only. It is not a full accessibility audit, and its review is advisory. It does not replace testing with assistive technology or legal compliance sign-off.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Tips for better results

Give the agent the real markup. Paste rendered HTML from the browser, or point to the component file that outputs it. Name the framework if you know it, since the skill asks the agent to look past framework abstractions.

Run the review on every template that uses auto-rotating banners, not just the most visible one. Then test the fixed pages with a keyboard and a screen reader.

• Include shared components, since one slider may appear on many pages
• Ask for exact elements and attributes so you can find them quickly
• Re-run the review after fixes to confirm each item