模板开头必须包含lang和charset，否则屏幕阅读器会按默认语言误读中文页面或跳过字符，浏览器可能因编码错误导致乱码或DOM解析失败；lang须写全如zh-CN，charset须紧邻<title>前声明。
模板开头必须包含 lang 和 charset
缺了这两个，屏幕阅读器（AT）会按默认语言读，比如把中文页面当成英文念，或者直接跳过部分字符。浏览器也可能用错误编码解析文本，导致乱码或 DOM 解析失败。
lang 必须写全，比如 lang="zh-CN"，不能只写 lang="zh"；港澳台地区要用 zh-HK 或 zh-TW。AT 对子区域标识更敏感，识别准确率高得多。
charset 要放在 <head> 最前面，紧挨着 <title> 之前：
<meta charset="UTF-8"><br><title>首页</title>
如果放错位置（比如在
<title> 后面），某些旧版 WebView（如部分 Android App 内嵌浏览器）可能忽略它，回退到 ISO-8859-1，中文直接变方块。
<main> 只能出现一次，且不能嵌套在 <section> 或 <article> 里
这是 WCAG 2.2 的强制要求。多个 <main> 会让 AT 用户无法定位真正的内容起点；嵌套则破坏语义层级，NVDA、VoiceOver 等工具会跳过内部的 <main>，或报“结构冲突”警告。
常见错误写法：
<section><br> <main></main><br></section>
正确做法是让
<main> 直接作为 <body> 的一级子元素，其他语义容器（<header>、<nav>、<footer>）并列同级。
如果页面有多个逻辑区块（比如首页含新闻+产品+客户案例），用 <section> 包裹各自内容，但都放在同一个 <main> 内部。
立即学习“前端免费学习笔记（深入）”；
标题层级必须连续，<h1> 不能靠 CSS 视觉模拟
AT 用户依赖 <h1>–<h6> 构建内容大纲。跳级（如 <h2> 后直接 <h4>）或用 <div style="font-size:2em;font-weight:bold"> 冒充标题，会导致导航中断、大纲丢失、SEO 权重稀释。
每个页面只能有一个 <h1>，它应代表页面核心主题（不是 logo 文字）。动态渲染框架（React/Vue）中，不要用 JS 动态改 document.title 就以为解决了——<h1> 的 DOM 结构必须存在且语义正确。
检查方法：打开 Chrome DevTools → Elements 面板 → 右键任意标题 → “Inspect Accessibility Tree”，看是否出现在“Heading Level”节点下；若没出现，说明语义失效。
交互元素必须原生可聚焦，禁用 outline: none 除非重写焦点样式
键盘用户（包括 AT 用户）靠 Tab 键顺序操作页面。所有按钮、链接、表单控件必须能被聚焦。用 <div onclick="..."> 替代 <button>，或给自定义组件漏掉 tabindex="0"，等于直接屏蔽这部分用户。
更隐蔽的坑是全局写 * { outline: none; }。这会让焦点完全不可见，用户不知道当前在哪。正确做法是保留默认 outline，或用 :focus 显式重绘：
button:focus {<br> outline: 2px solid #007bff;<br> outline-offset: 2px;<br>}
注意：outline-offset 很关键，否则新样式可能被父容器裁剪，导致焦点框显示不全。
实际落地时，最难的不是加几个标签，而是让整个团队接受「语义即功能」——<nav> 不是装饰，<main> 不是锦上添花，它们是页面可被理解的底层协议。一旦结构松动，后续所有 ARIA 补救、JS 修复、自动化测试都会事倍功半。
