ARIA Accessible Component Patterns

This skill provides deep, practical knowledge about accessible UI component patterns based on the WAI-ARIA Authoring Practices Guide (APG).

Why this skill exists

LLMs already know the ARIA spec reasonably well. What they often get wrong is the gap between spec and reality:

• role="tooltip" has 3/33 MUST support on a11ysupport.io — it's essentially dead
• aria-modal="true" is not supported by TalkBack, Narrator, or Orca — your modal isn't actually modal
• aria-autocomplete has 11/55 MUST support — screen readers mostly ignore it
• aria-errormessage has ~20% MUST support — designed for form errors but AT ignores it; use aria-describedby instead
• 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)
• aria-controls navigation works only in JAWS — other screen readers don't expose it
• role="menu" is for application commands, not site navigation — this is the #1 ARIA misuse
• aria-busy="true" is supposed to suppress live region updates but only JAWS supports it — every other screen reader ignores it
• aria-live="assertive" does NOT interrupt in JAWS — the most-used desktop screen reader queues it instead
• aria-details has 7/11 MUST support — VoiceOver (macOS + iOS), Narrator, and TalkBack completely ignore it; use aria-describedby as primary link to descriptions
• 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