<main>必须全页唯一且直接子元素于<body>，禁止嵌套在<article>、<section>等任何标签内；<nav>须包裹真实导航链接；<footer>作全站页脚时必须为<body>直接子元素。
语义标签替换时，哪些位置绝对不能省略
直接用 <header>、<nav>、<main> 替换 class 包裹的 <div> 不够——关键在结构约束和唯一性。浏览器和读屏器会校验逻辑，不是“写了就算”。
-
<main> 在整个页面中只能出现一次，且不能嵌套在 <article>、<section> 或其他 <main> 内；否则 NVDA 会跳过，Lighthouse 报 “duplicate-main” 错误
-
<nav> 必须包裹一组导航链接，如果里面只有文字或按钮（无 <a> 或 <button>），读屏器可能忽略它；别为了“有 nav”而硬塞
-
<footer> 若出现在 <article> 内部，代表该文章的页脚（如作者、发布时间），不是全站页脚；全站页脚必须是 <body> 直接子元素，且紧贴 </body> 前
aria-label 和 aria-labelledby 混用会触发什么错误
同时写 aria-label 和 aria-labelledby 是明确违反 ARIA 规范的行为：后者会被完全忽略，且 Lighthouse、axe、WAVE 都会报 aria-allowed-attr 或 aria-unsupported-elements 错误。
- 典型场景：图标按钮既写了
aria-label="搜索"，又加了 aria-labelledby="search-label" —— 实际生效的只有 aria-label，但若 UI 后续改文案，aria-labelledby 指向的文本已更新，而 aria-label 还卡在旧值上，造成不一致
- 真正需要
aria-label 的情况极少：纯图标（无文字）、加载 spinner、临时占位符；其余一律优先用 aria-labelledby，哪怕要额外加一个 <span id="xxx" class="sr-only">...
- 注意：
aria-labelledby 可指向多个 ID（空格分隔），但所有 ID 对应元素必须存在于 DOM 中且非 display: none；visibility: hidden 或 opacity: 0 不影响可访问性读取
DOCTYPE 和 lang 属性错位会导致什么兼容性断裂
<!DOCTYPE html> 不在首行，或 <html lang="zh-CN"> 缺失/写错，不是“小疏漏”，而是让整页无障碍能力归零的硬伤。
-
<!DOCTYPE html> 前出现任何字符（包括 UTF-8 BOM、空格、注释、换行）→ 浏览器强制进入怪异模式 → flex、grid、aspect-ratio 全失效，屏幕阅读器结构树构建失败
-
lang 值写成 zh 或 cn → VoiceOver 默认用普通话引擎读粤语内容，NVDA 拼音分词错误，Google 搜索降权；简体中文必须写 zh-CN，繁体写 zh-TW 或 zh-HK
- SPA 动态切语言时，只改 i18n 状态不碰
document.documentElement.lang → 辅助技术全程读旧语言，:lang(zh-CN) { } CSS 规则也不生效
alt 属性为空字符串到底算不算“写了”
写 alt="" 是正确做法，但前提是这张图确实**纯粹装饰性**；很多开发者误以为“写了 alt 就过关”，结果把关键信息图标也设为空，反而比不写更危险。
立即学习“前端免费学习笔记（深入）”；
- 产品轮播图中的箭头图标、分隔线、背景花纹图 →
alt="" 合理，读屏器跳过
- 带状态含义的 icon（如红叉表示错误、绿对勾表示成功）、图表中的数据点、按钮内的图标 → 必须提供有意义的
alt，例如 alt="验证失败，请检查邮箱格式"
- 用 CSS
background-image 实现的图片 → HTML 里没 <img>，就不存在 alt；这种图若承载信息，必须改用 <img> 或补充 aria-label/aria-describedby
实际重构时最常被跳过的，是 <main> 的唯一性和 lang 的精确值——它们不报错、不崩样式，但会让整套无障碍机制静默失效。
直接用 <header>、<nav>、<main> 替换 class 包裹的 <div> 不够——关键在结构约束和唯一性。浏览器和读屏器会校验逻辑，不是“写了就算”。
-
<main>在整个页面中只能出现一次，且不能嵌套在<article>、<section>或其他<main>内；否则 NVDA 会跳过，Lighthouse 报 “duplicate-main” 错误 -
<nav>必须包裹一组导航链接，如果里面只有文字或按钮（无<a>或<button>），读屏器可能忽略它；别为了“有 nav”而硬塞 -
<footer>若出现在<article>内部，代表该文章的页脚（如作者、发布时间），不是全站页脚；全站页脚必须是<body>直接子元素，且紧贴 </body> 前
aria-label 和 aria-labelledby 混用会触发什么错误
同时写 aria-label 和 aria-labelledby 是明确违反 ARIA 规范的行为：后者会被完全忽略，且 Lighthouse、axe、WAVE 都会报 aria-allowed-attr 或 aria-unsupported-elements 错误。
- 典型场景：图标按钮既写了
aria-label="搜索"，又加了aria-labelledby="search-label"—— 实际生效的只有aria-label，但若 UI 后续改文案，aria-labelledby指向的文本已更新，而aria-label还卡在旧值上，造成不一致 - 真正需要
aria-label的情况极少：纯图标（无文字）、加载 spinner、临时占位符；其余一律优先用aria-labelledby，哪怕要额外加一个<span id="xxx" class="sr-only">... - 注意：
aria-labelledby可指向多个 ID（空格分隔），但所有 ID 对应元素必须存在于 DOM 中且非display: none；visibility: hidden或opacity: 0不影响可访问性读取
DOCTYPE 和 lang 属性错位会导致什么兼容性断裂
<!DOCTYPE html> 不在首行，或 <html lang="zh-CN"> 缺失/写错，不是“小疏漏”，而是让整页无障碍能力归零的硬伤。
-
<!DOCTYPE html>前出现任何字符（包括 UTF-8 BOM、空格、注释、换行）→ 浏览器强制进入怪异模式 →flex、grid、aspect-ratio全失效，屏幕阅读器结构树构建失败 -
lang值写成zh或cn→ VoiceOver 默认用普通话引擎读粤语内容，NVDA 拼音分词错误，Google 搜索降权；简体中文必须写zh-CN，繁体写zh-TW或zh-HK - SPA 动态切语言时，只改 i18n 状态不碰
document.documentElement.lang→ 辅助技术全程读旧语言，:lang(zh-CN) { }CSS 规则也不生效
alt 属性为空字符串到底算不算“写了”
写 alt="" 是正确做法，但前提是这张图确实**纯粹装饰性**；很多开发者误以为“写了 alt 就过关”，结果把关键信息图标也设为空，反而比不写更危险。
立即学习“前端免费学习笔记（深入）”；
- 产品轮播图中的箭头图标、分隔线、背景花纹图 →
alt=""合理，读屏器跳过 - 带状态含义的 icon（如红叉表示错误、绿对勾表示成功）、图表中的数据点、按钮内的图标 → 必须提供有意义的
alt，例如alt="验证失败，请检查邮箱格式" - 用 CSS
background-image实现的图片 → HTML 里没<img>，就不存在alt；这种图若承载信息，必须改用<img>或补充aria-label/aria-describedby
<main> 的唯一性和 lang 的精确值——它们不报错、不崩样式，但会让整套无障碍机制静默失效。
