6.2.2 정지 기능 제공

요구 사항

스크롤되거나 자동으로 갱신되는 콘텐츠는 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 합니다.

• 사용 배제: 스크롤 및 자동 갱신되는 콘텐츠를 사용하지 않습니다.
• 이동하거나 스크롤되는 콘텐츠: 사용자가 움직임을 일시 정지하고, 지나간 콘텐츠나 앞으로 나올 콘텐츠를 선택할 수 있는 컨트롤(‘앞으로 이동’, ‘뒤로 이동’, ‘정지’ 등)을 제공합니다.

왜 필요한가요

자동으로 넘어가는 배너는 저시력·인지장애가 있는 사용자가 다 읽기 전에 사라지고, 화면낭독기 사용자는 읽던 내용이 바뀌어 혼란을 겪습니다. 지체장애인은 움직이는 링크를 누르기 어렵습니다.

도움받는 사용자

• 저시력 사용자
• 지적장애·주의력 장애가 있는 사용자
• 뇌병변장애인·지체장애인
• 고령자
• 화면낭독기 사용자

적용 방법

자동 회전 캐러셀에는 정지·재생, 이전·다음 버튼을 두고, 키보드 초점이나 마우스가 올라가면 회전을 멈춥니다. 캐러셀 패턴을 참고하세요.

<section aria-roledescription="carousel" aria-label="주요 소식">
  <button type="button" aria-pressed="false" id="rot">자동 넘김 정지</button>
  <button type="button" aria-label="이전 소식">‹</button>
  <button type="button" aria-label="다음 소식">›</button>
  <div aria-live="off" id="slides">…</div>
</section>

사례

<div class="ticker">
  <button type="button">정지</button>
  <button type="button">이전</button><button type="button">다음</button>
  <ul>…</ul>
</div>

<marquee>오늘의 공지사항 …</marquee>

자주 하는 실수

• 메인 비주얼 배너가 자동으로 넘어가고 정지 버튼이 없습니다.
• 정지 버튼이 있지만 키보드로 접근할 수 없습니다.
• 실시간 순위·뉴스 티커가 계속 바뀌고 이전 항목을 다시 볼 수 없습니다.

검사 방법

• 자동으로 움직이거나 바뀌는 콘텐츠(배너, 티커, 실시간 순위, 애니메이션)를 찾습니다.
• 정지(일시 정지)와 이전·다음 이동 수단이 있는지, 키보드로도 쓸 수 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목