Skip to content
Get packs

Deprecated ARIA Roles Checker

Spots outdated ARIA roles in HTML and suggests modern or native replacements.

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 page markup for ARIA roles (accessibility labels that tell screen readers what an element is) that are deprecated, such as 'directory'. When installed, the agent searches your code for these roles, explains why they can cause inconsistent behaviour in browsers and assistive technology, and proposes modern roles or plain native HTML elements instead. It also checks related keyboard behaviour, focus order and accessible names where relevant.

Great for

  • Front-end developers maintaining a website or component library who want to clean up accessibility markup
  • Teams doing an accessibility review before a release
  • Designers or QA staff who want a reasoned list of markup issues to hand to developers

Skip it if

  • Non-technical users who need a full accessibility audit; the skill gives guidance from a single checklist rule and does not test real screen-reader output
  • Projects that rely on the exact list of current ARIA roles without verifying against the latest specification, since the skill's content is brief and may not reflect every current standard

Try asking

  • “Review this component's HTML for deprecated ARIA roles and suggest replacements”
  • “Search my codebase for role="directory" and other abstract roles that shouldn't be used”
  • “Explain why my navigation markup should use native elements instead of ARIA roles”
Step-by-step guide: how to use Deprecated ARIA Roles 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.

    aria-deprecated-role.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-deprecated-role.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-deprecated-role.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

  • Paste the rendered HTML or point the agent at the component files so it can check actual markup rather than guessing.
  • Ask the agent to also verify fixes with browser accessibility tools such as the accessibility tree inspector or a screen reader, since the skill itself only gives guidance.
  • Check the referenced rule page for framework-specific examples if you use React, Vue or similar.

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.