A11y 动画降级与 View Transitions 降级路径

A11y 动画降级与 View Transitions 降级路径概述动画与过渡提升体验，但在部分用户与设备条件下需降低或禁用。本文给出 `prefers-reduced-motion` 与 View Transitions 协作的降级路径与验证方法。关键参数/概念媒体查询：`@media (prefers-reduced-motion: reduce)` 用于在 CSS 层禁用/弱化动画。JS 检测：`matchMedia('(prefers-reduced-motion: reduce)').matches` 判断用户偏好。过渡控制：依据偏好选择是否调用 `document.startViewTransition`。实践/示例1) CSS 层降级/* 默认动画 */ .fade-in { animation: fade .2s ease both } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } /* 降级：禁用动画 */ @media (prefers-reduced-motion: reduce) { .fade-in { animation: none } ::view-transition-old(*), ::view-transition-new(*) { animation: none } } 2) JS 层降级与过渡封装export function withTransition(run) { const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || !document.startViewTransition) { run(); return; } document.startViewTransition(() => run()); } // 使用示例 document.querySelector('#nav').addEventListener('click', (e) => { e.preventDefault(); withTransition(async () => { const res = await fetch(e.target.href); const html = await res.text(); document.open(); document.write(html); document.close(); }); }); 3) Firefox 兼容提示（滚动驱动动画）/* 在滚动驱动动画场景，Firefox 需非零 duration 才应用动画 */ .reveal { animation-name: appear; animation-duration: 1ms; animation-fill-mode: both; } @keyframes appear { from { opacity: 0 } to { opacity: 1 } } /* 若结合 ViewTimeline/ScrollTimeline，请在声明 animation-timeline 之后设置以上属性 */ 验证方法偏好验证：系统开启“减少动态效果”，检查 CSS/JS 降级生效。指标对比：采集 `INP/LCP`，比较默认动画与降级下的交互与首屏稳定性。可访问性：读屏/键盘导航路径不依赖动画，信息不可丢失。注意事项避免使用 `* { animation: none !important; }` 的“一刀切”，仅禁用非必要动画。过渡不可替代语义结构与可达性；确保焦点可见与状态同步。在滚动驱动动画场景，遵循 Firefox 的非零 `animation-duration` 需要。参考资料MDN: `prefers-reduced-motion` 媒体查询（2025 更新）https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motionMDN: 使用媒体查询做可访问性（2025）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibilityMDN: Scroll-driven animations 与 `animation-timeline`（2025）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timelinehttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations