ARIA无障碍网页应用实现技能Skill aria

本技能提供关于 WAI-ARIA(无障碍网页应用)标准的专家级指导与实现支持,专注于提升网站和Web应用的无障碍访问性。核心内容包括:实现ARIA角色、管理动态状态与属性、构建可访问的交互组件(如对话框、选项卡)、配置实时区域以辅助屏幕阅读器用户,并提供与屏幕阅读器兼容性测试相关的知识。适用于前端开发者、无障碍测试工程师及所有致力于创建包容性数字产品的团队。关键词:WAI-ARIA,无障碍网页,屏幕阅读器,前端可访问性,ARIA角色,实时区域,Web无障碍标准。

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

name: aria description: WAI-ARIA 实现、角色、状态和属性。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

ARIA 技能

为 WAI-ARIA 实现提供专家级协助。

能力

  • 实现 ARIA 角色
  • 管理状态和属性
  • 创建可访问的小部件
  • 处理实时区域
  • 使用屏幕阅读器进行测试

常见模式

// 模态对话框
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">标题</h2>
  <p id="dialog-desc">描述</p>
</div>

// 实时区域
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// 选项卡面板
<div role="tablist">
  <button role="tab" aria-selected={selected} aria-controls="panel-1">
    选项卡 1
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  内容
</div>

目标流程

  • aria-实现
  • 可访问性改进
  • 屏幕阅读器支持