Skip to content
Get packs

ARIA Hidden Focus Checker

Flags focusable elements hidden inside aria-hidden containers and suggests accessible fixes.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When this skill is installed, the agent checks rendered HTML and interactive components for elements that a screen reader ignores (marked aria-hidden) but a keyboard user can still tab into. It reports the exact elements, explains why that confuses assistive technology users, and suggests fixes such as adding tabindex="-1" or the inert attribute. It is a review guide: the instructions tell the agent what to look for, and a detailed reference file holds further examples.

Great for

  • Front-end developers reviewing components for keyboard and screen-reader problems
  • Design-system teams checking shared UI patterns such as modals, menus and drawers
  • Anyone preparing an accessibility audit who wants a focused check on focus order

Skip it if

  • Projects that need a full WCAG audit, since this covers one narrow rule about focus inside hidden containers
  • Testing real screen-reader behaviour, which requires running assistive technology rather than reading markup

Try asking

  • “Review this component's HTML for focusable elements inside aria-hidden containers”
  • “Check my modal markup for keyboard focus that lands on hidden content”
  • “Suggest fixes for aria-hidden sections in this page using tabindex or inert”
Step-by-step guide: how to use ARIA Hidden Focus 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.

    aria-hidden-focus.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-hidden-focus.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-hidden-focus.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 the rendered HTML or the component code, not only the source template, so the agent sees the final markup.
  • Ask the agent to explain how to verify the fix in a browser accessibility tool or with a screen reader, since the skill only suggests this.
  • Check the cited rule page at frontendchecklist.io for the latest guidance before relying on the advice in a formal audit.

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.