90%的无障碍问题源于HTML语义缺失：nav需配具体aria-label，img必填alt（内容图描述、装饰图alt=""），button须显式声明type，html lang必须用标准值如zh-CN，并通过NVDA或Chrome面板真实验证。
直接说结论：90% 的无障碍问题不是技术做不到，而是开发者在写 HTML 时默认跳过了语义补全——比如 nav 不加 aria-label、main 套在 table 里、img 没 alt、button 忘了 type。
nav 标签没配 aria-label 就等于没导航
很多项目直接写 <nav><ul>...</ul></nav>，以为用了语义标签就万事大吉。但屏幕阅读器（NVDA、VoiceOver）遇到无标识的 nav，只会读成“导航”，不告诉你这是主导航、侧边栏导航还是面包屑。
- 必须加
aria-label，且值要具体：aria-label="主导航"或aria-label="面包屑导航" - 面包屑里的当前页链接，要加
aria-current="page"，否则读屏器无法区分“已到达”和“可点击” - 别用
aria-label="Navigation"这种泛化英文——中文站就写中文，语音引擎才不会切错语言
img 标签省略 alt 是 SEO 和无障碍双杀
省略 alt 不只是“图片没描述”那么简单。它会让搜索引擎无法识别图中内容，也会让视障用户完全不知道页面里有张图，更严重的是：浏览器在图片加载失败时，会留出空白占位框，破坏视觉流。
- 内容图（如产品图、示意图）：写有意义的描述，
alt="黑色无线降噪耳机正面照" - 装饰图（如分隔线、背景花纹）：用
alt=""+role="presentation"显式声明“无需暴露” - 图标类
img（如下载箭头）：优先改用svg+<title>，或至少确保alt包含动作意图，如alt="下载PDF文档"
button type 属性缺失导致表单误提交
HTML 中 button 默认是 type="submit"。如果你在 <form> 里放了一个没写 type 的按钮，点它就会触发表单提交——哪怕你本意只是打开弹窗或切换 tab。
立即学习“前端免费学习笔记（深入）”；
- 表单内按钮必须显式声明：
type="submit"、type="reset"或type="button" - JS 绑定的交互按钮（如
onclick="toggleMenu()"），一定要写type="button"，否则回车聚焦时也可能意外提交 - 别依赖 CSS 隐藏按钮外观来“规避”行为——
disabled状态也要同步加属性，不能只靠opacity: 0.5
lang 属性空着或写错引发语音引擎错乱
<html lang=""> 或 <html lang="zh"> 是典型错误。前者让屏幕阅读器失去语言上下文，后者不符合 IETF 语言标签规范，会导致 VoiceOver 用粤语引擎读简体中文，或者 NVDA 直接跳过语音合成。
- 中文站点必须用
lang="zh-CN"（大陆）、lang="zh-TW"（台湾）、lang="zh-HK"（香港） - 多语言页面要动态更新：
document.documentElement.lang = "en-US"，不能只靠初始静态值 - SPA 场景下，路由切换后务必同步更新
lang和<title>，否则读屏器始终停留在首屏语言环境
最常被忽略的一点：无障碍不是加完 ARIA 就结束，而是要进真实环境验证——用 NVDA+F7 打开“地标列表”，看 nav、main、complementary 是否按预期出现；用 Chrome 的 Accessibility 面板检查节点是否被正确纳入无障碍树。模板生成的代码，永远只是起点，不是终点。
