elite-accessibility

精英级无障碍设计

让每个人都能使用充满动效的网站。

快速参考

主题	参考文件
减少动态效果	reduced-motion.md
WCAG 对比度	wcag-contrast.md
焦点与键盘	focus-keyboard.md
包容性美学	inclusive-aesthetics.md
触控交互	touch-interaction.md

---

为什么这很重要

动态效果可能造成实际伤害：

• 前庭障碍会影响约 35% 的 40 岁以上成年人
• 动态效果敏感可能引发恶心、头晕和偏头痛
• 认知超载——动画可能分散患有 ADHD 或焦虑症用户的注意力
• 癫痫风险——闪烁内容可能诱发光敏性癫痫

无障碍设计不是可选项，而是设计要求。

---

黄金法则

每个动画都必须提供 prefers-reduced-motion 替代方案。

这是精英级 Web 设计中不可妥协的要求。

---

快速实现

CSS 方案

/* Global reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

GSAP 方案

// ALWAYS use gsap.matchMedia() for motion preferences
const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  // Full animations for users who want them
  gsap.from(".hero-content", {
    opacity: 0,
    y: 50,
    duration: 1,
    stagger: 0.2,
  });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  // Instant state for users who prefer reduced motion
  gsap.set(".hero-content", { opacity: 1, y: 0 });
});

CSS 滚动驱动动画

/* Only enable scroll animations if motion is OK */
@media (prefers-reduced-motion: no-preference) {
  .scroll-animated {
    animation: reveal linear;
    animation-timeline: scroll();
  }
}

/* Fallback: just show the content */
@media (prefers-reduced-motion: reduce) {
  .scroll-animated {
    opacity: 1;
    transform: none;
  }
}

---

提供什么替代方案

不要只是禁用动画，而要提供替代方案：

完整动画	减少动态效果的替代方案
从侧面滑入	立即显示或仅淡入
视差滚动	静态定位
滚动触发的显示效果	默认显示内容
弹跳/脉动	静态效果或细微的透明度变化
页面过渡	立即导航
自动播放的轮播	静态幻灯片、手动控制

示例：显示动画

const mm = gsap.matchMedia();

// Full experience
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".card", {
    opacity: 0,
    y: 30,
    duration: 0.6,
    stagger: 0.1,
    scrollTrigger: {
      trigger: ".cards-section",
      start: "top 80%",
    },
  });
});

// Reduced motion: simple fade, no movement
mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.from(".card", {
    opacity: 0,
    duration: 0.3, // Shorter
    stagger: 0.05, // Faster stagger
    scrollTrigger: {
      trigger: ".cards-section",
      start: "top 80%",
    },
  });
});

---

动画指南

安全的动画（通常没问题）

• 透明度变化（淡入/淡出）
• 小幅缩放（0.95 → 1）
• 颜色过渡
• 较短的持续时间（< 300ms）

有问题的动画（需要替代方案）

• 大幅移动（滑动、飞入）
• 视差效果
• 缩放（放大/缩小）
• 旋转
• 弹跳/脉动
• 无限循环

危险效果（避免或严格限制）

• 闪烁/频闪（可能导致癫痫发作）
• 快速移动
• 带有动态效果的自动播放视频
• 旋转元素

---

测试减少动态效果设置

macOS

系统设置 → 辅助功能 → 显示 → 减弱动态效果

Windows

设置 → 轻松使用 → 显示 → 在 Windows 中显示动画（关闭）

iOS

设置 → 辅助功能 → 动态效果 → 减弱动态效果

Chrome DevTools

1. 打开 DevTools（F12）
2. Cmd/Ctrl + Shift + P → “Render”
3. 找到“Emulate CSS media feature prefers-reduced-motion”

---

对比度快速参考

WCAG 要求

内容	AA（最低）	AAA（增强）
普通文本	4.5:1	7:1
大号文本（18px+）	3:1	4.5:1
UI 组件	3:1	3:1
焦点指示器	3:1	3:1

快速测试

使用浏览器扩展：

• axe DevTools
• WAVE
• Stark

详细指南请参阅 wcag-contrast.md。

---

焦点状态

每个交互元素都需要清晰可见的焦点：

/* Base focus style */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default, add custom */
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

键盘导航模式请参阅 focus-keyboard.md。

---

屏幕阅读器注意事项

隐藏装饰性动画

<div class="animated-background" aria-hidden="true"></div>


<div class="animated-card" role="article">
  
</div>

播报动态内容

<div aria-live="polite" aria-atomic="true">
  <p>Loading complete. Showing 12 results.</p>
</div>

---

实现检查清单

每个动画都必须：

• 检查 prefers-reduced-motion
• 提供减少动画或无动画的替代方案
• 每秒闪烁不超过 3 次
• 不得在没有用户控制的情况下无限自动播放
• 不得造成影响阅读的布局偏移

每个页面都必须：

• 达到 WCAG AA 对比度要求（文本为 4.5:1）
• 显示可见的焦点状态
• 支持键盘导航
• 在没有 JavaScript 动画的情况下正常运行
• 为键盘用户提供跳过链接

---

资源

• MDN：prefers-reduced-motion
• WCAG 2.1 指南
• A11y Project
• 包容性设计原则