必须写，width=device-width定义css像素基准，initial-scale=1.0禁用ios自动放大逻辑，二者缺一不可。
用 viewport 元标签控制缩放和初始尺寸
移动端默认会把页面渲染成 980px 宽再缩放显示，不加 viewport 就等于放弃响应式基础。很多开发者只写 <meta name="viewport" content="width=device-width">，但漏掉 initial-scale=1.0，导致 iOS Safari 在横屏切换后可能意外放大或缩小文字。
正确写法必须包含三项关键参数：
-
width=device-width：让布局宽度匹配设备逻辑像素（不是物理像素） -
initial-scale=1.0：禁用初始缩放，避免字体被强制放大破坏行高 -
user-scalable=no要慎用——可访问性指南明确反对禁用用户缩放，除非有特殊交互需求（如地图控件）
推荐最小安全配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
语义化标签不能只靠 div + class 模拟
屏幕阅读器依赖 HTML5 语义结构识别页面逻辑，比如把 <div class="header"> 当作页眉，它完全无法理解。哪怕视觉样式一致，缺失语义也会让键盘导航跳过整个区域、搜索“下一个标题”时直接跳到 <code>h2。
常见误用与修正：
- 导航栏用
<nav></nav>，不是<div role="navigation">（后者冗余且易漏 aria-label） <li>文章主体必须用 <code><main></main>，且全站只能有一个；多个<main></main>会让 AT（辅助技术）混淆上下文 - 表单控件必须配
<label for="id"></label>或嵌套写法，aria-label是备选，不是首选 - 用浏览器插件（如 axe DevTools）实时扫描，重点检查
:hover、:focus-visible、:disabled状态 - 小字号（font-size: 14px 的正文必须用深灰（如
#333），不能用#666 - 图片上的文字需额外叠加半透明遮罩或描边，纯靠文字颜色无法满足对比度要求
- 所有可交互元素（按钮、链接、输入框）天然可聚焦，无需加
tabindex；只有需要键盘触发的自定义组件才考虑tabindex="0" -
:focus样式被outline: none直接清空是最大雷区——必须用box-shadow或border替代，且要足够醒目（至少 2px 宽、高对比色） - 模态框打开时，用
inert属性或aria-hidden="true"+ 手动管理焦点，否则 Tab 仍会穿透到背景内容
检查方法：关闭 CSS 后看结构是否仍可读；或用 Chrome DevTools 的 Accessibility Inspector 查 role 和 name 是否完整。
color 和 background-color 对比度必须 ≥ 4.5:1
WCAG 2.1 AA 级要求普通文本对比度不低于 4.5:1，但很多人只测默认状态，忽略悬停、聚焦、禁用等伪类。更隐蔽的问题是：CSS 预处理器变量或设计系统 token 没做对比度校验，上线后才发现灰色文字在浅灰背景上几乎看不见。
实操建议：
工具推荐：WebAIM Contrast Checker 输入十六进制色值即可验证，支持 WCAG 2.1 和 2.2 标准。
键盘导航失效常因 tabindex 乱用或 focus 样式被覆盖
键盘用户依赖 Tab 键顺序操作，但 tabindex="0" 随意加在非交互元素上（如 <span tabindex="0">文本</span>）会打乱自然流，而 tabindex="-1" 又常被用来“隐藏”焦点，结果导致模态框关闭后焦点丢失到 body。
真正影响可用性的细节：
测试方式：拔掉鼠标，全程用键盘完成注册流程——卡在某一步出不去，基本就是 tabindex 或焦点管理的问题。
可访问性不是加几个 ARIA 属性就万事大吉的事。最常被绕过的其实是「视觉焦点路径是否连续」「缩放 200% 后布局是否崩坏」「语音指令能否准确触发按钮」——这些都得真机+真人测试，工具扫不出逻辑断点。
