lang属性必须写在<html>标签上且值为IETF标准格式（如zh-CN），否则屏幕阅读器会因无法识别语言而误读内容；charset必须紧贴<head>开头，viewport禁用缩放违反无障碍条款，description与og:description须语义一致。
lang 属性不写或写错，屏幕阅读器就“读不准”
页面 <html> 标签上漏掉 lang，或者填成 lang="zh" 这种模糊值，会导致屏幕阅读器无法准确判断语言规则——中文可能按日语节奏读、简体字混入繁体语境时发音错乱。这不是“偶尔不准”，而是每次加载都出问题。
真实场景里，常见错误包括：
-
lang缺失（尤其 SSR 渲染后动态插入的子页） - 多语言站点硬编码为
lang="zh-CN"，但某段内容实际是粤语或英文 - React/Vue 中用
document.documentElement.lang = 'en'动态改，却没同步更新<html>的初始属性，导致首屏渲染阶段已错
正确做法是：服务端渲染时根据用户语言偏好注入；客户端切换语言时，同时改 document.documentElement.lang 和所有含 lang 的语义化容器（如 <section lang="ja">）。
charset 放错位置，辅助技术直接“看不懂”
<meta charset="UTF-8"> 必须紧贴 <head> 开始，不能前面有任何注释、空格、<title> 或其他 <meta>。浏览器解析 HTML 时，前 1024 字节内没看到 charset，就会按默认编码（通常是 ISO-8859-1）解码后续内容——中文变乱码，屏幕阅读器读出来就是一堆“”或拼音乱序。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的点：
- Webpack/Vite 模板里自动生成的
<title>在charset前面，等于埋雷 - 某些 CMS 插件往
<head>注入 tracking script 或广告 meta，把charset挤到第 5 行 - HTTP 响应头里设了
Content-Type: text/html; charset=utf-8，但 HTML 里没声明，部分旧版辅助技术只认 HTML 内声明
验证方式：用 Chrome DevTools → Network → 查看响应原始内容，确认 <meta charset="UTF-8"> 是 <head> 里的第一行非空白字符。
viewport 禁用缩放，等于拒绝对视力障碍用户开放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 这种写法，在 WCAG 2.1 中明确违反 1.4.4（Resize Text）条款。视力受限用户依赖系统级缩放或双指放大来阅读，禁用 user-scalable 直接剥夺其基本操作权。
替代方案不是“完全放开”，而是控制缩放范围：
- 允许缩放到 200%：加
maximum-scale=2.0，保留基础可调性 - 避免
initial-scale设为小数（如0.8），这会让文字初始过小，再放大也难辨识 - 对固定布局组件（如图表 canvas），用 CSS
transform: scale()替代 viewport 锁定，不影响全局缩放逻辑
注意：iOS Safari 对 user-scalable=no 的兼容行为不稳定，有时仍能双指缩放但触发异常重绘，反而更影响可访问性。
description 和 og:description 不一致，社交分享时可访问性断层
当用户通过微信、微博等平台分享网页，辅助技术（如 TalkBack、VoiceOver）会读取 Open Graph 标签中的 og:description 作为卡片说明。但如果它和 <meta name="description"> 内容不一致，或为空，屏幕阅读器在分享预览阶段就失去上下文。
典型问题：
-
og:description复制粘贴 SEO 关键词堆砌句，语义破碎（如“买手机_华为手机_苹果手机_小米手机_手机排行榜”） - 动态生成的
og:imageURL 含 token 参数，但og:description没同步更新，描述与图不符 - 单页应用中，路由变化后未重置
og:description，仍显示首页摘要
关键原则：两个 description 必须语义等价，且优先使用自然语言短句（≤155 字），避免标点堆叠和关键词重复。若页面无实质描述，宁可留空也不填无意义占位符。
真正难的不是写对这几行标签，而是在构建流程里让它们始终“活”着——CMS 模板、构建脚本、SSR 渲染、客户端路由切换，每个环节都可能悄悄覆盖或遗漏其中一项。可访问性不是加个 lang 就完事，是整条链路里每处元数据都要有明确责任人和校验机制。
