자동차, 보트, 비행기를 타고 갑자기 세상이 회전하는 것을 느낀 적이 있나요? '즐거움'을 주도록 휴대폰이나 태블릿에 애니메이션을 만들어 갑자기 몸이 안 좋아질 정도로 편두통을 앓았나요? 아니면 항상 모든 유형의 움직임에 민감했던가요? 이것은 다양한 유형의 전정 질환의 예입니다.
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에서 이 설정은 기본적으로 사용 설정되어 있는 애니메이션 표시로 프레임됩니다. 모션을 줄이려면 사용자가 이 설정을 사용 중지해야 합니다.
또는 다음 일련의 예에서와 같이 무한 루프에서 재생되는 대신 5초 이내에 이동을 멈추도록 모든 애니메이션을 코딩할 수 있습니다.
점진적인 움직임 향상
디자이너와 개발자는 기본 이동 상태와 표시할 움직임의 양을 비롯하여 다양한 선택을 할 수 있습니다. 모션에 관한 마지막 예를 다시 살펴보겠습니다.
화면의 콘텐츠를 이해하는 데 애니메이션이 불필요하다고 판단했다고 가정해 보겠습니다. 이 경우 기본 상태를 전체 모션 버전 대신 축소된 모션 애니메이션으로 설정할 수 있습니다. 사용자가 특별히 애니메이션을 요청하지 않는 한 애니메이션이 사용 중지됩니다.
어떤 움직임의 수준이 발작, 전정 및 기타 시각 장애가 있는 사람에게 문제를 일으킬지 예측할 수 없습니다. 화면에서 약간의 움직임이라도 어지러움, 시야 흐림 또는 심한 증상을 유발할 수 있습니다. 따라서 다음 예에서는 기본적으로 애니메이션이 없습니다.
계층화된 미디어 쿼리
여러 미디어 쿼리를 사용하여 사용자에게 더 많은 선택권을 제공할 수 있습니다. @prefers-color-scheme, @prefers-contrast, @prefers-reduced-motion를 함께 사용해 보겠습니다.
사용자가 선택하도록 허용
디지털 제품에 애니메이션을 빌드하여 사용자를 즐겁게 하는 것은 재미있을 수 있지만 일부 사용자가 이러한 디자인의 영향을 받을 수 있다는 점을 기억하는 것이 중요합니다. 움직임 민감도는 약간의 불편함을 느끼거나 쇠약해지는 질병이나 발작을 유발하는 등 누구에게나 영향을 줄 수 있습니다.
다양한 도구를 사용하면 사용자의 움직임이 너무 많은지 추측하기보다는 자신에게 가장 적합한 것이 무엇인지 사용자가 결정하도록 할 수 있습니다. 예를 들어 사이트 또는 웹 앱 내에 애니메이션을 켜거나 끄는 전환 버튼을 추가합니다. 이러한 전환 스위치의 기본값을 off로 설정하는 것이 좋습니다.
학습 내용 확인하기
모션 및 애니메이션 접근성에 관한 지식을 테스트해 보세요.
모션에 대한 운영체제 설정을 반영하는 것을 무엇을 빌드할 수 있을까요?
@prefers-reduced-motion