用途:为构建 Web 界面、审计无障碍、实现响应式布局和评审前端代码提供与框架无关的规则集,依据 WCAG 2.2、MDN Web Docs 与现代 Web 平台 API。
主要能力:
- 无障碍(关键):语义化 HTML 元素用法;交互元素的可访问名称(aria-label/aria-labelledby);键盘导航与模态焦点陷阱;可见焦点指示器;跳转导航链接;图片 alt 文本;颜色对比度(正文 4.5:1、大文本 3:1、UI 组件 3:1);表单标签;错误识别;ARIA 实时区域;ARIA 角色速查;Label in Name(SC 2.5.3)。
- 响应式设计(关键):移动优先与 min-width 媒体查询;clamp()/min()/max() 流式布局;容器查询;基于内容的断点;触控目标尺寸;viewport meta;避免横向滚动。
- 表单(高):每个输入配标签;autocomplete 属性;正确 input type;失焦时内联校验;fieldset/legend 分组;必填标识;提交按钮状态;说明文字靠近字段。
- 排版(高):系统字体栈与 Web 字体回退;rem/em 相对单位;行高与间距。
使用方式:作为设计/开发规范参考,在编写界面、审计无障碍或评审代码时逐条对照;示例代码保持原样使用。
适用场景:Web 前端开发、无障碍审计、响应式布局实现、代码评审。
限制:资料未提供安装命令、收费、价格、平台支持或效果数据;部分规则为最佳实践(如 AAA 级或超出 WCAG),文中已标注。