skillhub

accessible-notifications✓ تایید شده

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.

58از ۱۰۰
۷۲.۸k
★ ستاره
۰
↓ دانلود
۲
◉ بازدید

// نصب مهارت

نصب مهارت

مهارت‌ها کدهای شخص ثالث از مخازن عمومی GitHub هستند. SkillHub الگوهای مخرب شناخته‌شده را اسکن می‌کند اما نمی‌تواند امنیت را تضمین کند. قبل از نصب، کد منبع را بررسی کنید.

نصب سراسری (سطح کاربر):

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

نصب در پروژه فعلی:

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

مسیر پیشنهادی: ~/.claude/skills/accessible-notifications/

بررسی هوش مصنوعی

58
از ۱۰۰
کیفیت دستورالعمل60
دقت توضیحات45
کاربردی بودن55
صحت فنی70

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
بررسی‌شده توسط review-skill-gateway(z-ai/glm-5.2) در تاریخ ۱۴۰۵/۵/۱۱

محتوای SKILL.md

---
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

مجوز

در منبع این مهارت هیچ مجوزی اعلام نشده است.

متن کامل مجوز در مخزن منبع در دسترس است.

مشاهدهٔ مجوز در مخزن منبع — نسخهٔ منتشرشده در آن‌جا مرجع است.