无障碍CSS设计的基础规范与核心技巧
咱们先从最基础的说起，无障碍CSS设计不是凭空来的，有个国际通用的标准叫WCAG（Web内容无障碍指南），最新的2.1版本里明确了很多细节，你要是想深入研究，可以看看W3C的官方文档{:target=”_blank” rel=”nofollow”}，不过不用怕，我会把核心的CSS相关点拆解开，用大白话讲给你听。
颜色对比度：不只是“看得清”那么简单
你知道吗？全球有超过2.85亿视力障碍者，其中很多人都需要通过屏幕阅读器或高对比度模式浏览网页。这时候颜色对比度就成了第一道关。WCAG规定，普通文本的颜色对比度至少要达到4.5:1，大文本（比如标题，字号18pt以上或粗体14pt以上）可以放宽到3:1。别觉得这个数字抽象，我给你举个真实例子：去年帮一个电商客户改页面，他们的“立即购买”按钮用了浅灰色文字配白色背景，我用WebAIM的对比度检查器一测，比值才2.3:1，难怪有用户说“找半天找不到按钮”。后来把文字改成深灰色，比值提到5.1:1，投诉直接少了80%。
那具体怎么用CSS实现呢？其实不难，你可以用CSS变量先定义一套符合标准的颜色系统，比如：
:root {
primary-text: #2d2d2d; / 深灰，对比度高 /
secondary-text: #595959; / 中灰，用于次要内容 /
background: #ffffff; / 白色背景 /
}
然后在开发工具里装个对比度检查插件（比如Chrome的Color Contrast Analyzer），写样式时随手测一测。另外要注意，别只用颜色传递信息，比如“红色表示错误，绿色表示成功”，视力障碍用户可能看不出来，最好同时加图标或文字提示，比如错误提示除了红色，再加上“⚠️ 请检查输入内容”。
键盘导航：让“不用鼠标党”也能顺畅操作
你平时用网页会只用键盘吗？可能很少，但确实有很多用户因为行动不便，只能靠Tab键、Enter键和空格键操作。这时候CSS对键盘焦点的处理就特别重要。最常见的坑是为了“好看”把outline: none写进全局样式，结果键盘用户点半天不知道自己聚焦到哪了。我之前就犯过这错，当时觉得按钮的默认蓝色边框太丑，直接全局重置 { outline: none; }，后来测试时发现，用Tab键根本找不到导航菜单的焦点，差点被测试同事“打”。
正确的做法是：保留焦点样式，但可以自定义美化。比如给按钮加个柔和的阴影代替默认边框：
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); / 浅蓝色半透明阴影 /
}
Tab键的聚焦顺序也要符合逻辑，应该和视觉顺序一致。如果你的页面用了position: absolute打乱了DOM顺序，记得用tabindex属性调整，但别乱用tabindex="0"（让非交互元素可聚焦），除非真的需要。还有，那些用
tabindex="0"和键盘事件监听（比如keydown时判断Enter或空格触发点击），不然键盘用户根本点不了。
屏幕阅读器兼容：CSS如何“说话”给用户听
屏幕阅读器（比如NVDA、VoiceOver）是视障用户的“眼睛”，它会读取页面内容，但很多CSS样式会影响它的解读。比如你以为藏起来的内容，可能屏幕阅读器还在念；你想强调的内容，它可能直接跳过。最典型的就是隐藏元素的处理，我见过有人用display: none隐藏加载动画，结果屏幕阅读器一直卡在“加载中”——因为display: none的内容会被屏幕阅读器完全忽略，包括动态显示的情况。
那不同隐藏方式怎么选？给你整理了个表格，一目了然：
| CSS属性 | 视觉效果 | 屏幕阅读器 | 适用场景 |
|---|---|---|---|
| display: none | 完全隐藏，不占空间 | 不读取 | 永久隐藏的内容 |
| visibility: hidden | 隐藏，但占空间 | 不读取 | 临时隐藏但保留布局 |
| clip: rect(0 0 0 0) | 视觉隐藏，占空间 | 读取 | 仅给屏幕阅读器的提示 |
比如表单里的“密码至少8位”提示，视觉上可以隐藏，只在屏幕阅读器里念出来，就用clip加绝对定位：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
屏幕阅读器很依赖语义化标签，比如
、、，别用
