HTML语义化本身不破坏可访问性，但忽略DOCTYPE首行空格、ARIA同步及旧浏览器解析边界会导致语义标签退化为div、ARIA属性被忽略、屏幕阅读器无法识别结构。
HTML语义化演进本身不会破坏可访问性，但开发者若忽略渲染模式、ARIA同步和旧浏览器的解析边界，就会让新标签在关键场景下“失效”。
DOCTYPE 必须首行无空格，否则 IE/Edge 进入 Quirks Mode
哪怕只多一个 BOM 或换行前空格，<!DOCTYPE html> 就会失效。后果不是样式错乱那么简单——role、aria- 属性被完全忽略，<nav>、<main> 等语义标签退化为普通 <div>，屏幕阅读器读不出结构。
- 验证方式：Chrome DevTools → Elements 面板顶部看渲染模式，必须显示
Standards；若为Quirks，立刻检查源码开头 - CI/CD 中可加校验脚本：用
head -c 10 file.html | grep -q "^<!"确保 DOCTYPE 紧贴首行 - 编辑器需禁用 UTF-8 BOM 输出（VS Code 设置
"files.encoding": "utf8"，禁用"files.autoGuessEncoding"）
HTML5 标签在 IE8 及以下需 html5shiv + display:block 手动补全
html5shiv 仅解决 DOM 创建问题，不自动设置样式。IE8 默认把 <section> 当作未知内联元素，导致子元素塌陷、浮动失效、无障碍 API 不识别。
- 必须在
<head>中引入后，显式重置显示行为：header, nav, main, section, article, aside, footer { display: block; } - 不要依赖 CSS Reset 或 Normalize.css 的兜底——它们对 HTML5 新标签的
display声明在 IE8 下无效 - 若项目仍需支持 IE8，
<main>标签建议暂不使用（IE 全系原生不支持），改用<div role="main">并确保 JS 动态更新时同步操作aria-hidden
ARIA 属性必须与 DOM 状态实时同步，不能只靠 class 切换
仅用 class="active" 标记当前导航项，对屏幕阅读器毫无意义。用户无法感知“我在哪”，尤其当多个链接文字相同时（如多个“详情”）。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<a href="/product" aria-current="page">产品</a>——aria-current="page"是唯一被主流读屏广泛支持的合法值 - JS 更新导航状态时，必须同时操作：
el.setAttribute('aria-current', 'page')和el.removeAttribute('aria-current')，不能只改 class - 避免
aria-current="true"：WAI-ARIA 规范未定义该值，NVDA 2025.2+ 会静默忽略，VoiceOver 在 macOS 14+ 报 warning
多 <nav> 共存时必须用 aria-label 或 aria-labelledby 区分用途
两个 <nav> 不加区分，屏幕阅读器会把它们合并识别为“一个导航区域”，用户无法跳转到“页脚快速链接”这类次要导航。
- 主导航：
<nav aria-label="主导航"><ul>...</ul></nav> - 页脚导航：
<nav aria-label="页脚站点地图"><ul>...</ul></nav> - 绝对不要用
aria-label="navigation"这类泛化描述——它等于没标；也别用id+aria-labelledby指向不可见文本，部分读屏对隐藏文本支持不稳定
真正难的不是写对新标签，而是每次新增语义结构时，都得反问一句：这个标签在 IE11 的标准模式下是否被识别？在 NVDA 的“结构视图”里能否被单独列出？在键盘 Tab 流中是否自然进入又退出？这些边界条件，比语法本身更消耗判断力。
