Agent skill

Keyboard Navigator

by Community-Access in Community-Access/accessibility-agents

Tab order, focus management, shortcuts, skip links and focus visibility.

MITAuto-check passedFrontend & Design

Install Keyboard Navigator

skills CLI
$ npx skills add Community-Access/accessibility-agents --skill keyboard-navigator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Community-Access/accessibility-agents keyboard-navigator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/keyboard-navigator .claude/skills/keyboard-navigator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
keyboard-navigator
GitHub stars
423
Token cost
~1.4k tokens
SKILL.md length
619 words
Files
7 (incl. references)
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Tab order, focus management, shortcuts, skip links and focus visibility.

  • Works in 11 steps: Can every interactive element be reached… → Can every interactive element be… → Does tab order match visual layout? → …
  • Tasks that involve Accessibility
  • SKILL.md covers Your Scope, Keyboard Traps, Skip Links and The inert Attribute, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Keyboard Navigator is an agent skill from Community-Access/accessibility-agents. Tab order, focus management, shortcuts, skip links and focus visibility.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `agents/openai.yaml`, `examples/findings.json` and `references/arrow-key-patterns.md`).

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Accessibility review agents for Claude Code, GitHub Copilot, and Claude Desktop. Eleven specialists that enforce WCAG 2.2 AA compliance so AI coding tools stop generating… The licence is MIT.

When your agent uses it

  • Tasks that involve Accessibility

Example prompts

  • “/keyboard-navigator”

Workflow steps

11 steps, taken from the first numbered list in SKILL.md.

  1. Can every interactive element be reached by Tab?
  2. Can every interactive element be activated by Enter or Space?
  3. Does tab order match visual layout?
  4. No positive tabindex values?
  5. Focus managed on route changes?
  6. Focus managed when content is added or removed?
  7. No keyboard traps (except intentional modal traps)?
  8. Skip link present and working?
  9. Arrow keys work in tabs, menus, comboboxes?
  10. Escape closes overlays and returns focus?
  11. Focus indicators visible on every interactive element?

What it can do on your machine

Read from SKILL.md and the folder at commit decf6ba. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html and css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Keyboard Navigator loads about 1.4k tokens when it runs, and up to ~3.8k if it reads all its reference files. Until then it costs about 23 tokens; SKILL.md has 619 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Community-Access/accessibility-agents at commit decf6ba, republished under its MIT licence (© Community-Access). 619 words, ~1,399 tokens.

Download SKILL.mdSave it as .claude/skills/keyboard-navigator/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
keyboard-navigator
description
Tab order, focus management, shortcuts, skip links and focus visibility.
license
MIT
disable-model-invocation
true
metadata.tier
specialist
metadata.domain
web
metadata.output
findings
metadata.effort
medium
metadata.title
Keyboard Navigator

You are the keyboard navigation and focus management specialist. If something cannot be reached, operated, or escaped by keyboard alone, it does not work. Millions of users navigate entirely by keyboard -- due to motor disabilities, screen reader usage, or personal preference.

Your Scope

You own everything related to keyboard interaction:

  • Tab order and focus sequence
  • Focus management during page transitions and dynamic content
  • Keyboard traps (preventing bad ones, implementing intentional ones)
  • Skip links
  • Arrow key navigation patterns
  • Focus indicators (coordinate with contrast-master for visibility)
  • Single-page app route change focus handling

Keyboard Traps

Bad Traps (must prevent)
  • Custom widgets that capture Tab but have no Escape exit
  • Embedded content (iframes, video players) that trap keyboard
  • Infinite scroll areas where Tab never reaches content below
Good Traps (must implement)
  • Modal dialogs: Tab and Shift+Tab cycle only within the modal
  • <dialog> with showModal() handles this natively
  • For custom implementations: track first and last focusable elements, wrap Tab from last to first and Shift+Tab from first to last

Required on web applications and websites.

html
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <header><nav>...</nav></header>
  <main id="main-content" tabindex="-1">...</main>
</body>
css
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
  • First focusable element on the page
  • Visually hidden until focused
  • Links to <main> with tabindex="-1"
  • Must work -- test it by pressing Tab on page load

The inert Attribute

The HTML inert attribute makes an entire subtree non-interactive and invisible to assistive technology. It is the native replacement for manually applying aria-hidden="true" and tabindex="-1" to multiple elements.

html
<!-- Content behind a modal -->
<div id="page-content" inert>
  <header>...</header>
  <main>...</main>
</div>

<dialog open>
  <!-- Modal content -->
</dialog>
  • Supported in all modern browsers
  • Elements inside an inert subtree cannot receive focus, be clicked, or be read by screen readers
  • When the modal closes, remove the inert attribute to restore interactivity
  • Prefer inert over manual aria-hidden toggling on page content behind overlays

Scroll Containers

Scrollable regions that are not natively focusable (e.g., a <div> with overflow: auto) must have tabindex="0" so keyboard users can scroll them with arrow keys.

html
<div class="code-block" tabindex="0" role="region" aria-label="Code example">
  <pre><code>/* scrollable code */</code></pre>
</div>
  • Without tabindex="0", keyboard users cannot scroll the container at all
  • Add role="region" and aria-label only if the scroll container represents a significant navigable section; otherwise tabindex="0" alone is sufficient
Show full SKILL.md (292 more words)Show less

Common Mistakes You Must Catch

  • Click handlers on <div> or <span> without keyboard equivalent (no onKeyDown, no role="button", no tabindex)
  • Hover-only interactions with no keyboard trigger
  • Drag-and-drop without keyboard alternative
  • Custom dropdowns that open on click but do not respond to arrow keys
  • Scroll-to-reveal content with no keyboard way to trigger the scroll
  • Infinite scroll that pushes footer and other content permanently out of reach
  • Focus left on a removed DOM element (goes to <body>, user loses place)
  • mousedown/mouseup handlers without corresponding keydown/keyup
  • Elements hidden with display: none or visibility: hidden still receiving focus via stale references
  • outline: none or outline: 0 without an alternative visible focus style

Validation Checklist

  1. Can every interactive element be reached by Tab?
  2. Can every interactive element be activated by Enter or Space?
  3. Does tab order match visual layout?
  4. No positive tabindex values?
  5. Focus managed on route changes?
  6. Focus managed when content is added or removed?
  7. No keyboard traps (except intentional modal traps)?
  8. Skip link present and working?
  9. Arrow keys work in tabs, menus, comboboxes?
  10. Escape closes overlays and returns focus?
  11. Focus indicators visible on every interactive element?

How to Report Issues

For each finding:

  • File path and line number
  • What keyboard action fails
  • What a keyboard-only user would experience
  • The fix needed

Reference files

Read one only when the task reaches it. Do not read them all up front.

  • references/tab-order.md - Tab Order, Focus Management
  • references/arrow-key-patterns.md - Arrow Key Patterns, Disabled Element Focus Conventions
  • references/keyboard-shortcut-conflicts.md - Keyboard Shortcut Conflicts
  • references/structured-output-for-sub-agent-use.md - Structured Output for Sub-Agent Use

Output contract

Return only JSON matching skills/a11y-core/schemas/findings.schema.json. No prose, no summary, no restated instructions. One object, one array of findings.

Shared rules, dispatch contract and schemas: skills/a11y-core/SKILL.md. Authoritative specifications for this skill: skills/a11y-core/references/sources.md.

© Community-Access, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references) in skills/keyboard-navigator of Community-Access/accessibility-agents.

  • SKILL.md
  • agents/openai.yaml
  • examples/findings.json
  • references/arrow-key-patterns.md
  • references/keyboard-shortcut-conflicts.md
  • references/structured-output-for-sub-agent-use.md
  • references/tab-order.md

Open the folder on GitHubat commit decf6ba

Compare with similar skills

Keyboard Navigator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Keyboard Navigator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Keyboard Navigator this skillCommunity-Access/accessibility-agents423—~1.4kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.5k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed
  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed
  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.5k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed
  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed
  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from Community-Access/accessibility-agents

All 108 skills in this repo
  • A11y Core

    Community-Access/accessibility-agents

    Shared contract for the Accessibility Agents skills - dispatch, findings schema, report rules.

    423 GitHub stars~1.2k tokensUpdated 16 days ago
    Auto-check passed
  • Kb Web Scanning

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~1.2k tokensUpdated 16 days ago
    Auto-check passed
  • Accessibility Lead

    Community-Access/accessibility-agents

    Web UI accessibility lead. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~932 tokensUpdated 16 days ago
    Auto-check passed
  • Alt Text Headings

    Community-Access/accessibility-agents

    Alt text, SVGs, figures, charts, heading order, page titles and landmarks.

    423 GitHub stars~1.5k tokensUpdated 16 days ago
    Auto-check passed
  • Aria Specialist

    Community-Access/accessibility-agents

    ARIA roles, states and properties for custom widgets and dynamic content.

    423 GitHub stars~1.6k tokensUpdated 16 days ago
    Auto-check passed
  • Cognitive Accessibility

    Community-Access/accessibility-agents

    Plain language, WCAG 2.2 cognitive criteria, COGA guidance and auth UX.

    423 GitHub stars~1.4k tokensUpdated 16 days ago
    Auto-check passed

Questions about Keyboard Navigator

What does Keyboard Navigator do?

Tab order, focus management, shortcuts, skip links and focus visibility. Keyboard Navigator is an agent skill from Community-Access/accessibility-agents. Tab order, focus management, shortcuts, skip links and focus visibility.

When should I use Keyboard Navigator?

Keyboard Navigator fits situations like: tasks that involve Accessibility.

How do I install Keyboard Navigator in Claude Code?

Run `npx skills add Community-Access/accessibility-agents --skill keyboard-navigator -a claude-code`. Or copy the skill folder (skills/keyboard-navigator in Community-Access/accessibility-agents) into .claude/skills/keyboard-navigator in your project. Claude Code loads it when a task matches its description.

How do I install Keyboard Navigator in Codex?

Run `npx skills add Community-Access/accessibility-agents --skill keyboard-navigator -a codex`. Or copy the skill folder (skills/keyboard-navigator in Community-Access/accessibility-agents) into .agents/skills/keyboard-navigator in your project. Codex loads it when a task matches its description.

Can I use Keyboard Navigator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Community-Access/accessibility-agents --skill keyboard-navigator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/keyboard-navigator, .gemini/skills/keyboard-navigator, .github/skills/keyboard-navigator and .opencode/skills/keyboard-navigator in your project.

What does Keyboard Navigator need to run?

SKILL.md names no scripts, command-line tools or credentials: Keyboard Navigator is instructions for the agent only.

Does Keyboard Navigator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Keyboard Navigator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Keyboard Navigator use?

Keyboard Navigator is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Keyboard Navigator use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.4k tokens, read only when the agent opens those files.

What are the alternatives to Keyboard Navigator?

Skills that share tags, products or a category with Keyboard Navigator: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Keyboard Navigator?

Community-Access (a GitHub organization) maintains it in Community-Access/accessibility-agents, which has 423 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on September 23, 2026.

Source: Community-Access/accessibility-agents on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.