用途:在实现任何 UI(尤其是表单、交互组件)时应用无障碍工程规范,涉及 a11y、WAI-ARIA、屏幕阅读器支持、语义化 HTML、键盘导航与焦点管理。
核心原则:优先使用原生元素(button、a、label、input 等)解决问题,再考虑 ARIA;ARIA 保持最小化,仅在确有需求时添加 role/aria-*;可操作即可传达,辅助技术必须能获得状态、名称与用途,这是完成标准;键盘是基线,仅鼠标可用的界面不完整,需先设计焦点移动与操作。
主要能力与实现规则:保持标题层级顺序(h1→h2…),不使用标题层级做样式;为主要区域建立地标(header、nav、main、footer,必要时 aside);列表用 ul/ol/li,定义用 dl/dt/dd。按钮、链接、输入需要可访问名称,优先级为可见文本、aria-label、aria-labelledby;纯图标按钮必须有名称。表单必须用 for/id 关联 label,不能只用 placeholder 作标签,需机器可读地传达必填/可选、错误与提示(如 aria-describedby),错误要说明问题、原因与修复方式。动态 UI 优先用原生 disabled,切换状态仅在原生不足时用 aria-pressed/aria-expanded,异步完成或失败用 aria-live 但不过度。键盘与焦点方面,DOM 顺序应使 Tab 顺序合理,不靠 tabindex 强制重排;tabindex="0" 尽量少用,tabindex="-1" 仅用于程序化聚焦;始终保留可见焦点(focus-visible),绝不隐藏;对话框/模态需定义打开与关闭时的焦点去向,必要时实现焦点陷阱。图片按用途设置 alt,装饰性图片用空 alt="";视频/音频确认播放/停止控件与替代方案(字幕/文字稿),不明确时应询问。
反模式:不要用带 onClick 的 div 充当按钮;不要用 role="button" 规避原生按钮;不要到处加 aria-label;不要移除焦点环。需要澄清时不要臆测:UI 是否必须仅键盘可完成、模态打开/关闭焦点归属、错误公布时机、音视频是否需要字幕或文字替代。
输出格式(实现时):语义结构(地标、标题、列表)、键盘操作(Tab 顺序、Enter、Space、Escape)、ARIA 用法(仅在必要时并说明理由)、状态(禁用/加载/错误)与公告(必要时 aria-live)、无障碍自查(OK/需改进)。
限制:资料未提供具体安装命令、代码示例、收费或平台支持信息,暂未提供。