Accessibility

Keyboard access and focus

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

fe-a11y-keyboardevery web project9 rules93 tokens always loaded, 1127 tokens when used, 1593 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-a11y-keyboard lands for Claude Code

.claude/skills/fe-a11y-keyboard/SKILL.mdskill
.claude/skills/fe-a11y-keyboard/references/keyboard.mdskill
.claude/rules/fe-a11y-keyboard.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-a11y-keyboard.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.claude/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for OpenAI Codex

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for Cursor

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
.cursor/rules/fe-a11y-keyboard.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-a11y-keyboard.mdc

---
description: Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.agents/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for GitHub Copilot

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
.github/instructions/fe-a11y-keyboard.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-a11y-keyboard.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.agents/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Gemini CLI

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for Antigravity CLI

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
.agents/rules/fe-a11y-keyboard.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-a11y-keyboard.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.agents/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Devin / Windsurf

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
.devin/rules/fe-a11y-keyboard.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-a11y-keyboard.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
---

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.agents/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for OpenCode

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for Cline

.claude/skills/fe-a11y-keyboard/SKILL.mdskill
.claude/skills/fe-a11y-keyboard/references/keyboard.mdskill
.clinerules/fe-a11y-keyboard.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-a11y-keyboard.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
  - "**/*.css"
  - "**/*.scss"
---

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.claude/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Zed

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for JetBrains Junie

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for Kiro

.kiro/skills/fe-a11y-keyboard/SKILL.mdskill
.kiro/skills/fe-a11y-keyboard/references/keyboard.mdskill
.kiro/steering/fe-a11y-keyboard.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-a11y-keyboard.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
---

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.kiro/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Augment

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-a11y-keyboard lands for Trae

.trae/skills/fe-a11y-keyboard/SKILL.mdskill
.trae/skills/fe-a11y-keyboard/references/keyboard.mdskill
.trae/rules/fe-a11y-keyboard.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-a11y-keyboard.md

---
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.trae/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Continue

.frontend-skills/skills/fe-a11y-keyboard/SKILL.mdskill
.frontend-skills/skills/fe-a11y-keyboard/references/keyboard.mdskill
.continue/rules/fe-a11y-keyboard.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-a11y-keyboard.md

---
name: "Keyboard access and focus"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Before larger changes, read the full skill: `.frontend-skills/skills/fe-a11y-keyboard/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-a11y-keyboard lands for Amazon Q Developer

.frontend-skills/skills/fe-a11y-keyboard/SKILL.mdskill
.frontend-skills/skills/fe-a11y-keyboard/references/keyboard.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-keyboard` (Keyboard access and focus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-a11y-keyboard/SKILL.md`.

The real file

Where fe-a11y-keyboard lands for Aider

.frontend-skills/skills/fe-a11y-keyboard/SKILL.mdskill
.frontend-skills/skills/fe-a11y-keyboard/references/keyboard.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-keyboard` (Keyboard access and focus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-a11y-keyboard/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

can I use this with a keyboard

And to check and fix the work:

Use the fe-a11y-keyboard skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/no-click-on-static and fix it here.

Rules it teaches

a11y/no-click-on-static
A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.
seriousstaticWCAG 2.1.1, 4.1.2
a11y/link-is-link
An <a> is a real link with an href; an action is a <button>, never <a> without href, href="#" or javascript:.
seriousstaticWCAG 2.1.1, 4.1.2
a11y/positive-tabindex
No element has a tabindex greater than 0; focus order follows the source order.
seriousstaticWCAG 2.4.3
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
seriousstaticWCAG 2.4.7
a11y/focus-not-obscured
Sticky headers, footers, cookie banners and chat widgets never fully cover the element that has keyboard focus.
seriousmanualWCAG 2.4.11
a11y/skip-link
Pages with repeated header or navigation start with a "Skip to main content" link whose target exists and takes focus.
moderatebrowserWCAG 2.4.1
a11y/no-keyboard-trap
Keyboard focus can always leave a component with Tab, Shift+Tab or Escape; only an open modal keeps focus inside.
criticalmanualWCAG 2.1.2
a11y/focus-route-change
After a client-side route change, focus moves to the new page's heading or main region and the new title is announced.
moderatemanualWCAG 2.4.3, 4.1.3
a11y/scrollable-region-focusable
A scrolling region with no focusable content inside can itself take focus (tabindex="0") and has a name.
seriousbrowserWCAG 2.1.1

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Actions are <button type="button">, navigation is <a href>; never a click handler on a div or span (a11y/no-click-on-static).
Never <a> without href, with href="#" or javascript: as a button (a11y/link-is-link).
Never tabindex above 0; fix the order in the DOM, and keep CSS order and *-reverse from scrambling it (a11y/positive-tabindex).
Never remove the outline without a visible :focus-visible style of at least 3:1 contrast (a11y/focus-visible).
Sticky headers, footers and banners never cover the focused element: set scroll-padding (a11y/focus-not-obscured).
Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
After a client-side route change, move focus to the new heading or <main> (a11y/focus-route-change).
Scrollable regions with nothing focusable inside get tabindex="0" and a name (a11y/scrollable-region-focusable).
Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
Act on click, not mousedown or touchstart; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Steps the agent follows

Start from native elements: button, a href, input, select, details, dialog. They are focusable and handle Enter and Space for free.
For a custom widget, follow its APG pattern (fe-a11y-dialog, fe-a11y-menus, fe-a11y-tabs-accordion, fe-a11y-combobox): roving tabindex (0 on the current item, -1 on the rest) or aria-activedescendant.
Style focus once, globally: :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }; check it on every background.
Put the skip link and scroll-padding-top in the shared layout; read the sticky header height from one custom property.
When content appears after a trigger (a panel, an error summary, a deleted row's neighbour), insert it after the trigger in the DOM or move focus to it; never let focus fall to <body>.
In an SPA, use the router's announcer (Next.js, SvelteKit, Nuxt <NuxtRouteAnnouncer>) and focus the h1 after navigation.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds clickable divs, fake links, positive tabindex and removed outlines.
audit --url <page> adds axe-core results (skip link, scrollable regions).
By hand, for every change: unplug the mouse, Tab and Shift+Tab through the page; every control is reachable, visible when focused, works with Enter or Space, and Escape closes what it opened.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/keyboard.md1593 tokens

SKILL.md on GitHub