可访问性底座必须从标签开始构建：强制添加精确lang属性（如lang="zh-cn"），确保唯一具描述性，初始html即使用语义化标签（），并正确设置viewport。
必须从 标签开始就注入可访问性底座，否则后续所有语义化补救都事倍功半。
给 lang 属性是强制起点
没有 lang，屏幕阅读器无法确定默认语言，会用错语音引擎（比如把中文读成英文音调），连基础朗读都不可靠。搜索引擎和部分 CSS 伪类（如 :lang()）也依赖它。
-
lang必须设在标签上，不是或某个 div - 值要精确：中文用
lang="zh-CN"，繁体用lang="zh-TW"，别写lang="zh"这种模糊值 - 如果页面含多语言段落，对应元素再单独加
lang，比如<p lang="en">Hello</p>
<title></title> 不只是 SEO 配件，它是首个可访问性锚点
书签、标签页标题、屏幕阅读器进入页面时第一句播报内容，都来自 <title></title>。空 title、泛泛的 “首页” 或堆砌关键词，等于主动屏蔽视障用户对页面意图的第一判断。
- 每个页面的
<title></title>必须唯一且具描述性，例如 “用户设置｜账户安全 - 我的网站” - 避免用纯图标按钮或 JS 渲染后才填 title —— 初始 HTML 必须包含有效文本
- 不要依赖 JavaScript 动态改 title 来“修复”，首屏加载时它就得是对的
语义化骨架不能等“功能开发完”再加
用 <div> 搭好框架再批量替换成 <code><header></header>、<nav></nav>、<main></main>，看似省事，实则埋雷：CSS 选择器可能已耦合 div.header，JS 逻辑可能依赖 class 名，替换时极易破坏布局或交互。
- 初始 HTML 骨架就该是：
<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>五件套 -
<main></main>必须且只能出现一次；<nav></nav>可多个，但建议用aria-label区分，如<nav aria-label="主导航"></nav> - 别为了“兼容老浏览器”放弃语义化 —— 所有现代辅助技术都识别这些标签，且 IE11+ 均支持基本语义渲染
<meta name="viewport"> 影响键盘用户的焦点可见性
缺失或错误的 viewport 设置会导致移动端强制缩放，让键盘焦点框被缩放裁剪、视觉上消失，用户根本不知道当前聚焦在哪——这不是样式问题，是可访问性链路断裂。
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止使用
user-scalable=no或maximum-scale=1.0，这会锁死缩放，剥夺低视力用户放大页面的权利 - 若用 CSS
zoom或 transform 缩放布局，焦点 outline 很可能失效，优先用响应式单位（rem、vh/vw）替代
真正难的不是记住这些规则，而是抵抗“先跑起来再说”的惯性——一旦 DOM 结构定型、CSS 类名固化、JS 事件绑定完成，回头补语义就像给行驶中的汽车换底盘。可访问性底座，只在框架搭建的前五分钟里成本最低。
