Dostępność

ARIA, names and live regions

Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".

fe-a11y-ariakażdego projektu webowego8 regułładowane zawsze: 91 tokenów; przy użyciu: 1070 tokenów; w referencjach na żądanie: 1372 tokeny.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

Agent	Rozpoznawany po
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`

Gdzie trafia fe-a11y-aria dla: Claude Code

.claude/skills/fe-a11y-aria/SKILL.mdskill
.claude/skills/fe-a11y-aria/references/aria.mdskill
.claude/rules/fe-a11y-aria.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

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

# ARIA, names and live regions (frontend-skills)

Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: OpenAI Codex

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Cursor

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
.cursor/rules/fe-a11y-aria.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

---
description: Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# ARIA, names and live regions (frontend-skills)

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: GitHub Copilot

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
.github/instructions/fe-a11y-aria.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked \"what will a screen reader say\"."
---

# ARIA, names and live regions (frontend-skills)

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Gemini CLI

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Antigravity CLI

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
.agents/rules/fe-a11y-aria.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked \"what will a screen reader say\"."
---

# ARIA, names and live regions (frontend-skills)

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Devin / Windsurf

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
.devin/rules/fe-a11y-aria.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

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

# ARIA, names and live regions (frontend-skills)

Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: OpenCode

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Cline

.claude/skills/fe-a11y-aria/SKILL.mdskill
.claude/skills/fe-a11y-aria/references/aria.mdskill
.clinerules/fe-a11y-aria.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.clinerules/fe-a11y-aria.md

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

# ARIA, names and live regions (frontend-skills)

Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Zed

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: JetBrains Junie

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Kiro

.kiro/skills/fe-a11y-aria/SKILL.mdskill
.kiro/skills/fe-a11y-aria/references/aria.mdskill
.kiro/steering/fe-a11y-aria.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

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

# ARIA, names and live regions (frontend-skills)

Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked "what will a screen reader say".

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Augment

.agents/skills/fe-a11y-aria/SKILL.mdskill
.agents/skills/fe-a11y-aria/references/aria.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Trae

.trae/skills/fe-a11y-aria/SKILL.mdskill
.trae/skills/fe-a11y-aria/references/aria.mdskill
.trae/rules/fe-a11y-aria.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

---
description: "Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked \"what will a screen reader say\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# ARIA, names and live regions (frontend-skills)

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Continue

.frontend-skills/skills/fe-a11y-aria/SKILL.mdskill
.frontend-skills/skills/fe-a11y-aria/references/aria.mdskill
.continue/rules/fe-a11y-aria.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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

---
name: "ARIA, names and live regions"
description: "Gets names, roles, states and announcements right in any stack to WCAG 2.2 AA as a target - native elements before ARIA, accessible names for icon buttons and links, valid roles and aria-* attributes, aria-hidden used safely, state attributes, live regions for status messages. Use when adding ARIA, building a custom control or toast, labelling icons, or when asked \"what will a screen reader say\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# ARIA, names and live regions (frontend-skills)

- Every button and link has a name; icon-only controls get hidden text or `aria-label`, the icon `aria-hidden="true"` (a11y/control-name).
- Use the native element before a role: `<button>`, `<a href>`, `<input type="checkbox">`, `<nav>`, `<h2>` (a11y/prefer-native-element).
- Roles and `aria-*` names must exist in WAI-ARIA 1.2: `aria-labelledby`, never `aria-labeledby` (a11y/aria-valid).
- Never `aria-hidden="true"` on anything focusable or around it; use `inert` or `hidden` (a11y/aria-hidden-focusable).
- Never `aria-label` on a plain `div`, `span` or `p`; label the control or give a fitting role (a11y/aria-label-generic).
- Ids in `aria-labelledby` and `aria-describedby` exist once on the page; generate them with `useId()` (a11y/aria-ref-exists).
- Custom toggles expose state: `aria-expanded`, `aria-pressed`, `aria-checked`, `aria-selected`, `aria-current` (a11y/state-exposed).
- Status messages go into a live region that exists before the text: `role="status"`, `role="alert"` only for urgent errors (a11y/status-message-live).
- The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
- Never put ARIA on an element to change its look; ARIA changes only what is announced.

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

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Amazon Q Developer

.frontend-skills/skills/fe-a11y-aria/SKILL.mdskill
.frontend-skills/skills/fe-a11y-aria/references/aria.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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-aria` (ARIA, names and live regions): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-aria/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-a11y-aria dla: Aider

.frontend-skills/skills/fe-a11y-aria/SKILL.mdskill
.frontend-skills/skills/fe-a11y-aria/references/aria.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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-aria` (ARIA, names and live regions): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-aria/SKILL.md`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

what will a screen reader say

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-a11y-aria na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij a11y/control-name i popraw to tutaj.

Reguły, których uczy

a11y/control-name
Every button and link has an accessible name; icon-only controls get visually hidden text or aria-label.
krytycznastatyczneWCAG 4.1.2, 2.4.4
a11y/prefer-native-element
Use the native element instead of a role it already provides (button, a href, input, h1–h6, nav, main, ul, li).
drobnastatyczneWCAG 4.1.2
a11y/aria-valid
Every role value is a real WAI-ARIA role and every aria-* attribute name exists (aria-labelledby, not aria-labeledby).
poważnastatyczneWCAG 4.1.2
a11y/aria-hidden-focusable
aria-hidden="true" is never on a focusable element or on an element that contains one.
poważnastatyczneWCAG 4.1.2
a11y/aria-label-generic
aria-label and aria-labelledby go on controls, landmarks and named roles, never on a plain div, span or p.
poważnastatyczneWCAG 4.1.2
a11y/aria-ref-exists
Ids named in aria-labelledby, aria-describedby and aria-errormessage exist in the page and are unique.
poważnastatyczneWCAG 1.3.1, 4.1.2
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
poważnaręczneWCAG 4.1.2
a11y/status-message-live
Messages that appear without moving focus (saved, results, errors, progress) are announced through a live region.
poważnaręczneWCAG 4.1.3

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

Every button and link has a name; icon-only controls get hidden text or aria-label, the icon aria-hidden="true" (a11y/control-name).
Use the native element before a role: <button>, <a href>, <input type="checkbox">, <nav>, <h2> (a11y/prefer-native-element).
Roles and aria-* names must exist in WAI-ARIA 1.2: aria-labelledby, never aria-labeledby (a11y/aria-valid).
Never aria-hidden="true" on anything focusable or around it; use inert or hidden (a11y/aria-hidden-focusable).
Never aria-label on a plain div, span or p; label the control or give a fitting role (a11y/aria-label-generic).
Ids in aria-labelledby and aria-describedby exist once on the page; generate them with useId() (a11y/aria-ref-exists).
Custom toggles expose state: aria-expanded, aria-pressed, aria-checked, aria-selected, aria-current (a11y/state-exposed).
Status messages go into a live region that exists before the text: role="status", role="alert" only for urgent errors (a11y/status-message-live).
The accessible name contains the visible label, best at its start (WCAG 2.5.3); never replace visible words with different ones.
Never put ARIA on an element to change its look; ARIA changes only what is announced.

Kroki, które wykonuje agent

Ask first: is there a native element? dialog, details, select, input type="range", progress, meter, search. Use it and stop.
When there is none, follow the APG pattern for the widget (role, required children, states, keys) and the skills fe-a11y-dialog, fe-a11y-menus, fe-a11y-tabs-accordion, fe-a11y-combobox.
Name things in this order: visible text, aria-labelledby to visible text, aria-label, and never title or placeholder alone.
Bind every state attribute to the same variable that drives the visual state, so they cannot drift apart.
For async results, keep one polite live region per page area (<p role="status">) in the layout; write text into it; clear it after a few seconds only if the text stays visible elsewhere.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds unnamed icon buttons and links, invalid roles and attributes, aria-hidden over focusable content, labels on generic elements and broken id references.
audit --url <page> adds axe-core's name and ARIA rules on the rendered page, where names that come from components are known.
By hand: listen with a screen reader (VoiceOver, NVDA) to each changed control and message: name, role, state, and the announcement after an action.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/aria.md1372 tokeny

SKILL.md na GitHubie