Avoid aria-hidden on Body
Reviews HTML and components to catch aria-hidden on the document body that hides the whole page from screen readers.
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
This skill teaches the agent a single accessibility rule from the Front-End Checklist: the page's body element should never be marked aria-hidden="true", because that hides the whole site from screen readers. When reviewing HTML or interactive components, the agent checks for this mistake (often caused by modal dialog code), checks native HTML semantics, keyboard behaviour, focus flow and accessible names, and suggests moving aria-hidden to specific background containers while a modal is open.
Great for
- Front-end developers reviewing modal or overlay code
- Teams auditing a design system or component library for accessibility
- Anyone debugging a page where screen reader users report the site is silent
Skip it if
- Projects that do not use modals or overlays, since the rule rarely applies (low value, not a risk)
- Complete accessibility audits, because this skill covers only one rule and cannot replace a full review or testing with real assistive technology
Try asking
- “Review this modal open/close code and check whether aria-hidden ends up on the body.”
- “Audit my React app's layout component for accessibility problems with aria-hidden.”
- “Why does my screen reader say nothing on this page? Check for aria-hidden on the body.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
aria-hidden-body.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip aria-hidden-body.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip aria-hidden-body.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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
- Point the agent at the modal or dialog code that toggles state, since that is where the body attribute is usually set.
- Ask it to verify fixes with browser accessibility tooling or a screen reader, because reading the markup alone is not proof.
- The skill's detailed examples live in references/rule.md; ask the agent to consult it for framework-specific 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.