Day 16) 접근성을 고려한 애니메이션

🎄  A11y Advent Calendar (번역) 16일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

애니메이션은 적절히 활용할 경우 사용자 경험을 크게 향상시킬 수 있는 강력한 도구입니다. 하지만, 과도하게 사용하거나 오용되면 문제가 될 수 있습니다. 대부분의 사용자에게는 큰 영향을 미치지 않지만, 특정 사용자에게는 움직이는 콘텐츠가 좌절감(frustration), 멀미, 심지어는 발작과 같은 심각한 반응을 유발할 수 있습니다. 따라서 애니메이션은 책임감 있게 사용해야 합니다.

 

이를 위한 간단하고 효과적인 방법 중 하나는 prefers-reduced-motion 미디어 쿼리를 사용하는 것입니다. 이 쿼리는 사용자가 기기 설정에서 모션 감소를 선호한다고 표시한 경우 애니메이션을 줄이거나 제거할 수 있도록 도와줍니다. 모션 축소 모드 구축에 대한 자세한 내용은 관련 글을 참고하시면 도움이 될 것입니다.

 

또 다른 쉬운 접근 방법은 사용자 인터랙션에 따라 애니메이션을 트리거하도록 설계하는 것입니다. 애니메이션은 사용자의 동작(예: 버튼 클릭, 메뉴 열기 등)에 대한 결과로 사용될 때 가장 효과적입니다. 반면, 자동 재생 동영상이나 캐러셀처럼 자동으로 시작되는 애니메이션은 피하는 것이 좋습니다. 만약 자동 재생이 필요하다면, 일시 정지하거나 중지할 수 있는 컨트롤을 제공하세요. 이와 관련해 WCAG 성공 기준 2.2.2(일시 중지, 중지, 숨기기)에서는 다음과 같은 요구 사항을 명확히 제시하고 있습니다:

(1) 자동으로 시작되고, (2) 5초 이상 지속되며, (3) 다른 콘텐츠와 병행하여 표시되는 이동, 깜박임 또는 스크롤 정보의 경우, 필수적인 게 아니라면 사용자가 이를 일시 중지, 중지 또는 숨길 수 있는 메커니즘이 있어야 합니다.

 

또한, 과도한 플래시는 반드시 피해야 합니다. 이는 특히 발작을 유발할 위험이 있기 때문입니다. 일반적인 규칙은 1초 이내에 3번 이상 깜박이지 않도록 하는 것입니다. 깜박임 규칙에 대한 더 자세한 내용은 WCAG 가이드라인에서 확인할 수 있습니다.

 

마지막으로, 책임감 있게 애니메이션을 사용하는 방법을 더 자세히 배우고 싶다면 발 헤드의 Accessible Web Animation(접근성 있는 웹 애니메이션)을 추천합니다. 접근성을 고려한 애니메이션은 모든 사용자에게 더 나은 경험을 제공하며, 더 많은 사용자를 포용할 수 있는 디자인을 가능하게 합니다.

 

출처 Day 16) Animations