什么是网站无障碍设计标准
网站无障碍设计
网站无障碍设计（Web Accessibility，通常简称 a11y）是为了让残障人士（视障、听障、行动不便、认知障碍等）也能平等、无障碍地访问和使用网站。它不仅是道德责任，在很多国家已经是法律要求（如中国的《无障碍环境建设条例》、美国的 ADA 和 Section 508、欧洲的 EN 301 549 等）。
一、必须遵循的国际标准
最核心的标准是 WCAG 2.1（可推荐使用 WCAG 2.2，已于2023年发布），分为三个等级：
A（最低，必做）
AA（大多数国家法律要求达到这个级别，中国目前也推荐 AA）
AAA（最高级别，部分场景需要）
中国自己的标准：
《信息技术 互联网内容无障碍可访问性技术要求与测试方法》（GB/T 37668 - 2019）
《信息无障碍 身体功能差异人群 网站设计无障碍技术要求》（GB/T 37669 - 2019）
《信息无障碍 身体功能差异人群 网站设计无障碍评级测试方法》（GB/T 37781 - 2019）
这些国标基本等同采用 WCAG 2.1 AA 级别。
二、实际开发中最重要、最常见的无障碍要求（必做清单）
1. 感知性（Perceivable）
所有图片、图标必须有有意义的替代文本（alt）
装饰性图片：alt=""
有意义的图片：描述内容，例如 alt="2025年春节放假通知海报"
视频要有字幕（闭路字幕），最好有音轨描述（Audio Description）
色盲友好：不要仅用颜色传递信息（如“红色表示错误”要同时加文字或图标）
对比度至少 4.5:1（AA），大文字 3:1
工具：https://webaim.org/resources/contrastchecker/
2. 可操作性（Operable）
全部功能都可以用键盘操作（Tab、Enter、Space、箭头键）
不能有“键盘陷阱”（卡住出不来）
下拉菜单、模态框、轮播图必须能用键盘操作和关闭（Esc 键）
焦点可见：:focus 状态要有明显可见的轮廓
不要使用自动轮播或给足够时间/暂停按钮
页面要有跳过导航链接（Skip to main content）
页面标题（）要有意义且唯一
链接文字要有意义（避免“点击这里”，改成“查看2025年招生简章”）
3. 可理解性（Understandable）
语言声明：
表单要有明确标签（）
错误提示要明确告诉用户哪里错了、怎么改
一致的导航和操作习惯
4. 健壮性（Robust）
代码语义化，使用正确的 HTML 标签
, , , , ,
按钮用 ，不要用
模拟
正确使用标题层级（h1→h2→h3，不要跳级）
通过 W3C 验证器检查
支持屏幕阅读器（NVDA、VoiceOver、旁白）
三、中国网站常见但不符合无障碍的错误（一定要避免）
验证码全是图片且无文字备选
轮播图自动播放且无法暂停
纯色块表示状态（如绿色=通过，红色=不通过）没有文字
重要图片 alt 为空或写“图片”
只有微信/支付宝登录，没有其他方式
弹窗无法用 Esc 关闭
键盘焦点顺序乱七八糟
四、快速自测工具
浏览器插件：
axe DevTools（最推荐）
WAVE
Accessibility Insights for Web
屏幕阅读器测试：
Windows + NVDA（免费）
Mac + VoiceOver（⌘ + F5）
手机：Android TalkBack / iOS 旁白
键盘测试：拔掉鼠标，只用 Tab、Enter、箭头键走一遍
五、一句话总结优先级
如果时间紧，先把这 6 件事做了，基本能过大多数检测：
所有图片加 alt
对比度达标
键盘能完整操作（包括关闭弹窗）
语义化 HTML（标题、按钮、导航）
表单有 label 和错误提示
视频加字幕
做到 WCAG 2.1 AA 级别，在中国基本不会被残联或网信办约谈，也能通过大多数政府采购和招投标的无障碍要求。
需要我给你一份完整的《网站无障碍检查清单（中英文对照 + 代码示例）》吗？可以直接发给开发团队。
下面是一份最实用、最常考、开发必须直接抄走用的无障碍代码示例合集（全部符合 WCAG 2.1 AA + 中国 GB/T 37668 - 2019），直接复制到项目里就能大幅提升无障碍得分。
正确的图片 alt（最常见扣分项）
<!-- 有意义图片 --> <img src="dog.jpg" alt="一只穿红衣服的柯基在草地上玩飞盘"> <!-- 带说明的图标 --> <img src="success.svg" alt="提交成功"> <span class="sr-only">提交成功</span> <!-- 装饰性图片（必须清空） --> <img src="decorative-line.png" alt="" role="presentation"> <!-- 复杂图片（如信息图表） --> <img src="2025-sales-chart.png" alt="2025年各季度销售额对比图，一季度150万，二季度180万，三季度220万，四季度280万">
2. 语义化 HTML 结构（屏幕阅读器最爱）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2025年招生简章 - 北京某某大学</title> </head> <body> <!-- 跳过导航（必须放在最前面） --> <a href="#main">跳到主要内容</a> <header> <nav aria-label="主导航"> <ul> <li><a href="/">首页</a></li> <li><a href="/admission" aria-current="page">招生信息</a></li> </ul> </nav> </header> <main id="main"> <h1>2025年本科招生简章</h1> <!-- 内容 --> </main> <footer> <p>© 2025 北京某某大学</p> </footer> </body> </html>
3. 可键盘操作的轮播图（自动轮播必须能暂停）
<div class="carousel" role="region" aria-label="校园风光轮播图"> <button aria-label="暂停轮播" id="pauseBtn">暂停</button> <div class="slides"> <figure> <img src="1.jpg" alt="图书馆外观"> <figcaption>现代化的大学图书馆</figcaption> </figure> <!-- 更多 --> </div> <button aria-label="上一张">‹</button> <button aria-label="下一张">›</button> <!-- 指示点必须可键盘操作 --> <div class="dots"> <button aria-label="第1张图片" aria-selected="true">1</button> <button aria-label="第2张图片">2</button> </div> </div>
4. 完全无障碍的模态框（Esc 关闭 + 焦点管理）
<!-- 触发按钮 --> <button aria-haspopup="dialog" aria-controls="modal1">打开登录窗口</button> <!-- 模态框 --> <div id="modal1" role="dialog" aria-labelledby="modal-title" aria-modal="true" hidden> <div class="modal-content"> <h2 id="modal-title">用户登录</h2> <button aria-label="关闭窗口" class="close">×</button> <form> <label for="user">用户名</label> <input id="user" type="text" required> <label for="pass">密码</label> <input id="pass" type="password" required> <button type="submit">登录</button> </form> </div> </div> <!-- 遮罩层（可点击关闭） --> <div class="overlay" hidden></div>
// 简单的焦点管理（必须加！）
document.getElementById('openModal').addEventListener('click', () => {
document.getElementById('modal1').removeAttribute('hidden');
document.querySelector('.overlay').removeAttribute('hidden');
document.querySelector('#user').focus(); // 自动聚焦第一个输入框
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && !document.getElementById('modal1').hasAttribute('hidden')) {
closeModal();
}
});
5. 表单 + 错误提示（中国网站最常挂）
<form novalidate> <div class="field"> <label for="phone">手机号码 <span aria-label="必填">*</span></label> <input type="tel" id="phone" required aria-describedby="phone-error"> <p id="phone-error" class="error" role="alert" hidden>请输入11位中国大陆手机号码</p> </div> <div class="field"> <label> <input type="checkbox" id="agree" required> 我已阅读并同意<span class="sr-only">《用户协议》</span> </label> <a href="/agreement" target="_blank">《用户协议》</a> </div> <!-- 验证码（必须提供语音或文字备选） --> <label for="captcha">验证码</label> <img src="captcha.jpg" alt="验证码图片，显示文字 AB12"> <button type="button">看不清？换一张</button> <button type="button" aria-label="语音播报验证码">🔊 听验证码</button> <input id="captcha" required> </form>
6. 对比度达标 + 焦点样式（CSS 必加）
/* 跳过链接样式 */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 6px;
}
/* 焦点样式（不能去掉 outline，除非自己写更好的） */
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
/* 屏幕阅读器专用文字（视觉隐藏但可读） */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}7. 视频带字幕 + 音频描述按钮
<video controls poster="thumb.jpg"> <source src="welcome.mp4" type="video/mp4"> <track kind="captions" src="welcome.zh.vtt" srclang="zh" label="简体中文字幕" default> <track kind="descriptions" src="welcome-description.vtt" srclang="zh" label="音频描述"> </video>
把上面这些代码直接扔给前端开发，基本可以一次通过：
国家信息无障碍公共服务平台检测
工信部网站无障碍评测
残联、网信办、招投标的无障碍审查
