애니메이션: 동작 감소, 일시 정지 및 이해도 확인

이 가이드가 달성하는 목표

• 인벤토리 트리거
• 동작 감소 정의
• WCAG 기준 분리
• 모든 구현 테스트

빠른 확인

• 축소된 모션이 모든 애니메이션을 금지하는가?
• 기준 2.3.3 레벨 AA인가?
• 전역 CSS 규칙으로 충분한가?

단계별 방법

1. 1

   인벤토리 트리거

   자동, 상호 작용 트리거 및 스크롤 연동 모션을 나열합니다. 상태 정보와 장식을 분리합니다. JavaScript 애니메이션, 비디오 및 내장 요소도 검사합니다.

   결과물: 효과 및 목적 등록.

2. 2

   동작 감소 정의

   prefers-reduced-motion은 필수적이지 않은 모션을 줄이려는 의도를 나타냅니다. 정보와 컨트롤을 유지하면서 정적이거나 더 조용한 대안을 제공합니다. 큰 변화를 다른 주의를 산만하게 하는 효과로 대체하지 않도록 합니다.

   결과물: 구성 요소별 동작 축소.

3. 3

   WCAG 기준 분리

   상호 작용 애니메이션 기준 2.3.3은 AAA 레벨입니다. 레벨 A 기준 2.2.2는 필수적인 경우가 아니면 다른 콘텐츠와 함께 5초 이상 지속되는 특정 자동 움직임을 포함합니다. 해당 기준의 조건을 확인합니다.

   결과물: 각 효과에 대한 기준 및 컨트롤.

4. 4

   모든 구현 테스트

   로딩 전과 세션 중에 선호 사항을 에뮬레이션합니다. 스타일, 스크립트 및 프로그래밍 방식 스크롤링을 검사합니다. 애니메이션 완료 여부에 따라 상태가 달라지는 경우, 애니메이션이 제거된 경우에도 신뢰할 수 있는 결과를 얻을 수 있도록 해야 합니다.

   산출물: 콜드 로드, 실시간 변경 및 최종 상태 테스트.

5. 5

   정보 및 제어 사항 보존

   두 가지 모드 모두에서 읽기, 키보드 및 오류 피드백을 테스트합니다. 영향을 받는 자동 동작의 경우, 읽기 중 일시 정지, 정지 또는 숨기기 및 안정성을 테스트합니다. 모든 애니메이션을 필수 애니메이션으로 분류하는 대신 예외 사항을 문서화합니다.

   산출물: 증거 및 제한 사항. 산출물: 증거 및 제한 사항.

재사용 가능한 워크시트

승인된 의견을 기입하십시오. 이 항목들은 작업 템플릿이며, 관찰된 결과가 아닙니다.

메커니즘 구분

관리 지표

일반적인 실수

• 스크립트도 확인
• 키보드 조작 가능
• 진행률 또는 오류 피드백 제거 안 함