优先使用语义化标签：button比div+role="button"更可靠，表单控件需正确关联label，alt属性须准确传达信息，动态内容需用aria-live主动通知。
button 标签比 div + role="button" 更可靠，这是无障碍实现中最常被低估的起点。
用对语义标签，别用 div 模拟交互元素
屏幕阅读器不靠样式或 JS 判断“这是个按钮”，它只认原生语义。当你写 自带角色、键盘支持（Tab 进入焦点，Enter/Space 触发）、禁用状态（disabled）和表单提交行为。
- 所有点击触发动作的地方，优先用
button；链接跳转用a；表单控件用input、select、textarea - 如果必须用
div（比如 Canvas 内嵌控件），必须同时加：tabindex="0"、role="button"、aria-label（或含文本的aria-labelledby），并手动监听keydown处理 Enter/Space -
nav、main、header、footer这些 landmark 标签不光是结构好看——它们让 TalkBack/NVDA 用户能用快捷键（如 Android 上双指滑动）直接跳转区域，省去逐行听读
label 和 for 必须配对，否则表单几乎不可用
视障用户依赖屏幕阅读器读出“用户名输入框”而不是“空白输入框”。没关联的 邮箱：input 只会报“编辑框”，毫无上下文。错误写法：
- 显式：
- 隐式（更简洁）：
- 对复选框/单选组，
fieldset+legend不可省：
alt 属性不是可选项，而是内容等价物
alt 不是“图片描述”，而是当图片不存在时，它就是那段信息本身。空 alt="" 表示“该图纯装饰，无信息量”；留空或写“图片”“logo”属于无效值，屏幕阅读器会读成“图片 图片”或直接跳过关键内容。
- 功能性图标（如搜索放大镜、删除叉号）必须有操作含义的
alt，例如：
- 图表/信息图需提供等效文字摘要，放在
figure+figcaption或紧邻的p中，不能只靠alt - 背景图用 CSS 实现，HTML 中不出现
img标签——否则必须给alt=""，否则会被误读为内容
动态内容更新必须用 aria-live 主动通知
AJAX 加载、表单提交成功、实时搜索结果这些变化，视觉用户能看到，但屏幕阅读器默认不会播报。靠 JS 改 DOM 不等于辅助技术知道发生了什么。
- 状态提示（如“保存成功”）用：
aria-live="assertive" -
class="sr-only"是隐藏视觉样式但保留在可访问树中的通用类，定义为：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; - 不要用
display: none或visibility: hidden包裹待播报内容——它们会从可访问树中彻底移除
真正卡住人的地方往往不是复杂 ARIA，而是 button 写成了 div、label 没绑 id、alt 留空、动态提示没加 aria-live——这些基础项漏掉一个，就足以让整页对部分用户失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
