접근성을 위한 미디어 쿼리 사용하기

미디어쿼리(Media Queries)는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.

애니메이션 동작 축소하기(Reduced Motion)

깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(ADHD)와 같은 인지 문제를 가진 사람들에게 문제가 될 수 있습니다. 이러한 종류의 애니메이션 동작들은 전정편두통, 뇌전증, 편두통과 광과민증을 유발할 수 있습니다.

또한, 이 애니메이션 동작을 줄이는 방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.

문법

no-preference

사용자가 시스템에 관련된 설정을 하지 않았다는 것을 의미합니다.

reduce

사용자가 시스템에 애니메이션 동작을 최소화하도록 설정하였다는 것을 의미합니다. 가급적이면 필수적이지 않은 동작은 모두 제거됩니다.

예제

이 예제는 접근성 환경 설정에서 축소 모션을 활성화시키지 않았다면 난잡한 애니메이션이 실행됩니다.

HTML

html
<div class="animation">animated box</div>

CSS

css
.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

prefers-reduced-motion 의 값은 "none" 이 아닌 reduce 입니다. 이 설정은 모든 애니메이션이 삭제되어야 한다는 것이 아니라, * {animation: none !important;} 을 사용하여야 달성할 수 있다는 것을 의미합니다. 오히려, 사용자는 애니메이션이 기능이나 전달될 정보가 필수적이지 않는 한 사용자의 상호 작용으로 트리거되는 애니메이션을 포함한 모션 애니메이션이 비활성화되는 것을 기대합니다 (참고: WCAG: 상호작용으로부터의 애니메이션).

같이 보기