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