和是响应式与无障碍的硬性前提：前者确保屏幕阅读器正确切换中文语音引擎，后者防止移动端强制缩放、字体错位及触控目标过小；缺一不可。
用 <meta name="viewport"> 打底是硬性前提
没设 lang 属性，屏幕阅读器无法正确切换中文语音引擎；漏掉 viewport，移动端强制缩放、字体错位、触控目标过小就全来了。这两项不是“可选优化”，而是响应式与无障碍的启动开关。
常见错误：只写 <meta name="viewport" content="width=device-width"> —— 缺少 initial-scale=1 会导致 iOS Safari 在横屏后重置缩放，用户双击放大后无法恢复原比例。
-
必须出现在根元素，且语言值要精确（如不用zh，避免歧义） -
<meta name="viewport" content="width=device-width, initial-scale=1">放在最前面，防止渲染阻塞 - 若页面含多语言内容块，用
lang属性局部覆盖，例如<p lang="en">API response</p>
语义化结构必须用对 <main></main>、<nav></nav>、<section></section> 而非 <div>
<p>仅靠 CSS 类名（如 <code>class="header"）无法传递语义，辅助技术读不到“这是导航栏”或“这是主内容区”。浏览器内置的焦点顺序、阅读器的区域跳转（如 JAWS 的 R 键跳到 <main></main>）全依赖原生语义标签。
典型误用：<div role="navigation"> —— 看似补了 ARIA，但绕过了原生 <code><nav></nav> 的默认行为和兼容性保障，还可能干扰某些旧版 NVDA 的识别逻辑。
- 每个页面有且仅有一个
<main></main>，且不应嵌套在<article></article>或<section></section>内 -
<nav></nav>用于主要导航链接集合；次要链接（如页脚版权旁的“隐私条款”）用<footer></footer>+ 普通<a></a>即可，不必强加role="navigation" -
<section></section>需带<h2>–<h6></h6> </h2>标题，否则会被部分阅读器忽略为无意义分组
响应式断点要配合 @media (prefers-reduced-motion) 和 @media (prefers-color-scheme)
纯像素断点（如 max-width: 768px）解决设备尺寸适配，但忽略用户系统级偏好设置——这直接关系到无障碍体验：动画闪动可能诱发癫痫，深色模式缺失会让光敏感用户无法持续使用。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
注意：CSS 媒体查询本身不触发 reflow，但若在其中修改 font-size 或 line-height 导致文字重排，需确保行高始终 ≥ 1.5，否则缩放后文字挤叠、阅读器字幕框溢出。
- 禁用动画优先：用
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }，而非简单animation: none（部分浏览器不支持） - 深色模式适配：定义
:root中的 CSS 变量（如--bg: #fff; --text: #000;），再用@media (prefers-color-scheme: dark)覆盖，避免内联 style 或 JS 动态改 class - 不要用 JS 监听
matchMedia来手动切主题——延迟高、易丢失初始状态，CSS 原生媒体查询才是零成本方案
<button></button> 和 <a></a> 的角色不能混，且必须处理 :focus-visible
用 <div onclick> 模拟按钮？键盘用户按 <code>Tab 进不去，屏幕阅读器报“静态文本”。用 <a href="#"></a> 当按钮？激活后 URL 多个 #，历史栈污染，且缺乏 type="button" 的表单上下文语义。
更隐蔽的问题是焦点样式：Chrome/Firefox 默认只在键盘操作时显示 :focus，鼠标点击后消失——这会让低视力用户完全丢失当前操作位置。
- 触发行为用
<button></button>，跳转地址用<a href="..."></a>，二者不可互换 - 必须写
<button type="button"></button>显式声明类型，防止意外提交表单 - 用
:focus-visible替代:focus控制焦点环，配合outline: 2px solid #0066cc;（满足 WCAG 2.1 对对比度和尺寸的要求） - 禁用状态统一用
disabled属性（<button disabled></button>），而非仅加opacity: 0.5+pointer-events: none（后者对键盘焦点无效）
实际落地时，最常被跳过的不是“怎么写”，而是“是否验证”。lang 属性拼错、<main></main> 漏写、:focus-visible 被 CSS reset 覆盖——这些都得靠 Lighthouse 或 axe DevTools 实时跑一遍才看得见。框架层再漂亮，DOM 树里缺一个语义节点，无障碍就断了一节链路。
