语义化HTML标签提升可访问性：用替代明确页面结构；和按交互意图严格区分；图片alt属性必填且准确；表单控件必须绑定；语义标签需与内容意图一致。
用 布局
辅助技术（如屏幕阅读器）依赖语义结构理解页面逻辑。纯 嵌套会让它们只读出“division”，无法区分导航、标题区或主体内容。
-
-
aria-label="主导航"（尤其页面含多个
-
- 若必须用
图片的
对屏幕阅读器而言，缺失 role="button" 的 提交 相当于“此处有一张图，但不知道是什么”——它会读出文件名（如 #），或完全跳过。
- 装饰性图片：用
role="button" tabindex="0"（空字符串），明确告知辅助工具忽略
- 信息性图片：描述内容本身，不是“一张图显示……”。例如商品图用
href="javascript:void(0)"
- 图文混合场景（如图标+文字按钮）：图标用
aria-label，文字本身已提供含义，重复描述反而干扰
表单控件必须绑定 alt，别只靠视觉对齐
仅靠 CSS 把文字放在输入框旁边，屏幕阅读器无法自动关联两者。用户聚焦 alt 时，听不到这是“邮箱”还是“密码”。
- 显式绑定：用
![HTML5怎样提升网页可访问性_用语义标签帮辅助工具识别【可达】]()
icon_menu.png 匹配，alt=""
- 隐式绑定：把
alt="黑色圆领针织衫，袖口有白色条纹" 包进 alt="商品图片"，更简洁且无需 ID：alt=""
- 避免仅用
语义标签不是“写了就达标”，关键在是否与内容真实意图一致。比如用 for 包裹广告位，或给搜索框加 id，反而会误导辅助工具。可访问性失效往往发生在语义被滥用，而不是没用。
辅助技术（如屏幕阅读器）依赖语义结构理解页面逻辑。纯 对屏幕阅读器而言，缺失 仅靠 CSS 把文字放在输入框旁边，屏幕阅读器无法自动关联两者。用户聚焦 必须包含一组导航链接，且建议加 aria-label="主导航"（尤其页面含多个 时） 页面唯一，且不能嵌套在 ❌ 点击后 URL 变成 ，按回车会滚动到页首，且需手动加 才算勉强可用 模拟按钮（如禁用 JS 场景），至少设 并补全
图片的
不是可选项，而是强制识别路径role="button" 的 提交 相当于“此处有一张图，但不知道是什么”——它会读出文件名（如 #），或完全跳过。
role="button" tabindex="0"（空字符串），明确告知辅助工具忽略，而非 href="javascript:void(0)"
aria-label，文字本身已提供含义，重复描述反而干扰表单控件必须绑定
alt，别只靠视觉对齐alt 时，听不到这是“邮箱”还是“密码”。
语义标签不是“写了就达标”，关键在是否与内容真实意图一致。比如用 icon_menu.png 匹配，alt=""
alt="黑色圆领针织衫，袖口有白色条纹" 包进 alt="商品图片"，更简洁且无需 ID：alt=""
当标签——它在输入后消失，且很多辅助工具不读
for 包裹广告位，或给搜索框加 id，反而会误导辅助工具。可访问性失效往往发生在语义被滥用，而不是没用。
