CSS 可访问性实践：ARIA 与高对比度适配

1. ARIA 与 CSS 的协同

ARIA (Accessible Rich Internet Applications) 是一组属性，用于增强网页的可访问性，而 CSS 可以与 ARIA 属性协同工作，为不同辅助技术用户提供更好的体验。

ARIA 角色与样式绑定

[role="alert"] {
  background-color: #ffeb3b;
  padding: 1rem;
  border-left: 4px solid #ffc107;
}

[aria-hidden="true"] {
  display: none;
}

实践建议：

• 使用 [aria-*] 属性选择器为不同 ARIA 状态设计样式
• 避免仅依赖颜色传达 ARIA 状态信息，应结合图标或文本变化

视觉反馈与 ARIA 状态同步

[aria-expanded="true"]::after {
  content: "▼";
}

[aria-expanded="false"]::after {
  content: "►";
}

[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

2. 高对比度模式适配

系统高对比度检测

@media (forced-colors: active) {
  button {
    border: 2px solid ButtonText !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
  }
  
  img {
    forced-color-adjust: none; /* 保留原始颜色 */
  }
}

关键属性：

• forced-colors: 检测系统是否启用高对比度
• forced-color-adjust: 控制元素是否遵循系统配色

高对比度安全配色方案

实践建议：

• 使用至少 4.5:1 的对比度比率（WCAG AA 标准）
• 避免纯黑(#000)与纯白(#fff)的直接组合，可改用深灰(#333)与浅灰(#eee)

3. 屏幕阅读器友好内容处理

视觉隐藏但可读的技术

.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;
}

.visible-on-focus {
  position: absolute;
  left: -9999px;
}
.visible-on-focus:focus {
  left: auto;
}

技术对比：

动态内容更新通知

[aria-live="polite"] {
  position: relative;
}

[aria-live="assertive"] {
  position: relative;
  color: #d32f2f;
  font-weight: bold;
}

实践建议：

• 对实时更新的内容（如通知、表单验证）添加 aria-live 属性
• "polite" 用于非紧急更新，"assertive" 用于重要即时通知

4. 综合实践案例

可访问的下拉菜单

<div class="dropdown">
  <button aria-expanded="false" aria-controls="menu">菜单</button>
  <ul id="menu" role="menu" aria-hidden="true">
    <li role="menuitem"><a href="#">选项1</a></li>
    <li role="menuitem"><a href="#">选项2</a></li>
  </ul>
</div>

.dropdown ul {
  display: none;
}

.dropdown button[aria-expanded="true"] + ul {
  display: block;
}

@media (forced-colors: active) {
  .dropdown button {
    border: 2px solid ButtonText;
  }
  
  .dropdown ul {
    border: 1px solid ButtonText;
  }
}

键盘导航支持：

• Tab/Shift+Tab: 在菜单项间导航
• Enter/Space: 激活菜单项
• Esc: 关闭菜单

最佳实践总结

1. 渐进增强原则：先确保基本功能可访问，再添加视觉增强
2. 多重提示：重要状态变化应同时通过颜色、图标、文本和ARIA属性传达

3. 测试验证：

   • 使用屏幕阅读器（NVDA、VoiceOver）测试
   • 启用系统高对比度模式检查布局
   • 仅用键盘操作验证所有功能
4. 性能考量：复杂的ARIA交互应避免频繁的DOM操作，防止屏幕阅读器性能下降

通过结合CSS与ARIA，开发者可以创建既美观又对所有用户友好的界面，满足WCAG 2.1 AA级可访问性标准。