Skip to content
Get packs

Accessible Notifications Checker

Reviews HTML and components so screen reader users get notifications like errors and success messages.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review web templates, rendered HTML, and shared UI components for accessible notifications. It checks that messages such as form errors, success confirmations, and live updates use ARIA live regions with suitable roles (alert or status) and politeness settings, and that they stay visible long enough to be read and can be dismissed. The agent then flags the specific elements or attributes that break this rule and suggests fixes.

Great for

  • Front-end developers who want a quick accessibility check on notification markup
  • Teams reviewing shared components or server-rendered templates before release
  • Designers and QA testers auditing toast messages or form feedback

Skip it if

  • Full accessibility audits: it only covers one rule about notifications, not the wider WCAG standard, and it does not replace testing with real screen readers
  • Frameworks where markup is generated at runtime without the agent seeing the final rendered HTML, since the skill asks for browser-facing output to be validated

Try asking

  • “Review our toast notification component and tell me if screen readers will announce it”
  • “Check the form error templates in this repo for missing aria-live or role attributes”
  • “Audit the rendered HTML of our checkout page for accessible status messages”
Step-by-step guide: how to use Accessible Notifications CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    accessible-notifications.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip accessible-notifications.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip accessible-notifications.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent rendered HTML or a running page's output rather than only framework source, because the skill focuses on the final browser markup.
  • Ask for specific file paths or routes so findings point to exact elements and attributes.
  • Pair the review with manual testing using a screen reader such as NVDA or VoiceOver, since static checks cannot confirm how messages are actually announced.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.