aria-deprecated-role 精选

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid using deprecated ARIA roles. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

设计 Claude Code Codex CLI MCP 客户端 MIT 7.4 万

在 GitHub 打开

安装方式

cp -r skills/aria-deprecated-role ~/.claude/skills/aria-deprecated-role

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同，Claude Code 默认是 ~/.claude/skills/

整仓一次性获取：git clone --depth 1 https://github.com/thedaviddias/Front-End-Checklist.git

依赖与权限

无需 API Key
需要联网访问外部服务
无外部命令依赖
以上为按正文与 frontmatter 自动推断的信号，仅供参考；安装前建议先阅读原文。

触发场景

reviewing rendered HTMLinteractive components

SKILL.md 正文

来源 thedaviddias/Front-End-Checklist@e8d14d0 · 许可 MIT · 内容未修改

Avoid using deprecated ARIA roles

Using deprecated roles can lead to inconsistent behavior across different browsers and screen readers as they transition to newer standards.

Quick Reference

Deprecated ARIA roles should be replaced with modern equivalents
Browsers may drop support for deprecated roles in future versions
Ensures long-term compatibility with assistive technologies

Check

Search the codebase for deprecated ARIA roles like directory or abstract roles that shouldn't be used in HTML.

Fix

Update deprecated ARIA roles to their modern recommended equivalents or use native HTML elements.

Explain

Explain the risks of using deprecated ARIA roles and the benefits of moving to modern ARIA standards.

Code Review

Review the rendered markup and interactive states that affect Avoid using deprecated ARIA roles. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance,

see references/rule.md.

Rule page: https://frontendchecklist.io/rules/accessibility/aria-deprecated-role

质量与来源

所属仓库: thedaviddias/Front-End-Checklist
仓库星标: 7.4 万
最近更新: 6 天前
采集时间: 今天
commit: e8d14d049010
内容指纹: sha256:0d534706cb74bdc
文件路径: skills/aria-deprecated-role/SKILL.md

同仓库其它 Skill

查看全部 50 个

frontendchecklist

Review frontend code and live pages against the Front-End Checklist (380+ rules for accessibility, performance, SEO, security, HTML, CSS, JavaScript, images, i18n, privacy, testing) using the `frontendchecklist` CLI. Use when writing, reviewing, or shipping HTML/CSS/JS/JSX/TSX/Vue/Svelte/Astro code, before a commit or PR, or when asked to audit a public URL.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

frontend-checklist-global

Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

accessibility-testing

Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

accessible-authentication

Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.

精选 thedaviddias/Front-End-Checklist 7.4 万原文

Claude CodeCodex CLIMCP 客户端

相似 Skill

更多「设计」

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万原文

Claude CodeCodex CLICursor