2.2.2 일시 정지, 정지, 숨기기

요구 사항

• 움직이거나 깜박이거나 스크롤되는 정보: 자동으로 시작되고, 5초보다 오래 지속되며, 다른 콘텐츠와 함께 표시된다면 일시 정지, 정지, 숨기기 수단을 제공해야 합니다. 그 움직임이 활동에 필수인 경우는 예외입니다.
• 자동으로 갱신되는 정보: 자동으로 시작되고 다른 콘텐츠와 함께 표시된다면 일시 정지, 정지, 숨기기, 또는 갱신 빈도 조절 수단을 제공해야 합니다. 필수인 경우는 예외입니다.

로딩 중임을 알리는 애니메이션처럼 진행 상태를 알리는 것이 필수인 경우는 예외로 볼 수 있습니다. 이 기준도 “방해 금지” 조건입니다.

왜 필요한가요

움직이는 콘텐츠는 주의력 결핍이나 인지장애가 있는 사용자의 집중을 방해하고, 읽는 속도가 느린 사용자는 내용이 바뀌기 전에 다 읽지 못합니다. 화면낭독기 사용자는 자동 갱신 때문에 읽던 위치를 잃을 수 있습니다.

도움받는 사용자

• 인지·학습 장애가 있는 사용자
• 주의력 결핍이 있는 사용자
• 시각장애인(화면낭독기 사용자)
• 저시력 사용자(화면 확대 사용자)
• 읽는 속도가 느린 사용자

적용 방법

• 자동 회전 캐러셀에는 화면에 보이는 정지/재생 버튼을 슬라이드보다 앞에 두고, 포커스나 마우스가 들어가면 회전을 멈춥니다(캐러셀 패턴).
• prefers-reduced-motion 설정을 존중하되, 그것만으로는 기준을 만족하지 않으므로 화면 컨트롤도 제공합니다.
• 실시간 주가·뉴스 티커에는 갱신 일시 정지 기능을 제공합니다.

<section aria-roledescription="carousel" aria-label="주요 소식">
  <button type="button" aria-pressed="false">자동 넘김 정지</button>
  <div aria-live="off"> ...슬라이드... </div>
</section>

자주 하는 실수

• 자동으로 넘어가는 배너에 정지 버튼이 없습니다.
• 정지 버튼이 있지만 키보드로 접근할 수 없거나 슬라이드 뒤에 있습니다.
• 움직이는 GIF 배너가 5초 넘게 반복되고 멈출 수 없습니다.

검사 방법

• 페이지를 열고 자동으로 움직이거나 갱신되는 콘텐츠를 찾습니다.
• 5초 넘게 움직인다면 키보드로 정지·일시 정지·숨기기를 할 수 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.2.2 (새 창)