애니메이션 및 모션

자동차, 보트 또는 비행기를 타고 가다가 갑자기 세상이 빙글빙글 도는 느낌을 받은 적이 있나요? 또는 휴대전화나 태블릿에 '즐거움'을 주기 위해 만든 애니메이션이 갑자기 너무 심한 편두통을 유발한 적이 있나요? 아니면 항상 모든 유형의 움직임에 민감한가요? 이러한 증상은 다양한 유형의 전정 장애의 예입니다.

40세가 되면 성인의 35% 이상이 어떤 형태로든 전정 기능 장애를 경험하게 됩니다. 이로 인해 일시적인 어지럼증, 편두통으로 인한 현기증 또는 더 영구적인 전정 장애가 발생할 수 있습니다.

현기증을 유발하는 것 외에도 많은 사람이 움직이거나 깜박이거나 스크롤되는 콘텐츠에 주의가 산만해집니다. ADHD 및 기타 주의력 결핍 장애가 있는 사람은 애니메이션 요소에 너무 주의가 산만해져서 웹사이트나 앱을 방문한 이유를 잊을 수도 있습니다.

이 모듈에서는 모든 유형의 움직임으로 인한 장애가 있는 사용자를 더 잘 지원하는 방법을 살펴보겠습니다.

깜박이는 콘텐츠 및 움직이는 콘텐츠

애니메이션과 움직임을 빌드할 때는 요소의 움직임이 과도한지 자문해 보세요. 예를 들어 어두운색에서 밝은색으로 깜박이는 색상이나 화면의 빠른 움직임은 광민감간질이 있는 사람에게 발작을 일으킬 수 있습니다. 간질 환자의 3% 가 광민감성을 겪고 있으며 여성과 젊은 사람에게 더 흔한 것으로 추정됩니다.

깜박임에 관한 WCAG의 가이드라인에서는 다음을 권장하지 않습니다.

• 1초에 3번 이상 깜박임
• 일반 깜박임 및 빨간색 깜박임 기준점 미만의 깜박임

이러한 깜박임은 최악의 경우 웹페이지를 사용할 수 없게 하거나 질병을 유발할 수 있습니다.

극단적인 움직임의 경우 광민감간질 분석 도구 (PEAT)를 사용하여 테스트해야 합니다. PEAT는 화면의 콘텐츠, 동영상 또는 애니메이션이 발작을 일으킬 가능성이 있는지 식별하는 무료 도구입니다. 모든 콘텐츠를 PEAT로 평가할 필요는 없지만 깜박임이 포함되어 있거나 밝은 배경색과 어두운 배경색 간에 빠른 전환이 있는 콘텐츠는 안전을 위해 평가해야 합니다.

애니메이션과 움직임에 관해 자문해야 할 또 다른 질문은 요소의 움직임이 화면의 콘텐츠나 작업을 이해하는 데 필수적인지 여부입니다. 필수적이지 않다면 빌드하거나 디자인하는 요소에서 미세한 움직임까지 포함한 모든 움직임을 삭제하는 것이 좋습니다.

요소의 움직임이 필수적이지는 않지만 전반적인 사용자 환경을 개선할 수 있다고 생각하거나 다른 이유로 움직임을 삭제할 수 없다고 가정해 보겠습니다. 이 경우 움직임에 관한 WCAG의 가이드라인을 따라야 합니다. 가이드라인에 따르면 자동으로 시작되고 5초 이상 지속되며 다른 페이지 요소의 일부인 필수적이지 않은 움직이는 요소, 깜박이는 요소 또는 스크롤되는 요소에 대해 사용자가 움직임을 일시중지, 중지 또는 숨길 수 있는 옵션을 빌드해야 합니다.

움직임 일시중지, 중지 또는 숨기기

사용자가 잠재적으로 문제가 될 수 있는 움직임 애니메이션을 사용 중지할 수 있도록 페이지에 일시 중지, 중지 또는 숨기기 메커니즘을 추가합니다. 화면 수준 또는 요소 수준에서 이 작업을 실행할 수 있습니다.

예를 들어 디지털 제품에 애니메이션이 많이 포함되어 있다고 가정해 보겠습니다. 사용자가 환경을 제어할 수 있도록 접근성 자바스크립트 전환 을 추가하는 것이 좋습니다. 버튼이 '움직임 사용 중지'로 전환되면 해당 화면과 다른 모든 화면에서 모든 애니메이션이 고정됩니다.

미디어 쿼리 사용

애니메이션을 선택적으로 사용하는 것 외에도 사용자에게 움직임을 일시중지, 중지, 숨길 수 있는 옵션을 제공하고 무한 애니메이션 루프를 피하는 것 외에도 움직임 중심의 미디어 쿼리를 추가하는 것이 좋습니다. 이렇게 하면 화면에 표시되는 항목에 관해 사용자에게 더 많은 선택권을 제공할 수 있습니다.

@prefers-reduced-motion

색상 모듈의 색상 중심 미디어 쿼리와 마찬가지로 색상 모듈은 @prefers-reduced-motion 미디어 쿼리는 사용자의 OS 설정 애니메이션과 관련된 설정을 확인합니다.

사용자는 움직임을 줄이도록 표시 환경설정을 설정할 수 있습니다. 이러한 설정은 운영체제마다 다르며 긍정적 또는 부정적으로 구성될 수 있습니다. @prefers-reduced-motion을 사용하면 이러한 환경설정을 준수하는 사이트를 디자인할 수 있습니다.

macOS 및 Android에서는 사용자가 움직임을 줄이도록 설정을 사용 설정합니다. macOS에서는 사용자가 설정 > 손쉬운 사용 > 디스플레이에서 움직임 줄이기 를 설정할 수 있습니다. Android의 설정은 애니메이션 삭제 입니다. Windows에서는 설정이 기본적으로 사용 설정되어 있는 애니메이션 표시로 긍정적으로 구성됩니다. 사용자는 움직임을 줄이려면 이 설정을 사용 중지해야 합니다.

움직임에 어려움을 겪는 개인의 접근성을 보장하려면 WCAG 2.0 AA 가이드라인에 설명된 5초 기준점보다 짧은 애니메이션도 주의해서 접근해야 하며, 가장 안정적인 방법은 움직임 감소를 선호하는 사용자가 애니메이션을 독점적으로 제어할 수 있도록 하여 재생 버튼 및 일시중지 버튼과 같은 전용 컨트롤을 사용하여 애니메이션을 시작하고 중지할 수 있도록 하는 것입니다.

움직임의 점진적 개선

디자이너와 개발자는 기본 움직임 상태와 표시할 움직임의 양을 비롯해 다양한 선택을 할 수 있습니다. 움직임에 관한 마지막 예를 다시 살펴보세요.

화면의 콘텐츠를 이해하는 데 애니메이션이 필요하지 않다고 결정했다고 가정해 보겠습니다. 이 경우 전체 움직임 버전 대신 움직임 감소 애니메이션으로 기본 상태를 설정할 수 있습니다. 사용자가 애니메이션을 구체적으로 요청하지 않는 한 애니메이션은 사용 중지됩니다.

발작, 전정 및 기타 시각 장애가 있는 사람에게 어떤 수준의 움직임이 문제를 일으킬지 예측할 수 없습니다. 화면의 작은 움직임도 어지럼증, 시야 흐림 또는 더 심각한 증상을 유발할 수 있습니다. 따라서 다음 예에서는 애니메이션이 기본적으로 사용되지 않습니다.

계층화된 미디어 쿼리

여러 미디어 쿼리를 사용하여 사용자에게 더 많은 선택권을 제공할 수 있습니다. @prefers-color-scheme, @prefers-contrast, @prefers-reduced-motion을 모두 함께 사용해 보겠습니다.

사용자가 선택할 수 있도록 허용

사용자를 즐겁게 하기 위해 디지털 제품에 애니메이션을 빌드하는 것은 재미있을 수 있지만 일부 사용자는 이러한 디자인의 영향을 받는다는 점을 기억하는 것이 중요합니다. 움직임 민감성은 약간의 불편감부터 쇠약하게 만드는 질환이나 발작을 유발하는 것까지 누구에게나 영향을 미칠 수 있습니다.

움직임이 너무 많다고 추측하기보다는 사용자가 자신에게 가장 적합한 것을 결정할 수 있도록 다양한 도구를 사용할 수 있습니다. 예를 들어 사이트 또는 웹 앱 내에서 애니메이션을 사용 설정하거나 사용 중지하는 전환을 추가합니다. 이러한 전환은 기본적으로 사용 중지 로 설정하는 것이 좋습니다.