How to use the Accordion Accessibility Checker agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. The accordion-accessibility skill is focused on one pattern: accordions. When it applies, the agent reviews templates, rendered HTML and shared components that produce accordion markup.

The skill checks that clickable headers are real button elements, that each button announces whether its section is open or closed using aria-expanded, that each button links to its content panel using aria-controls, and that keyboard users can operate the accordion with Enter, Space and arrow keys. The agent then reports the exact elements or attributes that break these rules and suggests fixes.

How do you install the accordion-accessibility skill?

Download the ZIP for the skill from the item page. Then choose one of two routes depending on how you use your agent.

For Claude Code, unzip the download into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill limited to one codebase. For the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

How do you trigger the skill with a natural request?

You do not need a special command. The skill's description tells the agent to use it when you review templates, rendered HTML or shared components for accordions. Ask in plain language and name the files or pages you care about.

Good requests mention accordions explicitly and point at the code, for example asking the agent to check the FAQ component's markup or the rendered HTML of a product page. If your accordion is built with a JavaScript framework, mention that you want the final browser output checked, since the skill focuses on what the browser receives.

• Check the accordion markup in src/components/Faq.html for keyboard and ARIA problems.
• Review the rendered HTML of the pricing page's accordions for aria-expanded and aria-controls.
• Audit our shared Accordion component and tell me which elements break the keyboard rules.

What does a good review look like?

The skill asks the agent to flag exact elements, attributes and routes where the rendered HTML breaks the rule, rather than giving general advice. You should expect a list that points to specific elements, the attribute that is missing or wrong, and a suggested fix.

The reference material in references/rule.md includes a code example of an accordion built from h3 headings containing button triggers, each with aria-expanded, aria-controls and an aria-labelledby region panel. The agent can use this pattern as a model when suggesting changes.

• Triggers should be button elements inside heading elements.
• Each trigger should carry aria-expanded and aria-controls.
• Panels should be linked back to their trigger, as in the example's aria-labelledby.

What are the limits and safety notes?

This skill is a checklist-based guide. It cannot replace testing with real screen readers or a formal accessibility audit. It only applies to projects that use accordions, and it works best on final browser-facing markup rather than framework source alone.

The skill does not run scripts and does not use the network. It requires nothing beyond the agent itself, according to the item's details.

• Not a certified compliance tool.
• Does not run scripts.
• Does not use the network.
• Rules focus on the final browser markup, so JavaScript-rendered pages need access to their rendered output.

What tips help get useful results?

Give the agent the rendered output when you can. Source templates can hide problems that only appear once a framework generates the final HTML. Keep the review scoped to accordion components so the findings stay focused.

Treat the findings as a starting point. Test the accordion with a keyboard and, where possible, a real screen reader before you sign off.

• Paste or point to rendered HTML, not only source templates.
• Review one shared component at a time for clearer findings.
• Re-run the review after fixes to confirm the attributes now match.