애니메이션 및 모션

자동차나 배, 비행기를 타고 갑자기 세상을 느낀 적이 있나요? 어떻게 해야 할까요? 편두통이 너무 심해서 휴대전화나 태블릿에서 애니메이션을 보거나 '즐거움'을 주기 위해 만들어졌습니다. 너, 갑자기 몸이 아프게 하는 거야? 아니면 항상 그 안에서 어떤 종류의 움직임에도 민감하게 반응하나요? 이것들은 데이터 레이크에서 전정관 장애라고 합니다.

40세가 되면 성인의 35% 이상이 전정 장애입니다. 이로 인해 일시적인 어지러움, 편두통으로 인한 현기증 등이 나타날 수 있습니다. 영구적인 전관 장애를 갖고 있습니다.

현기증을 유발하는 것 외에도 많은 사람이 움직이거나 눈을 깜박이거나 스크롤하는 것을 경험합니다. 방해가 됩니다. 다음 항목을 가진 사용자 ADHD 애니메이션으로 인해 주의가 산만해질 수 있습니다 왜 그들은 Google 쇼핑에서 웹사이트나 앱을 방문했는지조차 잊어버리는 1위입니다.

이 모듈에서는 사람들을 더 효과적으로 지원하는 방법을 모든 유형의 움직임으로 유발된 장애를 겪고 있습니다.

콘텐츠 플래싱 및 이동

애니메이션과 모션을 제작할 때는 요소의 움직임이 과도한지 자문해야 합니다. 예를 들어 어두운 색에서 밝은 색으로 깜박이거나 화면에서 빠르게 움직이면 광민감간질 환자에게 발작이 일어날 수 있습니다. 간질 환자 중 3%가 광과민성 증상을 겪는 것으로 추정되며, 여성과 젊은층에서 더 많이 발생합니다.

WCAG의 플래시 가이드라인에서는 다음 사항을 권장합니다.

• 1초에 3회 이상 깜박임
• 표시 영역 아래의 깜박임 일반 플래시 및 빨간색 플래시 임곗값

이러한 플래시가 발생할 경우, 최악의 경우 웹페이지를 사용하지 못하게 될 수 있으며, 최악의 경우에는 질병으로 이어질 수 있습니다.

극단적인 움직임의 경우, 광민감간질 분석 도구 (PEAT). PEAT는 화면의 콘텐츠, 동영상 또는 애니메이션 여부를 식별하는 무료 도구입니다. 발작을 유발할 가능성이 높습니다. 모든 콘텐츠가 PEAT의 평가가 필요한 것은 아닙니다. 플래시나 밝은 화면과 어두운 화면 사이의 빠른 전환이 포함된 콘텐츠는 안전을 위해 배경 색상도 평가해야 합니다.

애니메이션과 모션에 관해 스스로에게 물어봐야 할 또 다른 질문은 요소의 움직임이 화면의 콘텐츠나 동작을 이해하는 데 필수적인지 여부입니다. 꼭 필요하지 않다면 만들거나 설계하는 요소에서 미세한 움직임을 포함한 모든 움직임을 삭제하는 것이 좋습니다.

요소의 움직임이 꼭 필요하지는 않지만 이동성을 향상할 수 있다고 또는 다른 사람의 움직임을 삭제할 수 없음 있습니다. 이 경우 WCAG의 모션에 관한 가이드라인을 참고하세요. 가이드라인에 따르면 사용자가 광고를 일시중지, 중지, 재개할 수 있는 옵션을 움직임 숨기기: 필수적이지 않은 이동, 깜박임 또는 스크롤 요소가 자동으로 시작되고 5초 이상 지속되며 다른 페이지의 일부인 경우 요소

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

일시중지, 중지 또는 숨기기 추가 사용자가 문제의 가능성이 있는 페이지를 차단할 수 있는 메커니즘을 모션 애니메이션입니다. 화면 수준이나 요소 수준에서 이 작업을 수행할 수 있습니다.

예를 들어 디지털 제품에 애니메이션이 많이 포함되어 있다고 가정해 보겠습니다. 액세스 가능한 JavaScript 전환 버튼을 추가해 보세요. 사용자가 사용 환경을 직접 관리할 수 있습니다. 버튼이 '모션 사용 안함' 모든 애니메이션이 해당 화면과 다른 모든 화면에서 정지됩니다.

미디어 쿼리 사용

애니메이션을 선별하는 것 외에도 사용자에게 옵션을 제공합니다. 일시중지, 중지, 이동 숨기기, 무한 애니메이션 반복 방지 등의 기능을 사용하려면 움직임에 중점을 둔 미디어 쿼리를 추가해 보세요. 이를 통해 사용자는 더 많은 선택권을 얻게 될 것입니다.

@prefers-reduced-motion

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

사용자는 움직임을 줄이기 위해 디스플레이 환경설정을 설정할 수 있습니다. 이 설정은 긍정적으로든 부정적으로 프레이밍할 수 있습니다. @prefers-reduced-motion이 무엇입니까?를 사용하여 사이트를 디자인할 수 있습니다. 이러한 환경설정이 적용됩니다.

MacOS 및 Android에서는 사용자가 이 설정을 켜서 모션을 줄입니다. MacOS에서 설정 > 모션 감소를 설정할 수 있습니다. 접근성 > 디스플레이. Android의 설정은 애니메이션 삭제입니다. Windows에서는 이 설정이 애니메이션 표시로 변경할 수 있습니다. 이 기능은 기본적으로 켜져 있습니다. 사용자는 모션을 줄이기 위해 이 설정을 끕니다.

또는 다음 예와 같이 무한 루프로 재생하는 대신 5초 이내에 이동을 멈추도록 모든 애니메이션을 코딩할 수 있습니다.

움직임의 점진적 개선

디자이너와 개발자는 기본 이동 상태 및 표시할 이동 정도 등 다양한 옵션을 선택할 수 있습니다. 모션에 관한 마지막 예를 다시 살펴보겠습니다.

화면의 콘텐츠를 이해하는 데 애니메이션이 필요하지 않다고 가정해 보겠습니다. 이 경우 기본 상태를 전체 모션 버전 대신 축소된 모션 애니메이션으로 설정할 수 있습니다. 사용자가 애니메이션을 특별히 요청하지 않는 한 애니메이션은 사용 중지됩니다.

환자에게 어떤 수준의 움직임이 야기될지 예측할 수 없습니다. 발작, 전정관 및 기타 시각 장애 등이 있습니다. 약간의 움직임만 있어도 어지러움, 흐릿한 시야 또는 심한 시야를 유발할 수 있습니다. 따라서 다음 예에서는 애니메이션이 없는 것으로 기본 설정됩니다.

계층화된 미디어 쿼리

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

사용자가 선택하도록 허용

디지털 제품에 애니메이션을 적용하여 즐거움을 선사하는 것은 재미있을 수 있지만 일부 사용자는 이러한 디자인의 영향을 받을 수 있음을 기억해야 합니다. 움직임 민감도는 약간의 불편감에서부터 원인에 이르기까지 누구에게나 영향을 줄 수 있습니다. 쇠약 질환이나 발작이 될 수 있습니다.

다양한 도구를 사용하여 사용자가 최선의 방법을 결정할 수 있습니다. 얼마나 많은 움직임인지 추측하기 보다는 예를 들어 전환하여 사이트 또는 웹 앱에서 애니메이션을 사용 설정 또는 사용 중지할 수 있습니다. 고려 사항 이러한 전환 스위치를 기본적으로 사용 안함으로 설정합니다.

이해도 확인

모션 및 애니메이션 접근성에 관한 지식을 테스트합니다.