ARIA 접근성 가이드

WCAG 2.2 · 2. 운용의 용이성 · 2.3 발작과 신체 반응

2.3.3 상호작용 애니메이션

Animation from Interactions

사용자 동작으로 시작되는 움직임 애니메이션은 끌 수 있어야 합니다(기능에 필수인 경우 제외).

수준 AAAWCAG 2.1

한눈에 보기

성공 기준
2.3.3 상호작용 애니메이션
수준
수준 AAA
원칙
2. 운용의 용이성
지침
2.3 발작과 신체 반응
도입
WCAG 2.1

요구 사항

스크롤, 클릭 같은 상호작용으로 촉발되는 움직임 애니메이션(시차 스크롤, 확대·회전 전환 효과 등)을 비활성화할 수 있어야 합니다. 예외: 애니메이션이 기능이나 전달하는 정보에 필수인 경우. 색 변화·투명도 변화처럼 움직임이 아닌 효과는 대상이 아닙니다.

왜 필요한가요

전정 장애가 있는 사용자는 화면 속 큰 움직임만으로 어지럼증, 메스꺼움, 두통을 겪을 수 있습니다.

도움받는 사용자

  • 전정 장애(어지럼증)가 있는 사용자
  • 인지·학습 장애가 있는 사용자
  • 주의력 결핍이 있는 사용자

적용 방법

CSS
@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;
  }
}

운영체제의 “동작 줄이기” 설정을 존중하는 prefers-reduced-motion 미디어 쿼리는 이 기준의 충분한 기법입니다. 사이트 안에 애니메이션 끄기 설정을 두는 방법도 있습니다.

자주 하는 실수

  • 시차 스크롤 효과를 끌 방법이 없습니다.
  • prefers-reduced-motion 설정을 무시합니다.

검사 방법

  • 운영체제에서 동작 줄이기를 켜고, 상호작용 시 움직임 애니메이션이 사라지거나 줄어드는지 확인합니다.

참고 자료