CSS 可访问性实践：ARIA 与视觉适配指南

一、ARIA 与 CSS 的协同

1.1 ARIA 基础概念

ARIA (Accessible Rich Internet Applications) 是一组属性，用于增强网页的可访问性，特别是对于动态内容和复杂交互。CSS 可以与 ARIA 属性协同工作，提供更好的用户体验。

<button aria-expanded="false">菜单</button>

button[aria-expanded="true"]::after {
  content: "（已展开）";
}

实践建议：

• 使用 [aria-*] 属性选择器为不同状态设计视觉反馈
• 避免仅依赖颜色传达状态，应结合图标或文本
• ARIA 不会自动添加交互行为，仍需 JavaScript 实现功能

1.2 常见 ARIA 属性与样式对应

二、高对比度模式适配

2.1 检测高对比度模式

Windows 高对比度模式下，浏览器会强制使用用户定义的颜色方案。可通过媒体查询检测：

@media screen and (-ms-high-contrast: active) {
  /* 高对比度模式下的样式 */
  button {
    border: 2px solid windowText;
  }
}

2.2 高对比度适配策略

1. 避免依赖背景图像：

   .icon {
     background-image: url("info.png");
     /* 添加备用方案 */
     padding-left: 1.5em;
     position: relative;
   }
   
   .icon::before {
     content: "i";
     position: absolute;
     left: 0;
   }

2. 确保焦点可见性：

   a:focus, button:focus {
     outline: 2px solid transparent;
     box-shadow: 0 0 0 4px Highlight;
   }

3. 系统颜色使用：

   @media screen and (-ms-high-contrast: active) {
     body {
       background-color: window;
       color: windowText;
     }
   }

实践建议：

• 使用 forced-colors 媒体查询（现代浏览器支持）
• 测试时使用 Windows 高对比度主题（黑白/彩色模式）
• 确保所有交互元素在移除颜色后仍可识别

三、屏幕阅读器友好内容处理

3.1 视觉隐藏但可访问的技术

/* 方法1：经典屏幕阅读器专用类 */
.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;
}

/* 方法2：现代简化版（注意浏览器兼容性） */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

3.2 动态内容更新通知

[aria-live="polite"] {
  position: absolute;
  left: -10000px;
}

/* 通过 JavaScript 更新内容 */
<div aria-live="polite" id="live-region"></div>

3.3 隐藏内容的语义化方法

<!-- 使用 aria-hidden 隐藏装饰性内容 -->
<div aria-hidden="true">
  <svg>...</svg>
</div>

<!-- 使用 CSS 隐藏但保留可访问性 -->
<div class="visually-hidden">
  重要说明：此按钮将提交表单
</div>

实践建议：

• 避免使用 display: none 或 visibility: hidden 隐藏需要朗读的内容
• 图标按钮必须包含可访问文本（可用视觉隐藏技术）
• 测试时使用 NVDA 或 VoiceOver 等屏幕阅读器验证

四、综合示例：可访问导航菜单

<nav aria-label="主导航">
  <button 
    aria-expanded="false"
    aria-controls="main-menu"
    id="menu-toggle"
  >
    <span class="visually-hidden">菜单</span>
    <svg aria-hidden="true">...</svg>
  </button>
  
  <ul id="main-menu" hidden>
    <li><a href="/" aria-current="page">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

/* 基础样式 */
nav {
  position: relative;
}

/* 高对比度适配 */
@media screen and (-ms-high-contrast: active) {
  #menu-toggle {
    border: 2px solid windowText;
  }
}

/* 视觉隐藏类 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

/* 菜单状态指示 */
button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 焦点样式 */
button:focus, a:focus {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}

五、测试与验证工具

1. 自动化工具：

   • axe DevTools 浏览器扩展
   • Lighthouse 无障碍审计

2. 手动测试：

   • 仅使用键盘导航（Tab/Shift+Tab）
   • Windows 高对比度模式测试
   • 屏幕阅读器实际测试（NVDA + Firefox 组合推荐）

3. 颜色对比检查：

   /* 使用工具验证以下组合 */
   .text {
     color: #333;
     background-color: #fff;
     /* 对比度 13.5:1 */
   }

最佳实践清单：

• 所有交互元素必须有可见焦点状态
• 颜色对比度至少达到 WCAG AA 标准（4.5:1）
• 表单字段必须有关联标签（可视或 ARIA）
• 图片必须包含替代文本或标记为装饰性
• 动态内容更新应通知屏幕阅读器

通过结合 ARIA 属性和 CSS 技术，可以创建既美观又具备良好可访问性的 Web 界面，服务于更广泛的用户群体。