본문 바로가기
A11YKR Docs

2.3.3 상호작용에 의한 애니메이션

(Level AAA)

요약

Section titled “요약”
목표
사용자가 움직임으로 인해 피해를 입거나 주의가 분산되지 않는다.
할 일
움직임에 대한 사용자 선호 설정을 지원하고, 불필요한 움직임 효과를 제거한다.
중요성
사람들은 움직임 효과로 인해 멀미 증상을 겪을 수 있다.

성공 기준(SC)

상호작용으로 실행되는 움직임 애니메이션은 비활성화할 수 있다. 단, 해당 애니메이션이 기능이나 전달하려는 정보에 필수적인 경우는 예외다.

의도

Section titled “의도”

이 성공 기준의 목적는 사용자가 웹 페이지에 애니메이션이 표시되지 않도록 설정할 수 있게 하는 것이다. 일부 사용자는 애니메이션 콘텐츠로 인해 주의가 분산되거나 메스꺼움을 겪는다. 예를 들어 페이지를 스크롤할 때 (스크롤에 수반되는 필수적인 움직임을 제외하고) 요소가 움직이면 전정 기관 장애 증상이 유발될 수 있다. 전정 기관(내이) 장애로 인한 반응에는 어지럼증, 메스꺼움, 두통이 있다. 필수적이지 않은 경우가 많은 또 다른 애니메이션으로는 시차 스크롤링이 있다. 시차 스크롤링은 배경이 전경과 다른 속도로 움직이는 효과를 말한다. 웹 페이지의 기능이나 정보에 필수적인 애니메이션은 이 성공 기준에서 허용된다.

‘상호작용에 의한 애니메이션’은 사용자의 상호작용이 필수적이지 않은 애니메이션을 시작하게 하는 경우에 적용된다. 2.2.2 일시 정지, 중지, 숨김은 사용자가 의도적으로 활성화한 것에 대한 반응이 아니라, 웹 페이지가 애니메이션을 “자동으로” 시작하는 경우에 적용된다. 특정 애니메이션이 두 성공 기준을 모두 충족하지 못하는 상황도 있을 수 있다.

참고

전정 기관 장애가 있는 사람들에게 애니메이션이 미치는 영향은 매우 심각할 수 있다. 유발되는 반응에는 메스꺼움, 편두통, 그리고 회복을 위해 침대에서 휴식을 취해야 하는 상황까지 포함될 수 있다.

웹사이트는 전정 기관 장애가 유발될 가능성을 어떻게 줄일 수 있는가?

다음 해결 방법 중 하나를 선택한다.

  • 불필요한 애니메이션을 사용하지 않는다.
  • 상호작용으로 실행되는 필수적이지 않은 애니메이션을 사용자가 끌 수 있는 컨트롤을 제공한다.
  • 사용자 에이전트나 운영 체제에서 제공하는 움직임 줄이기 기능을 활용한다.

사용자가 페이지를 스크롤할 때 발생하는 움직임은 어떻게 다루어야 하는가?

새로운 콘텐츠를 뷰포트로 이동시키는 것은 스크롤에 필수적이다. 필수적인 스크롤 움직임은 사용자가 제어하므로 허용된다. 스크롤 상호작용에는 필수적이지 않은 애니메이션을 책임감 있는 방식으로만 추가한다. 불필요한 움직임을 끌 수 있는 기능은 항상 사용자에게 제공한다.

이점

Section titled “이점”
  • 전정 기관 장애
    • 전정 기관 장애가 있는 사람들은 상호작용으로 실행되는 움직임을 제어할 수 있어야 한다. 필수적이지 않은 움직임은 전정 기관 장애 반응을 유발할 수 있다. 전정 기관(내이) 장애로 인한 반응에는 주의 분산, 어지럼증, 두통, 메스꺼움이 있다.
    • 페르소나 인용문: “불필요한 움직임을 멈춰 주세요! 너무 어지러워서 집중할 수가 없어요. 이제 컴퓨터를 끄고 누워야 해요.”

예제

Section titled “예제”
  • 시차 스크롤링과 불필요한 움직임을 전역에서 끌 수 있는 옵션
    • 어떤 사이트는 사용자가 스크롤할 때 추가 애니메이션을 제공한다. 필수적인 페이지 콘텐츠가 세로로 스크롤되면, 장식 요소가 가로로 움직이면서 화면에 나타나거나 사라진다. 각 페이지 상단에는 불필요한 애니메이션을 끌 수 있는 컨트롤이 있다. 필수적이지 않은 애니메이션을 끄는 기능은 사이트 전체에 적용되는 설정이다.
  • 움직임 줄이기 선호 설정을 지원하는 전환 효과
    • 어떤 사이트는 새로운 콘텐츠를 불러올 때 필수적이지 않은 전환 효과를 제공한다. 이 전환 효과는 페이지가 넘어가는 애니메이션이며, prefers-reduced-motion CSS 미디어 쿼리를 준수한다. 사용자가 움직임 줄이기 선호 설정을 활성화하면 페이지가 넘어가는 애니메이션은 꺼진다.
  • 필수 애니메이션
    • 어떤 웹 애플리케이션은 애니메이션 시퀀스를 제작하는 기능을 제공한다. 이 도구를 사용하는 제작자는 애니메이션을 미리 볼 수 있어야 한다.

관련 자료

Section titled “관련 자료”

자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.

기법

Section titled “기법”

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

충분 기법

Section titled “충분 기법”
의견 남기기