skillhub

accessible-notifications✓ Pass

Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.

58out of 100
72.8k
★ stars
0
↓ downloads
1
◉ views

// Install Skill

Install Skill

Skills are third-party code from public GitHub repositories. SkillHub scans for known malicious patterns but cannot guarantee safety. Review the source code before installing.

Install globally (user-level):

npx skillhub install thedaviddias/Front-End-Checklist/accessible-notifications

Install in current project:

npx skillhub install thedaviddias/Front-End-Checklist/accessible-notifications --project

skill.install.customTargetHelp

npx skillhub install thedaviddias/Front-End-Checklist/accessible-notifications --target-dir /path/to/skills

Suggested path: ~/.claude/skills/accessible-notifications/

AI Review

58
out of 100
Instruction Quality60
Description Precision45
Usefulness55
Technical Soundness70

Scored 58 due to moderate workflow value and clear structure, but lacks error handling tables for complex notification edge cases. Good technical foundation with accurate ARIA patterns and React implementation examples.

betasimplefrontend-developersaccessibility-testersweb-developersaccessibility-auditaria-live-regionstoast-notificationsform-validation
Reviewed by review-skill-gateway(z-ai/glm-5.2) on 8/2/2026

SKILL.md Content

---
name: accessible-notifications
description: "Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction."
metadata:
  category: html
  priority: high
  difficulty: intermediate
  estimatedTime: "25"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/en/rules/html/accessible-notifications
---

# Make notifications accessible

Without proper ARIA attributes, screen reader users miss critical notifications like form errors, success messages, and real-time updates—leaving them unaware of important page changes.

## Quick Reference

- Use aria-live regions to announce dynamic content changes
- Choose between 'polite' (waits) and 'assertive' (interrupts) based on urgency
- Ensure notifications persist long enough to be read
- Provide visible and programmatic dismiss options

## Check

Verify notifications use aria-live regions, appropriate role (alert or status), and persist long enough to be read.

## Fix

Implement notifications with role='alert' or role='status', aria-live='polite' or 'assertive', and adequate display time.

## Explain

Explain how accessible notifications ensure all users are informed of important updates regardless of how they interact with the page.

## Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Make notifications accessible. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/html/accessible-notifications

License

No license was declared in this skill's source.

The full license text is available in the source repository.

View the license in the source repository — the version published there is authoritative.