构建无障碍Web页面的核心是正确使用HTML5语义化标签，如、、、等，它们向屏幕阅读器传递明确区域意图；须包裹可聚焦链接并用aria-label区分多导航区，全局唯一且不可嵌套于或内，用于独立内容而仅作主题分组；标题需h1–h6连续层级，表单必须用显式绑定及分组，图片必设alt属性，ARIA仅作原生语义补充，最后须用axe DevTools扫描、键盘导航和屏幕阅读器验证。
构建无障碍Web页面，核心是让内容能被所有人平等获取——尤其是依赖屏幕阅读器、键盘导航或放大工具的用户。HTML5语义标签不是装饰，而是结构基石，直接决定辅助技术能否“读懂”你的页面。
用对标签，等于给屏幕阅读器装上导航地图
语义标签如
-
必须包裹真实可聚焦的链接（a、button等），不能只放文字；多个导航区建议加 aria-label 区分，例如
<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav> -
全局唯一，且不能嵌套在
、 等限制子元素的标签内——否则浏览器可能丢弃节点，导致主体内容“消失”
- 用于可独立传播的内容（如一篇博客）， 仅作主题分组，二者不可混用；误将整个页面包进 而漏掉 ，会让屏幕阅读器无法定位核心内容
标题层级与表单，是用户快速理解内容的关键
语义不只是区域划分，也体现在内容组织逻辑中：
- 坚持 h1–h6 的连续层级，避免跳跃（如 h2 后直接 h1）；屏幕阅读器用户常用快捷键跳转标题，断层会破坏信息路径
- 表单必须用原生语义结构： 显式绑定 （通过 for/id 或包裹方式）， + 分组，不能用 替代后加 role——旧版读屏软件可能完全忽略这类“模拟语义”
- 表格必须配
，且紧随 开始标签之后；它提供上下文，是用户接触数据前的第一条线索
语义是基础，ARIA 是补充，不是替代
原生语义标签自带隐式 ARIA role（如 对应 role="navigation"），无需重复添加。ARIA 应只在必要时增强动态行为：
立即学习“前端免费学习笔记（深入）”；
- 按钮状态用 aria-pressed，折叠菜单用 aria-expanded，但前提是已使用 或 等语义化交互元素
- 避免用 div + role="button" 模拟按钮——需手动处理焦点、键盘事件（Enter/Space）、状态反馈，极易出错且兼容性差
- 所有图片必须有 alt 属性；纯装饰图写 alt=""，功能性图标需描述作用（如 "搜索按钮" 而非 "放大镜"）
验证与测试，不能只靠肉眼
写完代码不等于无障碍就位：
- 用浏览器插件（如 axe DevTools）扫描常见问题：缺失 、 未绑定、对比度不足等
- 关闭样式，用键盘 Tab 键遍历页面：能否顺序到达所有可操作元素？焦点是否清晰可见？跳过导航是否顺畅？
- 开启 NVDA 或 VoiceOver，听一遍朗读流：导航区是否被识别为“导航”， 是否被标注为“主要内容”，标题是否形成合理目录？
- 表格必须配
