Guide · Agent skill
How to use the Avoid aria-hidden on Body agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-hidden-body skill is an agent skill built from the Front-End Checklist rule that the document body should never be marked aria-hidden="true". It is useful for front-end developers reviewing modal and overlay code, and for teams auditing component libraries. After this guide you will know what the skill checks, how to install it, and how to ask an agent to run the review.
Avoid aria-hidden on Bodythedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the aria-hidden-body skill ZIP from its page in our directory.
- 2Unzip the folder. Extract it so you have a folder containing SKILL.md and references/rule.md.
- 3Place it in your skills folder. Move the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ inside a project.
- 4Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask for a review in plain language. Describe the modal, overlay or component you want checked and ask about aria-hidden on the body.
- 6Apply and verify the fix. Move aria-hidden to background containers only, then test with browser accessibility tools or a screen reader.
What the aria-hidden-body skill makes the agent do
The skill teaches an agent one accessibility rule: the page's body element should never have aria-hidden="true". Setting it there hides the whole site from screen readers, which the source describes as rendering the site completely unusable for those users. The mistake often comes from modal dialog code that manages open and closed states.
When the agent reviews HTML or interactive components, it checks native HTML semantics first, then keyboard behaviour, focus flow, accessible names and screen-reader output where relevant. If it finds the body hidden, it flags the exact element. Its suggested fix is to remove aria-hidden from the body and apply it only to specific background containers while a modal is open.
Install the aria-hidden-body skill
Download the ZIP from the skill's page in our directory and unzip it. The skill is a folder containing SKILL.md and references/rule.md. Place the folder in ~/.claude/skills/ to make it available to your own Claude setup, or in a project's .claude/skills/ folder to share it with that project.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with natural requests
You do not need a special command. Describe the review you want in plain language and mention the thing being checked, such as a modal, overlay or component. The skill's description covers reviewing rendered HTML, interactive components and design-system patterns related to this rule, so requests in that area are the ones it is meant for.
- Check this modal markup for aria-hidden on the body.
- Review this dialog component for accessibility problems before I merge it.
- Screen reader users say our site is silent after opening the menu. Look for aria-hidden on body or a wrapper.
- Audit our design system's overlay patterns for focus and keyboard issues related to hidden content.
Examples of what the review looks like
The source's reference file shows the pattern to look for. The correct version keeps aria-hidden="true" on a background container such as an app root, while a modal portal stays visible to assistive technology. The incorrect version puts aria-hidden="true" directly on the body, so the whole page disappears from the accessibility tree.
Use the output as a checklist. The skill points to exact elements, roles, labels and focus behaviour that break the rule, and suggests how to verify the fix with browser accessibility tooling or assistive technology.
<!-- Correct: hide background content only -->
<body>
<div id="app-root" aria-hidden="true">...</div>
<div id="modal-portal">...</div>
</body>
<!-- Incorrect: hides the whole page -->
<body aria-hidden="true">...</body>What the skill needs and how it runs
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. Its files are SKILL.md and references/rule.md, which are plain text instructions the agent reads.
Because the skill runs no scripts and makes no network calls, it cannot test your page in a browser. Verification is something you do with browser accessibility tools or real assistive technology after the agent suggests a change.
Tips for getting useful results
Give the agent the markup for the modal or overlay, plus the code that opens and closes it. The body attribute is often set in that lifecycle code, not in the static HTML, so the surrounding logic matters.
Treat the skill as one rule, not a full audit. It is a focused check for a single mistake.
- Include the open and close handlers, not just the markup.
- Ask the agent to check the state at every point in the lifecycle.
- Re-test with a screen reader after applying the suggested fix.
What people use it for
- Reviewing a modal dialog's open and close code for aria-hidden left on the body.
- Auditing a design system's overlay components before release.
- Investigating a report that screen reader users hear nothing on a page.
- Checking rendered HTML for accessible names and focus flow around dialogs.
Frequently asked questions
Is the aria-hidden-body skill free?
The skill is published under the MIT licence, as listed on its page. Check the licence file in the source repository for the full terms.
What do I need to use the aria-hidden-body skill?
The listing states no requirements. It runs no scripts and uses no network access, so it works from its SKILL.md and reference file.
Where do I install the aria-hidden-body skill?
Unzip the downloaded folder into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Why is aria-hidden on the body a problem?
aria-hidden removes an element and all its children from the accessibility tree. On the body, that hides the whole page from screen readers.
Can this skill replace a full accessibility audit?
No. The skill covers only this one rule and cannot replace a full review or testing with real assistive technology.
Does the skill fix my code automatically?
The skill suggests fixes, such as removing aria-hidden from the body and using it on background containers while a modal is open. It does not run scripts or test your page, so you apply and verify changes yourself.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers and teams who review modal, overlay or component code and want a focused check for one critical rule. It is a poor choice for projects without modals or overlays, where the rule rarely applies, and for anyone who needs a complete accessibility audit.
Download the skill