회복하는 것은 감소 된 모션을 선호합니다

2 년 전, 나는 사파리 10.1에 소개 된 미디어 쿼리 인 전정 장애와 간질이있는 사용자의 웹 접근성을 향상시키기 위해 미디어 쿼리 prefers-reduced-motion 탐구했습니다. 원래 기사는 모션 유발 문제를 방지하기위한 쿼리의 배경, 필요성 및 구현에 대해 논의했습니다.

이는 사용자 쿼리에서 Orde Saunders의 훌륭한 작업과 웹 애니메이션의 모션 감도에 대한 Val Head의 통찰력을 따랐습니다.

2019 년으로 빨리 전달하면 주요 데스크톱 브라우저 가이 중요한 기능을 지원합니다! 사파리는 그 길을 이끌었고 Firefox가 밀접하게 이어졌습니다. Chrome은 나중에 버전 74에서 시작하여 지원했습니다.

브라우저 지원 세부 사항은 caniuse.com에서 제공됩니다 (숫자는 해당 버전의 지원을 나타냅니다).

데스크탑 브라우저 지원

브라우저	지원하다
크롬	예
파이어 폭스	예
즉	아니요
가장자리	아니요 (그러나 크롬 기반이되기)
원정 여행	예

모바일/태블릿 브라우저 지원

브라우저	지원하다
안드로이드 크롬	예
안드로이드 파이어 폭스	예
안드로이드 (기타)	부분적
iOS 사파리	예

Microsoft Edge에는 현재 지원이 부족하지만 Chrome과의 통합은 임박합니다. 이 전환은 잠재적 인 상승을 제공합니다. Edge의 강력한 접근성 기능은 Chrome에 통합 될 수 있습니다.

인식 제고

일부 웹 사이트와 앱은 prefers-reduced-motion 반면, 그 채택은 CSS 및 접근성 커뮤니티 외부에서 놀랍게도 제한되어 있습니다. 이것은 전적으로 예상치 못한 것은 아닙니다. CSS 기능은 종종 저평가되어 접근성이 훨씬 더 많습니다.

개발자는 특히 빠르게 진행되는 산업에서 비교적 새로운 기능을 간과 할 수 있음을 이해할 수 있습니다. 시장 우선 순위는 개발자의 초점에 크게 영향을 미칩니다. 그러나, prefers-reduced-motion 것은 라이브러리에 대한 정보이며 OS 수준 설정과 통합되어 장기적인 관련성을 시사합니다.

그 진정한 가치는 채용 담당자에게 감동을주는 것이 아니라 영향을받는 사용자의 삶을 향상시키는 데 있습니다. 이 간단한 미디어 쿼리는 단순히 웹 사이트를 탐색하거나 상호 작용하는 사용자에게 상당한 불편 함을 방지 할 수 있습니다.

영향을받는 사용자에게 미치는 영향

장애는 복잡하고 다면적이며 광범위한 영구적, 일시적, 환경 적 및 상황 적 요인을 포함합니다. 많은 사람들이 실수로 시각 장애에만 집중합니다. 장애의 영향은 크게 다르며 한 사람이 다른 사람에게 해를 끼칠 수있는 데 도움이되는 것은 다른 사람에게 해를 끼칠 수 있습니다.

전정 장애, 편두통 또는 발작 트리거가있는 개인의 경우 웹 브라우징이 어려울 수 있습니다. 예상치 못한 애니메이션은 쇠약 한 증상을 유발할 수 있습니다. 이것은 웹 애플리케이션에 크게 의존하는 사람들에게는 특히 문제가됩니다. 작업 장치 나 작업 옵션에 대한 통제력이 부족할 수 있습니다.

모든 사람이 자신의 상태 나 트리거를 알고 있다는 것은 오해입니다. 초기 트리거링 이벤트는 때때로 감도를 높일 수 있습니다. Facundo Corradini의 기사, "전정 장애에 대한 접근성"은이 경험을 웅변 적으로 설명합니다.

또한 모든 보조 기술 사용자가 기술에 정통한 것은 아닙니다. 동작을 완화하는 OS 설정 또는 브라우저 확장을 알지 못할 수 있습니다. 고정 된 회사 장치가 잠긴 사용자, 장치의 기능에 익숙하지 않은 사용자 또는 prefers-reduced-motion 에 대한 지원이 부족한 저렴하거나 오래된 장치를 사용하는 사용자를 고려하십시오.

잠재적 인 피해를 평가합니다

참여를 장려하기위한 애니메이션은 반대로 사용자를 멀리 할 수 ​​있습니다. 정량화하기는 어렵지만이 부정적인 영향은 실제입니다. 의도적 인 피해는 측정하기가 더 쉽지만 해결하면 더 많은 어려움이 생깁니다.

상당한 사용자 기반에 상당한 피해가 브랜딩에 영향을 미칩니다. 과도하거나 구현되지 않은 애니메이션은 이유를 표현할 수 없더라도 사용자를 방해 할 수 있습니다.

우리는 모든 사용자의 특정 상황을 알 수없고 알 수 없습니다. 사전 예방 적 접근 방식이 필수적입니다.

진보적 인 향상으로서의 애니메이션

모든 장치가 애니메이션을 똑같이 잘 렌더링하는 것은 아닙니다. 저전력 장치가 어려움을 겪을 수 있으며, 독자 모드와 같은 특수 브라우징 모드는 애니메이션을 완전히 변경하거나 제거 할 수 있습니다. 이것은 강력한 디자인의 중요성을 강조합니다.

애니메이션이 확대 된 뷰포트 또는 리더 모드에서 의도 된대로 항상 작동하는 것은 아닙니다. 중요한 요소는 시야에서 벗어날 수있어 시각적 인 경험을 초래할 수 있습니다.

실제 구현

애니메이션의 잠재적 다운 사이드에 대한 인식과 고려 사항을 향상시키기 위해 미디어 쿼리를 사전에 통합하여 선호하거나 원활하게 처리 할 수없는 장치가있는 사용자를위한 애니메이션을 비활성화 할 수 있습니다. 이는 update 미디어 기능을 사용하여 느린 화면 새로 고침 속도를 가진 prefers-reduced-motion 과 장치를 대상으로합니다.

 @Media 화면 및
  (감소 된 모션을 선호 : 감소),
  (업데이트 : 느린) {
  * {
    애니메이션 기간 : 0.001ms! 중요;
    애니메이션-고유 한 카운트 : 1! 중요;
    전환 기간 : 0.001ms! 중요;
  }
}

이로 인해 모든 애니메이션이 눈에 띄게 완료되도록합니다. 그것은 느린 새로 고침 속도 (예 : e-ink 화면)를 가진 감소 된 모션 또는 장치를 요청하는 사용자에게 기능합니다. animation-duration 및 transition-duration 유지하면 문제를 방지하면서 기능이 보장됩니다.

이 접근법은 다음을 목표로합니다.

1. 미디어 기능에 대한 인식을 높이십시오.
2. 애니메이션의 영향에 대한 사려 깊은 고려를 장려하십시오.
3. 보다 관리 가능한 스타일 시트를 홍보하십시오.

애니메이션의 가치

전정 장애와 감광성 외에도인지 장애를 고려해야합니다. 세계 보건기구 (WHO)는 전 세계 3 억 명의 사람들이 우울증의 영향을받는 것으로 추정되며, 이는 환경과의 상호 작용을 크게 손상시킬 수 있습니다.

애니메이션은 일부인지 장애, 이해력과 의사 소통을 지원하는 데 도움이 될 수 있습니다. Val Head의 작업은인지 부하를 줄이면서 문제 해결, 리콜 및 기술 습득을 향상시킬 수있는 잠재력을 강조합니다.

감소, 제거하지 마십시오

우리는 애니메이션을 완전히 제거해서는 안됩니다. prefers-reduced-motion 제거가 아니라 감소를 시사합니다. CSS 캐스케이드를 사용하여 구성 요소별로 애니메이션을 관리 할 수 ​​있습니다. 애니메이션이 이해하는 데 중요하다면 문제를 유발하지 않도록 속도를 늦출 수 있습니다.

CSS 사용자 정의 속성은이 프로세스를 간소화 할 수 있으며 사이트 전체 애니메이션 환경 설정 위젯을 활성화 할 수도 있습니다.

 / * 기본 기간 */
: 루트 {
  -애니메이션 기간 : 250ms;
  -전환 기간 : 250ms;
}

/ * 문맥 단축 */
@Media (Prefess-Seeduced-Motion : Reduce), (업데이트 : slow) {
  : 루트 {
    -애니메이션 기간 : 0.001ms! 중요;
    -전환 기간 : 0.001ms! 중요;
  }
}

@Media (Prefess-Seeduced-Motion : Reduce), (업데이트 : slow) {
  * {
    애니메이션 기간 : var (-애니메이션 기간);
    애니메이션-고유 한 카운트 : 1! 중요;
    전환 기간 : var (-애니메이션 기간);
  }
}

/ * 중요한 애니메이션의 업데이트 */
@Media (Prefers-Seeduced-Motion : Reduce), (업데이트 : FAST) {
  .C- 교육-개념 {
    -애니메이션 기간 : 6000ms! 중요;
    애니메이션 이름 : 교육 개념;
    애니메이션 기간 : var (-애니메이션 기간);
  }
}

느린 애니메이션을 테스트하려면 모션 관련 문제에 취약한 사용자의 입력이 필요합니다. 더 나은 접근 방식은 과거 트리거에 대한 정보를 수집하여 구현 된 애니메이션과 비교하는 것입니다.

신경 전달

접근성 전문가 인 Shell Little은 Neurodivergence에 대한 귀중한 통찰력을 제공합니다.

웹 애니메이션은 일부 Neurodivergent 사용자에게는 도움이 될 수 있지만 동일한 애니메이션은 다른 애니메이션에 장애가 될 수 있습니다. WCAG의 일시 정지, 정지, 숨기기 가이드 라인은 제한되어 있으며 5 초 이상의 애니메이션에만 적용되고 필수 움직임이 면제됩니다. prefers-reduced-motion 사용자 제어 솔루션을 제공하여 개인에게 애니메이션이 표시되는시기와 위치를 결정할 수 있도록 강화합니다. 이는주의 관련 장애 또는 감각 처리 감도를 가진 사용자에게 특히 중요합니다. 자동 배송 콘텐츠는 일반적인 좌절이며, prefers-reduced-motion 이를 해결할 수 있습니다.

결론

애니메이션은 책임감있게 사용해야합니다. 고려해야 할 요소에는 다음이 포함됩니다. 잠재적 인 문제에 대한 인식 제고, 법적 위험 완화, 사용자 경험 향상, 장치 기능 및 제한 이해, 사용자 데이터 및 배터리 수명 존중.

prefers-reduced-motion 과 책임있는 애니메이션 관행에 대한 인식을 확산시키는 것이 중요합니다. 문제가있는 애니메이션의 경험을 공유하면 개발자에게 귀중한 참조를 구축 할 수 있습니다. 이러한 집단적 노력은 웹을보다 포괄적이고 접근 가능하게 만들 수 있습니다.

위 내용은 회복하는 것은 감소 된 모션을 선호합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!