视障用户能否顺畅使用页面取决于语义化html而非aria-label数量；必须用nav替代div实现导航识别，alt属性需按图片功能书写，表单必须配label，键盘焦点需符合逻辑且可感知，动态内容需合理使用aria-live，最终须通过真实屏幕阅读器测试验证。
视障用户能否顺畅使用你的页面，不取决于你写了多少 aria-label，而在于你是否让浏览器和屏幕阅读器“一眼看懂”结构——语义化 HTML 是门槛最低、效果最稳的起点。
为什么用 nav 比用 div 包导航更关键
屏幕阅读器不是靠 CSS 类名或 JS 逻辑识别导航区，而是直接监听语义标签。一个 nav 元素会被读作“导航区域”，用户可一键跳转；而 div class="header-nav" 默认就是“普通容器”，除非你手动加 role="navigation" 并确保焦点管理完整，否则它对屏幕阅读器来说等于不存在。
- 所有主导航必须包裹在
nav中，多个导航区（如页脚链接）可加aria-label区分，例如<nav aria-label="页脚导航"></nav> - 避免嵌套
nav：一个页面通常只需 1–2 个nav，多余嵌套会干扰跳转逻辑 -
nav内部链接应保持自然 DOM 顺序，不要用 CSSorder或 JS 重排，否则键盘 Tab 顺序与视觉顺序不一致
alt 属性写什么，取决于图片“干了什么”
不是所有图片都需要描述外观。“一张蓝天白云的照片”对视障用户毫无价值；真正重要的是这张图在当前上下文里承担的功能。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 功能性图片（如提交按钮图标）：用
alt="提交表单"，而非alt="绿色勾选图标" - 装饰性图片：直接写
alt=""（空字符串），不要省略或写alt="装饰"，否则屏幕阅读器会读出“装饰”二字，干扰内容流 - 图表类图片：若无法内联 SVG 或用
figure+figcaption补充说明，至少在alt中概括趋势，例如alt="2023年销售额同比增长 12%，Q4 达峰值" - 含文字的图片（如宣传海报）：必须把图中所有关键文字抄进
alt，不能只写“宣传图”
表单元素没配 label，等于没做无障碍
很多开发者用 placeholder 当提示，但屏幕阅读器默认不读 placeholder，且用户聚焦后 placeholder 消失，失去上下文。真正的关联必须靠 label。
- 优先用隐式关联：
<label>邮箱地址<input type="email"></label>，简洁可靠 - 显式关联需严格匹配 ID：
<label for="email">邮箱地址</label><input id="email" type="email">，ID 错一位就失效 - 禁用无
label的input+ 旁边span文字组合，这种“视觉上像表单”的写法对屏幕阅读器不可见 - 错误提示要绑定到对应字段：
<span id="email-error" role="alert">请输入有效邮箱</span>，并用aria-describedby="email-error"挂在 input 上
键盘焦点不是“能按 Tab 就行”，而是“按完就知道在哪、该干嘛”
视障用户几乎不用鼠标，Tab 键是他们浏览页面的唯一路径。焦点丢失、焦点顺序混乱、无焦点样式，都会直接阻断操作。
- 所有可交互元素（按钮、链接、带
tabindex的容器）必须有清晰的:focus-visible样式，不能仅依赖浏览器默认轮廓线（常被 CSS 重置掉） - 模态框打开时，焦点必须自动进入第一个可聚焦项；关闭后，焦点必须回到触发它的元素（不是跳回页面顶部）
- 禁用
tabindex="-1"以外的负值——它会让元素脱离自然 Tab 流，仅用于 JS 控制焦点，滥用会导致焦点“消失” - 动态加载内容（如搜索建议列表）出现时，若希望用户立刻感知，可用
aria-live="polite"，但别对每条建议都设aria-live="assertive"，否则语音会打断用户
最容易被忽略的不是技术细节，而是测试习惯：不打开屏幕阅读器跑一遍真实流程，就永远不知道 main 标签有没有被跳过、h2 是否真被识别为二级标题、错误提示会不会被静音。可访问性不是加几个属性就完成的事，它是结构、行为、文案三者咬合的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
