Avoid Focusable Inside role=text
Spot and fix interactive elements hidden from screen readers inside role="text" containers.
- 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: a container marked role="text" makes screen readers treat everything inside as plain text, so buttons and links nested inside become invisible to people using assistive technology. When you ask the agent to review HTML or components, it checks for this pattern, explains why it breaks access, and suggests removing the role or moving the interactive elements outside the container.
Great for
- Front-end developers reviewing rendered HTML or component markup for accessibility problems
- Design-system teams auditing shared components for screen reader issues
- Students learning how ARIA roles change what assistive technology exposes
Skip it if
- Projects with no interactive content or no HTML to review, since the rule will not apply
- Replacing a real screen reader or keyboard test; the skill only gives guidance from its text and does not run an audit tool, so results should be verified manually
Try asking
- “Review this component's markup for role="text" containers that hold buttons or links.”
- “Check my card component: are any focusable elements hidden from screen readers?”
- “Fix the role="text" issue in this navigation HTML and explain what changed.”
- “Audit this design-system pattern for focusable descendants inside text roles.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
aria-text.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip aria-text.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip aria-text.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
- Paste the rendered HTML or the component code, not just a description, so the agent can find exact elements.
- Ask for verification steps too, such as checking with a browser accessibility tree or a screen reader, since the skill recommends this.
- Combine with other accessibility skills for broader coverage, as this one only covers this single rule.
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.