这里是「跳到主内容」的目标
真实页面里这个 id 应该给 <main> 元素，跳过的是导航区块。
按 Tab 开始遍历：第一个焦点会露出「跳到主内容」的隐藏链接——这是键盘用户的刚需，不是装饰。
| 原生控件 | button、a[href]、input、select、textarea 天然可 Tab、可回车/空格触发，读屏也认。 |
div 冒充按钮 | 要自己补 tabindex="0" + role="button" + keydown 处理 Enter 和空格 —— 三个都漏就废。能用 button 就用 button。 |
tabindex | 0 = 按 DOM 顺序入列；-1 = 不能 Tab 到但能被脚本聚焦；正数会打乱全局顺序，别用。 |
下面这三行的差别就是审计里最常见的失败项：不要为了「好看」写 *:focus { outline: none }。键盘用户点完按钮后看不到自己在哪，等于页面不可用。要美化就用 :focus-visible（只在键盘聚焦时显示），或至少换成自定义 outline 而不是取消。
/* 错误：抹掉全部焦点 */
button:focus { outline: none; }
/* 正确：保留焦点但改外观 */
:focus-visible { outline: 3px solid #0969da; outline-offset: 2px; }
第一条铁律（「ARIA 第一定律」）：能用原生语义标签就不要用 aria。<button> 天然就是按钮，写 role="button" 是多余且更易出错。
前两个读屏播报「关闭 按钮」「搜索 按钮」；第三个只播报「按钮」或一段乱码，是典型的无名控件。
原生 <details>/<summary> 自带这套状态播报；自绘折叠组件必须自己维护 aria-expanded，并在展开时把焦点留在按钮上。
<label for="mail">邮箱</label> <input id="mail" name="email" type="email" aria-describedby="mail-err" aria-invalid="true"> <p id="mail-err" style="color:#cf222e">请填写有效的邮箱地址</p>
只靠红色描边表示出错，色盲用户和低亮度屏幕下就看不出来。aria-invalid + 文本错误信息 + aria-describedby 三者配套。
正文文字与背景的对比度至少要 4.5:1（大号字 3:1）：
白字/深底 15.1:1 合格 白字/中灰底 5.9:1 合格 浅字/浅底 1.2:1 不合格
图片上的文字要加半透明遮罩或换到纯色区域；把「提示文字」统一设成 #aaa 是很多站点批量失分的原因。
<html lang="zh-CN">（第二章）决定读屏用什么发音引擎。prefers-reduced-motion，为前庭功能敏感的用户关掉大幅位移动画。<meta http-equiv="refresh"> 是可访问性事故源，别用。scope、第六章的 alt 都属于这一章的范围。真实页面里这个 id 应该给 <main> 元素，跳过的是导航区块。