정지 기능 제공

무엇을 요구하나요?

자동으로 움직이거나 바뀌는 콘텐츠(슬라이드, 회전 배너, 흐르는 글자, 반복 애니메이션)는 사용자가 정지, 이전, 다음으로 조작할 수 있어야 합니다. 움직이는 콘텐츠는 읽는 속도가 느린 사용자, 주의력 장애가 있는 사용자, 화면 낭독기 사용자에게 큰 방해가 됩니다.

자주 틀리는 예

1. 정지 버튼 없는 자동 슬라이드

<div class="slider" data-autoplay="3000">
  <div class="slide">…</div>
  <div class="slide">…</div>
</div>

<section class="slider" aria-roledescription="슬라이드" aria-label="이벤트 배너">
  <div class="controls">
    <button type="button" class="prev">이전 슬라이드</button>
    <button type="button" class="toggle" aria-pressed="false">자동 넘김 정지</button>
    <button type="button" class="next">다음 슬라이드</button>
  </div>
  <div class="slide" role="group" aria-label="1 / 3">…</div>
</section>

• 조작 버튼은 슬라이드보다 앞에 두면 키보드 사용자가 먼저 멈출 수 있습니다.
• 초점이 슬라이더 안에 있을 때는 자동 넘김을 멈추세요.

2. marquee로 흐르는 공지

<marquee>오늘 오후 6시 시스템 점검 예정</marquee>

<p class="notice">오늘 오후 6시 시스템 점검 예정</p>

3. 움직임을 줄이고 싶은 사용자 설정 무시

운영체제의 “동작 줄이기” 설정을 켠 사용자에게는 애니메이션을 끄세요.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

확인하는 방법

1. 페이지를 열고 저절로 움직이는 것이 있는지 지켜보세요(배너, 공지, 숫자 카운터, 배경 영상).
2. 각각에 정지 버튼이 있고 키보드(Tab, Enter)로 누를 수 있는지 확인하세요.
3. 확장 프로그램 페이지 검사는 marquee·blink 요소를 찾아줍니다. 스크립트 슬라이더는 직접 확인해야 합니다.