lang、charset、viewport必须严格按规范配置：lang须写在标签上且值合规（如zh-cn），charset必须为内首个标签，viewport须为width=device-width, initial-scale=1.0；任一缺失或错误都将导致屏幕阅读器读错语言、乱码或布局失效。
直接说结论：lang、charset、viewport 这三个 <meta> 和 是可访问性配置里投入产出比最高的起点，漏掉任何一个，屏幕阅读器就可能读错语言、跳过正文、或把页面撑出横向滚动条。
为什么 lang 属性必须写在
不是写在某个 <div> 或 <code><p></p> 里凑数——它得是根节点的声明。屏幕阅读器启动时第一件事就是读 ，据此切换发音引擎。如果没设，或设成 lang="zh"（缺地区码），某些读屏会默认用粤语或日语发音；设成 lang="en" 却放中文内容，词组断句全乱。
-
lang="zh-CN"是大陆简体中文的准确写法，zh-TW对应繁体中文 - 页面内混有英文段落时，单独给那段加
<span lang="en">Hello</span>，别指望全局lang覆盖一切 - Next.js / React SSR 场景下，确保服务端渲染时
标签已带lang，不要等 JS 在客户端补
<meta charset="UTF-8"> 放错位置会导致乱码不可逆
它必须是 里**第一个** <meta> 标签，且不能有任何字符（包括空格、BOM）在它前面。浏览器解析到这一行才开始按 UTF-8 解码后续内容；如果前面有注释、空行或别的 <meta>，解码就会失败，中文变方块，屏幕阅读器直接卡死或跳过整段。
- 检查方式：用浏览器开发者工具看 Network → Response Headers → Content-Type 是否含
charset=utf-8；再看 Elements 面板里<meta charset>是否紧贴开头 - Webpack/Vite 构建时，HTML 插件若自动注入
<meta>，确认它没插在自定义<meta>后面 - 服务端模板（如 EJS、Django）中，避免在
<meta charset>前写任何或{% %}逻辑
<meta name="viewport"> 不只是响应式，更是可访问性底线
它的作用远不止“让手机页面不缩放”——视力障碍用户常把浏览器缩放到 200% 甚至 400%，如果 viewport 缺失或写成 width=320 这类固定值，页面会强制缩小、文字糊成一片、按钮点不中，辅助技术根本无法聚焦控件。
- 标准写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，别加user-scalable=no（禁缩放等于剥夺用户控制权） - 不要用 CSS 的
transform: scale()模拟缩放，这会让屏幕阅读器坐标错乱 - 测试方法：Chrome DevTools → Toggle device toolbar → 设置为 “Responsive”，再手动拖动缩放滑块到 300%，确认所有文字清晰、按钮可点、无横向滚动
最容易被忽略的是三者之间的依赖关系：lang 决定发音，charset 决定字符能否正确加载，viewport 决定放大后是否可用——少一个，可访问性链条就断一环。它们不产生视觉变化，但一旦出错，对辅助技术用户就是功能级失效。
