접근 가능한 모션: 의미를 잃지 않고 선호 감소 모션을 위한 설계
움직임 감소 설정과 전정 장애를 고려한 동작 설계 방법: WCAG에 필요한 것, 제거할 것, 유지할 것, 테스트하는 방법.
핵심 포인트
사용자가 모션 감소를 켤 때 모든 애니메이션의 의미를 유지하되 움직임을 제거하십시오. 슬라이드, 확대/축소 및 시차를 짧은 페이드 또는 즉각적인 변경으로 대체하고, 자동 재생 루프를 중지하고, 모션에만 의존하여 무언가를 전달하지 마십시오. 웹에서는 favorites-reduced-motion 미디어 쿼리를 사용하여 설정을 감지합니다.
왜 중요한가요?
어떤 사람들에게는 화면의 움직임이 취향의 문제가 아닙니다. W3C는 애니메이션이 메스꺼움, 편두통, 심한 경우에는 회복을 위해 침상 안정이 필요한 반응과 함께 전정 장애를 유발할 수 있다고 지적합니다. 운영 체제에서는 사람들이 더 적은 움직임을 요구할 수 있으며, 웹에서는 해당 요청이 선호 감소 움직임 미디어 쿼리로 노출됩니다. 사용자가 설정을 켜면 해당 값이 감소합니다.
WCAG가 요구하는 것
두 가지 WCAG 성공 기준이 모션을 다룹니다. 2.2.2 일시 중지, 중지, 숨기기는 회전식 슬라이드 및 반복 애니메이션과 같이 자동으로 시작되는 모션에 적용되며 일시 중지, 중지 또는 숨기는 방법이 필요합니다. 2.3.3 상호 작용의 애니메이션(레벨 AAA)은 사용자 상호 작용에 의해 트리거된 모션에 적용되며, 불필요한 애니메이션을 피하거나, 애니메이션을 끌 수 있는 컨트롤을 제공하거나, 운영 체제의 모션 감소 설정을 사용할 것을 제안합니다. AAA가 필요하지 않은 경우에도 AAA를 따르는 것이 좋습니다.
움직임을 제거하고 의미를 유지하세요
움직임이 줄어든다고 해서 피드백이 없다는 의미는 아닙니다. 버튼을 누르는 사용자는 여전히 버튼이 작동했다는 것을 알아야 합니다. 목표는 상태 변경을 유지하고 이동을 중단하는 것입니다.
- 제거 또는 축소: 대형 슬라이드, 확대/축소, 시차, 스크롤 연결 이동, 회전, 자동 재생 루프 및 배경 비디오.
- 유지: 색상 및 불투명도 변경, 초점 표시기, 짧은 상태 전환, 진행 정보.
- 교체: 짧은 크로스페이드 또는 즉각적인 변경으로 페이지 및 패널 전환.
- 안 함: 오류, 변경 사항 또는 새 항목을 표시하는 유일한 방법으로 모션을 사용합니다.
구현
웹에서는 필수적이지 않은 모션을 @media로 감싸거나(prefers-reduced-motion: no-preference), @media 내에서 이를 재정의합니다(prefers-reduced-motion: Reduce). JavaScript에서 window.matchMedia('(prefers-reduced-motion: Reduce)')를 읽고 변경 사항을 수신합니다. 기본 플랫폼은 동일한 설정을 노출합니다. SwiftUI, UIKit 및 Android 모두 이를 확인할 수 있습니다. 디자인 시스템에 모션 토큰이 있는 경우 각 구성 요소가 동일한 방식으로 작동하도록 축소된 변형을 정의하세요.
테스트
운영 체제에서 모션 감소를 활성화하고 모든 주요 흐름을 살펴보세요. 중요한 내용이 손실되지 않았는지, 루프가 자동으로 시작되지 않는지, 스크롤 자체가 수행하는 것 이상으로 스크롤이 콘텐츠를 이동하지 않는지 확인하세요. 브라우저 개발자 도구도 설정을 에뮬레이트할 수 있습니다.
프로덕션 구현 예시
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });기억할 핵심 원칙
- 움직임은 일부 사람들을 신체적으로 아프게 만들 수 있습니다. 설정을 존중한다
- 여행, 줌, 시차 및 자동 재생을 제거합니다. 상태 변경 및 피드백 유지
- WCAG 2.2.2는 자동 동작을 다룹니다. 2.3.3 상호작용으로 인한 움직임을 다룬다
- Prefers-Reduced-Motion 및 각 기본 플랫폼에서 설정을 감지합니다.
- 각 모션 토큰에 대해 축소된 변형을 설계합니다.
자주 묻는 질문
출처
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN 웹 문서
- Motion — Apple 휴먼 인터페이스 지침