网站
引入
CSS 不只是让页面好看，也会影响页面是否好用。
可访问性关注的是让更多用户都能顺利阅读和操作页面，包括视力较弱、使用键盘操作、使用辅助工具的用户。
正文
定义
定义
CSS 可访问性是指通过合适的样式，让页面内容更清楚、操作状态更明显、阅读和交互更容易。
简单理解：页面不能只追求好看，还要让用户看得清、点得到、知道自己正在操作哪里。
颜色对比
文字和背景要有足够对比度。
.text {
color: #111827;
background-color: #ffffff;
}浅灰文字放在白色背景上，经常会看不清。
.weak-text {
color: #d1d5db;
background-color: #ffffff;
}正文内容不要使用太浅的颜色。
焦点样式 :focus
键盘操作页面时，需要能看到当前焦点在哪里。
.btn:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}outline 可以让按钮获得焦点时出现外框。
不要随便去掉焦点样式。
.btn:focus {
outline: none;
}如果去掉默认 outline，应该提供新的焦点样式。
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}鼠标悬停和键盘焦点都要考虑
有些用户不用鼠标，而是用键盘操作。
.link:hover,
.link:focus {
color: #2563eb;
text-decoration: underline;
}只写 :hover 时，键盘用户可能看不到状态变化。
链接样式
链接最好能让用户一眼看出来。
a {
color: #2563eb;
text-decoration: underline;
}如果去掉下划线，要确保颜色和其他文字有明显区别。
a {
color: #2563eb;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}字号和行高
字号太小、行高太紧，会影响阅读。
body {
font-size: 16px;
line-height: 1.6;
}正文一般不要小于 14px，长文本更建议使用合适的行高。
点击区域
按钮和链接的可点击区域不要太小。
.btn {
padding: 10px 16px;
}如果元素太小，移动端用户会很难点中。
不只依赖颜色表达状态
错误、成功、警告状态不要只靠颜色区分。
<p class="error">错误：请输入邮箱</p>.error {
color: #dc2626;
font-weight: 700;
}这里除了红色，还用了文字说明和加粗。
动画和动态效果
动画不要太快、太闪，也不要一直干扰用户。
.card {
transition: transform 0.2s ease;
}简单、短时间的动效通常更友好。
过强的闪烁动画可能让用户不舒服。
例子
可访问按钮
<button class="btn">提交</button>.btn {
padding: 10px 16px;
border: none;
border-radius: 8px;
background-color: #2563eb;
color: white;
font-size: 16px;
}
.btn:hover,
.btn:focus {
background-color: #1d4ed8;
}
.btn:focus {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}这个按钮有足够的点击区域，也有清楚的焦点样式。
表单错误提示
<label for="email">邮箱</label>
<input id="email" class="input" type="email">
<p class="error">错误：请输入正确的邮箱</p>.input {
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.input:focus {
border-color: #2563eb;
outline: 2px solid #bfdbfe;
}
.error {
color: #dc2626;
font-weight: 700;
}错误提示不仅使用红色，还直接写出错误原因。
特点
- 文字和背景要有足够对比度
- 不要随便去掉
outline - 如果去掉默认焦点样式，要补充新的
:focus样式 - 交互状态不要只写
:hover，也要考虑:focus - 链接、按钮、输入框要有明显状态
- 字号、行高和点击区域会影响实际可用性
- 不要只依赖颜色表达重要信息
理解
CSS 可访问性可以理解为：让页面不只是“看起来好”，还要“真的好用”。
很多细节看起来不起眼，比如焦点样式、文字对比、点击区域，但这些会直接影响用户能不能顺利操作页面。
做样式时要多想一步：如果不用鼠标、屏幕小、视力不好，这个页面还能不能正常使用。