aria-patterns

Name: aria-patterns
Author: weAAAre

30stars6forks

How to install aria-patterns?

weaaare/a11y-agents-kit/aria-patterns

$npx -y skills add weAAAre/a11y-agents-kit --skill aria-patterns

Installs into the current project.

Summary

Expert knowledge base for building accessible UI components with awareness of real-world assistive technology (AT) support gaps. Goes beyond the WAI-ARIA spec to provide actual AT compatibility data from a11ysupport.io, known screen reader quirks, proven workarounds, and the crit

Files · 1

View on GitHub

SKILL.md

1	# ARIA Accessible Component Patterns
2
3	This skill provides deep, practical knowledge about accessible UI component patterns based on the [WAI-ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/).
4
5	## Why this skill exists
6
7	LLMs already know the ARIA spec reasonably well. What they often get wrong is the gap between spec and reality:
8
9	- `role="tooltip"` has 3/33 MUST support on a11ysupport.io — it's essentially dead
10	- `aria-modal="true"` is not supported by TalkBack, Narrator, or Orca — your modal isn't actually modal
11	- `aria-autocomplete` has 11/55 MUST support — screen readers mostly ignore it
12	- `aria-errormessage` has ~20% MUST support — designed for form errors but AT ignores it; use `aria-describedby` instead
13	- `aria-relevant` is completely broken for ANY non-default value — `"additions"` alone has 0/11 full support (NVDA ZERO on all browsers — stops announcing entirely); `"text"` alone also 0/11 (Narrator, VoiceOver iOS/macOS = none); `"removals"` 2/11 (VoiceOver only); the default `"additions text"` is the ONLY value that works (11/11)
14	- `aria-controls` navigation works only in JAWS — other screen readers don't expose it
15	- `role="menu"` is for application commands, not site navigation — this is the #1 ARIA misuse
16	- `aria-busy="true"` is supposed to suppress live region updates but only JAWS supports it — every other screen reader ignores it
17	- `aria-live="assertive"` does NOT interrupt in JAWS — the most-used desktop screen reader queues it instead
18	- `aria-details` has 7/11 MUST support — VoiceOver (macOS + iOS), Narrator, and TalkBack completely ignore it; use `aria-describedby` as primary link to descriptions
19	- `aria-activedescendant` is completely unsupported for combobox on VoiceOver macOS/Safari — it works for menus but combobox options are invisible; use DOM focus (roving tabindex) instead
20	- `aria-current` has ZERO support on Narrator and Orca — the attribute recommended for breadcrumbs, step indicators, and nav is invisible to Windows built-in and Linux screen readers; dynamic state changes only announced by NVDA and VoiceOver iOS
21	- `aria-pressed="mixed"` has near-zero support — only JAWS (Chrome/Firefox) and VoiceOver macOS convey the tri-state; NVDA, Narrator, Orca, TalkBack, VoiceOver iOS all ignore it
22	- `aria-sort` dynamic changes are announced by only NVDA+Firefox (1/11 combos) — when a user clicks a column header to change sort direction, JAWS, Narrator, VoiceOver (all platforms), Orca, and TalkBack are all silent; Orca and TalkBack can't even read static ascending/descending values
23	- `aria-colcount="-1"` (unknown column count) is broken in ALL screen readers (0/11) — every AT ignores the spec's MUST NOT and announces its own calculated count, misleading users; VoiceOver (macOS + iOS) and TalkBack don't support `aria-colcount` at all
24	- `aria-flowto` has 10/44 MUST support (23%) — only JAWS supports alternate reading order navigation; NVDA, VoiceOver, TalkBack, Narrator, and Orca completely ignore it, making it useless for defining multi-column or complex layout reading paths
25	- `aria-level` above 6 has ZERO support in JAWS (all browsers) and TalkBack — only 4/11 combos fully support heading levels >6; JAWS announces "heading" with no level number; restructure headings to stay within 1–6 or encode depth context in the accessible name
26
27	This skill provides the AT support reality data that prevents developers from shipping components that work in theory but fail for real screen reader users.
28
29	## How to use this skill
30
31	1. Read the reference file for the pattern the user needs
32	2. Always check `references/at-support-gotchas.md` for cross-cutting AT support issues — this file contains the most critical knowledge that

People who liked this also viewed

6 picks

Type

aria-patterns

30stars6forks

View on GitHub

How to install aria-patterns?

weaaare/a11y-agents-kit/aria-patterns

$npx -y skills add weAAAre/a11y-agents-kit --skill aria-patterns

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# ARIA Accessible Component Patterns
2
3	This skill provides deep, practical knowledge about accessible UI component patterns based on the [WAI-ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/).
4
5	## Why this skill exists
6
7	LLMs already know the ARIA spec reasonably well. What they often get wrong is the gap between spec and reality:
8
9	- `role="tooltip"` has 3/33 MUST support on a11ysupport.io — it's essentially dead
10	- `aria-modal="true"` is not supported by TalkBack, Narrator, or Orca — your modal isn't actually modal
11	- `aria-autocomplete` has 11/55 MUST support — screen readers mostly ignore it
12	- `aria-errormessage` has ~20% MUST support — designed for form errors but AT ignores it; use `aria-describedby` instead
13	- `aria-relevant` is completely broken for ANY non-default value — `"additions"` alone has 0/11 full support (NVDA ZERO on all browsers — stops announcing entirely); `"text"` alone also 0/11 (Narrator, VoiceOver iOS/macOS = none); `"removals"` 2/11 (VoiceOver only); the default `"additions text"` is the ONLY value that works (11/11)
14	- `aria-controls` navigation works only in JAWS — other screen readers don't expose it
15	- `role="menu"` is for application commands, not site navigation — this is the #1 ARIA misuse
16	- `aria-busy="true"` is supposed to suppress live region updates but only JAWS supports it — every other screen reader ignores it
17	- `aria-live="assertive"` does NOT interrupt in JAWS — the most-used desktop screen reader queues it instead
18	- `aria-details` has 7/11 MUST support — VoiceOver (macOS + iOS), Narrator, and TalkBack completely ignore it; use `aria-describedby` as primary link to descriptions
19	- `aria-activedescendant` is completely unsupported for combobox on VoiceOver macOS/Safari — it works for menus but combobox options are invisible; use DOM focus (roving tabindex) instead
20	- `aria-current` has ZERO support on Narrator and Orca — the attribute recommended for breadcrumbs, step indicators, and nav is invisible to Windows built-in and Linux screen readers; dynamic state changes only announced by NVDA and VoiceOver iOS
21	- `aria-pressed="mixed"` has near-zero support — only JAWS (Chrome/Firefox) and VoiceOver macOS convey the tri-state; NVDA, Narrator, Orca, TalkBack, VoiceOver iOS all ignore it
22	- `aria-sort` dynamic changes are announced by only NVDA+Firefox (1/11 combos) — when a user clicks a column header to change sort direction, JAWS, Narrator, VoiceOver (all platforms), Orca, and TalkBack are all silent; Orca and TalkBack can't even read static ascending/descending values
23	- `aria-colcount="-1"` (unknown column count) is broken in ALL screen readers (0/11) — every AT ignores the spec's MUST NOT and announces its own calculated count, misleading users; VoiceOver (macOS + iOS) and TalkBack don't support `aria-colcount` at all
24	- `aria-flowto` has 10/44 MUST support (23%) — only JAWS supports alternate reading order navigation; NVDA, VoiceOver, TalkBack, Narrator, and Orca completely ignore it, making it useless for defining multi-column or complex layout reading paths
25	- `aria-level` above 6 has ZERO support in JAWS (all browsers) and TalkBack — only 4/11 combos fully support heading levels >6; JAWS announces "heading" with no level number; restructure headings to stay within 1–6 or encode depth context in the accessible name
26
27	This skill provides the AT support reality data that prevents developers from shipping components that work in theory but fail for real screen reader users.
28
29	## How to use this skill
30
31	1. Read the reference file for the pattern the user needs
32	2. Always check `references/at-support-gotchas.md` for cross-cutting AT support issues — this file contains the most critical knowledge that

People who liked this also viewed

6 picks

Type