Skip to content
Get packs

Accordion Accessibility Checker

Reviews accordion markup for keyboard and screen reader accessibility issues

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 code (templates, rendered HTML, shared components) for collapsible sections called accordions. It checks that the clickable headers are real buttons, that they announce whether they are open or closed (aria-expanded), that they link to their content panels (aria-controls), and that keyboard users can operate them with Enter, Space and arrow keys. The agent then reports the exact elements or attributes that break these rules and suggests fixes.

Great for

  • Front-end developers auditing a website or component library for accessibility
  • Teams preparing a site for WCAG-style accessibility review
  • Designers or QA staff checking that FAQ or menu accordions work without a mouse

Skip it if

  • Projects that do not use accordions, since the checks only apply to that pattern
  • Certified accessibility compliance: the skill is a checklist-based guide and cannot replace testing with real screen readers or an accessibility audit
  • Reviewing live, JavaScript-rendered pages without access to the rendered output, because the rules focus on the final browser markup

Try asking

  • “Review this React accordion component for keyboard accessibility and aria-expanded usage”
  • “Check the rendered HTML of our FAQ page for accordion ARIA problems”
  • “Explain to a junior developer how accessible accordions should be built”
  • “Suggest fixes for the accordion templates in our Rails views”
Step-by-step guide: how to use Accordion Accessibility CheckerInstall, 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.

    accordion-accessibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip accordion-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

  • Paste or point the agent at the rendered HTML from the browser, not only the framework source, since the skill asks for the final markup.
  • Ask for a list of exact elements and attributes that fail, so fixes are easy to apply.
  • Test the result with a keyboard and a screen reader, because the skill's guidance is a static review and cannot verify real behaviour.

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.