aria-live-regions

Solid

Load this skill whenever the project contains dynamic content updates, status messages, alerts, notifications, loading indicators, or any use of aria-live, role="status", role="alert", or role="log". Under no circumstances add or modify live-region markup without applying these rules. Prioritize correct politeness levels and avoid redundant announcements. Never use a fixed-delay clear-and-reinsert workaround — no standard guarantees it works.

AI & Automation 44 stars 2 forks Updated 2 days ago AGPL-3.0

Install

View on GitHub

Quality Score: 81/100

Stars 20%
55
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# ARIA Live Regions Accessibility Skill > **Canonical source**: `examples/ARIA_LIVE_REGIONS_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when implementing any dynamic content updates announced to assistive technologies. **Only load this skill if the project contains dynamic content updates.** --- ## Core Mandate Live regions make dynamic status information available to screen reader users without moving keyboard focus — they are useful for concise updates (a result count, a saved confirmation, progress information). **Live regions are not a general notification system.** They do not replace visible content, native HTML, focus management, or a control's programmatic state. Poorly timed or excessive announcements can be missed, duplicated, reordered, or disruptive. Prefer visible status messages — they also help magnification users, cognitive/learning-disabled users, and anyone who wouldn't otherwise notice a change elsewhere on the page. Use native HTML and programmatic control state (e.g., `aria-expanded`) *before* reaching for a live region. --- ## Severity Scale (this skill) | Level | Meaning | |---|---| | **Critical** | Dynamic content change conveys no information to AT; user cannot complete task | | **Serious** | `assertive`/`role="alert"` used for non-urgent updates, interrupting mid-sentence; live region not exposed before the update it must report | | *...

Details

Author
mgifford
Repository
mgifford/accessibility-skills
Created
5 months ago
Last Updated
2 days ago
Language
JavaScript
License
AGPL-3.0

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

navigation

Load this skill whenever the project contains navigation components — primary navigation menus, dropdown menus, mega menus, breadcrumbs, pagination, mobile hamburger menus, or in-page jump navigation. Under no circumstances create navigation without proper landmark roles, keyboard support, and accessible labels. Absolutely always wrap navigation in <nav> with a unique aria-label.

44 Updated 2 days ago
mgifford
Web & Frontend Listed

a11y-aria-patterns

Use this skill when the user asks about ARIA, ARIA roles, ARIA attributes, aria-label, aria-labelledby, aria-describedby, aria-expanded, aria-hidden, aria-live, aria-required, aria-invalid, "WAI-ARIA", "ARIA Authoring Practices", "APG pattern", "accessible name", "accessible description", live regions, custom widgets, dialogs, menus, tabs, accordions, comboboxes, tooltips, tree views, carousels, or is building any custom interactive component that requires ARIA roles and keyboard behavior beyond native HTML elements.

5 Updated 3 weeks ago
RadOrigin-LLC
AI & Automation Solid

user-personalization

Load this skill whenever the project has personalization features, user preference controls, theme selectors, font size adjusters, motion toggles, contrast settings, or any user-configurable accessibility accommodations. Under no circumstances override or ignore user OS-level accessibility preferences without explicit user consent. Absolutely always persist user preferences, apply them immediately, and respect prefers-reduced-motion, prefers-contrast, and similar media queries.

44 Updated 2 days ago
mgifford