可感知性要求内容能被至少一种感官接收，需提供文本替代、字幕、足够对比度等；可操作性强调键盘导航与焦点管理；可理解性注重命名一致与明确反馈；健壮性依赖语义化代码与aria正确使用。
可感知性：内容必须能被至少一种感官接收
用户看不到、听不到、读不懂，就等于内容不存在。这不只是“加个alt”，而是系统性确保信息可转换、可适配。
常见错误现象：img 标签没 alt 属性；纯图标按钮没文字说明；视频无字幕或转录；文本与背景对比度低于 4.5:1（AA 级硬性要求）。
- 非文本内容（图像、图表、图标）必须提供等效的文本替代，如
<img src="chart.png" alt="2025年用户留存率：Q1 62%，Q2 68%"> - 时基媒体（视频/音频）需同时提供字幕、音轨描述和文字稿
- 避免仅靠颜色传递关键信息，例如错误提示不能只用红色文字，要搭配图标或文字如“
错误：邮箱格式不正确” - 禁用每秒闪烁 ≥3 次的动画，否则可能触发光敏性癫痫
可操作性：所有功能必须能被不同方式触发
键盘是无障碍访问的底线——不是“支持更好”，而是“不支持即失败”。焦点管理、时间控制、导航结构都直接影响可用性。
常见错误现象：Tab 键跳过按钮或表单控件；轮播图无法暂停；弹窗关闭后焦点丢失；页面滚动后焦点回到顶部而非原位置。
- 所有交互控件（
button、a、input等）必须能通过Tab进入，Enter/Space触发 - 自动播放的内容（如轮播、音频）必须提供显式暂停/停止控件
- 表单提交前应给予用户足够时间，超时操作需提前提示并允许延长
- 提供跳过导航链接（如
@#@#@#@#@#@#@#@#@#@0），且该链接在聚焦时可见
可理解性：语言、行为与反馈必须符合用户预期
这不是“写得通俗一点”的问题，而是结构、命名、状态、错误处理的系统一致性。用户不需要猜测界面在做什么。
常见错误现象：同一操作在不同页面有不同名称（如“提交” vs “确定” vs “保存更改”）；表单错误只标红边框无文字说明；URL 或按钮文案含糊如“点击这里”。
- 链接文字必须描述目的，避免
@#@#@#@#@#@#@#@#@#@1，应写成@#@#@#@#@#@#@#@#@#@2 - 表单错误需明确指出字段+原因，如
密码长度不足8位，且须包含数字和大写字母 - 页面标题（
<title></title>）和主标题（<h1></h1>）需准确反映当前内容，不可模板化重复 - 所有状态变更（如加载中、已提交、已禁用）需通过文本+ARIA属性双重暴露，例如
<button aria-busy="true">提交中…</button>
健壮性：代码必须能被各类辅助技术稳定解析
再好的语义，如果 HTML 结构错乱、ARIA 误用、JS 动态更新未同步状态，屏幕阅读器就可能完全跳过或误读。健壮性是兼容性的地基。
常见错误现象：role="button" 加在 div 上却没加 tabindex="0" 和键盘事件；动态插入的 DOM 没触发 aria-live；自定义组件缺失必要的 aria-* 属性。
- 使用标准语义化标签优先（如用
button就别用div role="button"） - 动态内容更新（如搜索建议、表单校验提示）需配合
aria-live="polite"或"assertive"主动通知 - 复合组件（如下拉菜单、树形控件）必须完整实现 WAI-ARIA Authoring Practices 中定义的角色、属性与键盘行为
- 确保所有 ID 唯一，且
aria-labelledby、aria-describedby引用的 ID 真实存在、未被 JS 删除或重复生成
真正难的不是记住四原则，而是当一个按钮既要支持鼠标悬停效果、又要响应语音指令、还要在高对比模式下保持可识别、并在焦点离开后仍保留操作上下文——这些交叉约束必须在写第一行 HTML 时就想清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
