2.3 발작 예방
발작이나 신체적 반응을 일으키는 것으로 알려진 방식으로 콘텐츠를 제작하지 말아야 합니다.
2.3.1 발작 요인 (A)
웹 페이지는 1초 동안 3번 이상 깜박이거나, 플래시가 일반 플래시 및 레드 플래시 임계 값보다 낮은 어떤 것을 포함해서는 안됩니다.
이 가이드라인을 충족하지 않는 콘텐츠는 전체 페이지 사용 능력에 방해가 될 수 있으므로 웹 페이지의 모든 콘텐츠(다른 기준을 충족하는 지 여부와 상관 없이)는 이 가이드라인을 충족해야 합니다.
보다 자세한 내용은 적합성 요구 - 5. 비간섭을 참고하세요.
2.3.2 1초에 3회 이상 깜빡임 (AAA)
웹 페이지는 1초 동안 3번 이상 깜박이는 콘텐츠를 포함해서는 안됩니다.
2.3.3 인터랙션 애니메이션 (AAA)
사용자에게 전달되는 정보에 애니메이션이 꼭 필요하지 않을 경우, 인터랙션에 의해 실행되는 모션 애니메이션을 사용자가 끌 수 있도록 만들어 주어야 합니다.
해설
이 지침은 예기치 않은 움직임으로 인해 안좋은 경험하는 사람들에게 도움이 됩니다. 인지 장애를 가진 사람들은 복잡하거나, 현란하게 움직이는 애니메이션에 현기증, 메스꺼움, 두통 등을 일으킬 수 있습니다. 시각적인 애니메이션 효과를 과도하게 사용된 웹 사이트가 전정 장애를 가진 사람들에게 고통을 줄 수 있습니다. 뿐만 아니라 불필요한 애니메이션은 스마트폰의 배터리 방전 시간을 앞당깁니다.
예시
스크롤 이벤트에 따라 화면에 복잡하게 움직이는 Vimeo Cameo 웹 사이트는 사용자를 어지럽게 만들지만, 애니메이션을 끌 수 있는 기능은 제공되고 있지 않습니다.
RD Construction
3D 큐브 애니메이션으로 화면이 전환되는 웹 사이트는 넓은 모션 영역과 다양한 속도로 움직이는 배경, 전경의 시차 효과로 현기증을 일으킬 수 있지만, 애니메이션을 끌 수 있는 기능은 제공하지 않습니다.
자동으로 움직이는 캐러셀을 멈출 방법을 제공하지 않아 전정 장애 사용자에게 좋지 않은 경험을 제공할 수 있습니다. 회전하는 슬라이드를 일시 정지 또는 정지할 수 있는 기능을 제공하지 않아 문제가 됩니다.
LINE Plus Corporation 웹 사이트에 접속하면 자동 재생되는 배경 비디오를 사용자는 멈출 수 없습니다. 멈출 수 없는 배경 비디오는 전정 장애 사용자에게 좋지 않은 경험을 제공합니다.
정보를 전달하는 신문사의 인터랙티브 기사들을 보면 전정 장애 사용자를 포함한 사용자들의 접근성이 매우 부족합니다. 마찬가지로 애니메이션을 끌 수 있는 기능은 제공되고 있지 않습니다.
Eric Bailey는 모션 줄이기 미디어 쿼리를 통해 애니메이션을 제어하는 기능에 대해 소개했습니다. 이 기능은 모션을 위한 반응형 디자인에서 소개된 prefers-reduced-motion 미디어쿼리 기술을 사용합니다. Mac OSX의 "모션 줄이기" 기능을 활성화면 현란하게 움직이는 모션을 제거하고 정적인 이미지를 보여줄 수 있어 접근성을 향상시킬 수 있습니다.
prefers-reduced-motion 미디어 쿼리를 사용해 모션을 줄이는 다양한 예제는 Responsive Design for Motion에서 확인해보세요.
하지만 안타깝게도 현재 (2018년) 이 기술을 활용하기엔 브라우저 호환성이 좋지 않습니다.
2.2.2 일시정지, 중지, 감추기 (A) 성공 기준에 따르면 웹 사이트의 인터랙션 애니메이션 기능을 일시정지 또는 정지 할 수 있어야 합니다. 인터랙션 애니메이션은 마우스 호버, 포커스, 스크롤 또는 클릭 등과 같은 이벤트에 따라 발생합니다. 문제는 인터랙션으로 예상치 못한 추가 동작이 발생할 때입니다. 그런 이유로 가능하다면 사용자와 인터랙션 하는 콘텐츠의 애니메이션이 포함된 경우, 사용자가 애니메이션을 끌 수 있도록 만들어 줄 수 있길 기대합니다.
움직임에 민감한 사용자를 위한 웹 애니메이션을 참고해 읽어보세요.
성공기준 이해하기 2.3.3를 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.
Last updated
