WCAG 2.2.2: 일시 정지, 중지, 숨기기

WCAG 2.2.2는 움직이거나 깜박이거나 스크롤되거나 자동으로 업데이트되는 콘텐츠를 사용자가 일시 정지하거나, 중지하거나, 숨길 수 있어야 한다고 요구합니다. 이는 인지 장애, 전정 장애, 주의력 관련 질환이 있는 사람들이 스스로 제어할 수 없는 콘텐츠로부터 보호받도록 하기 위한 것입니다.

이 규칙의 의미

WCAG 2.2.2(Pause, Stop, Hide)는 Operable 원칙 아래의 레벨 A 성공 기준이다. 이 기준은 페이지에서 움직이거나, 깜빡이거나, 스크롤되거나, 자동으로 업데이트되는 모든 콘텐츠를 규율한다. 이 규칙은 콘텐츠의 동작 방식에 따라 두 가지 별도의 요구 사항을 설정한다.

자동으로 시작되고 5초를 초과하여 지속되며 다른 콘텐츠와 함께 제시되는 움직이는, 깜빡이는, 또는 스크롤되는 콘텐츠의 경우, 사용자는 이를 일시 정지(pause), 중지(stop), 또는 숨기기(hide) 위한 메커니즘을 제공받아야 한다. 여기에 CSS 애니메이션, JavaScript 기반 캐러셀, 마키(marquee) 텍스트, 깜빡이는 요소, 스크롤되는 티커, 애니메이티드 배너 등이 포함된다.

자동으로 업데이트되는 콘텐츠 — 예를 들어 일정 간격으로 새로고침되는 실시간 점수판, 주가 티커, 소셜 미디어 피드, 뉴스 헤드라인 등 — 의 경우, 사용자는 업데이트를 일시 정지, 중지, 숨기거나 업데이트 빈도를 제어할 수 있어야 한다.

합격하려면, 명확히 조작 가능한 컨트롤(버튼, 키보드 단축키 또는 유사한 메커니즘)이 애니메이션 콘텐츠 이전 또는 그와 함께 제공되어야 하며, 사용자가 도움 없이 이를 고정하거나 제거할 수 있어야 한다. 컨트롤 자체도 접근 가능해야 한다 — 키보드로 도달 가능하고, 적절히 레이블링되어 있으며, 마우스 없이 사용할 수 있어야 한다.

다음 중 하나라도 존재하면 실패가 된다: 중지할 수 없는 <blink> 요소 또는 CSS text-decoration: blink; 일시 정지 메커니즘이 없는 <marquee> 요소; 일시 정지 버튼 없이 무기한 재생되는 애니메이티드 캐러셀; 제어할 수 없는 자동 새로고침 뉴스 위젯; 중지할 방법이 없는 루프 배경 비디오.

WCAG는 두 가지 명시적인 예외를 정의한다. 첫째, 5초 이하로 지속되는 애니메이션에는 이 규칙이 적용되지 않는다. 짧은 움직임은 스스로 끝나기 때문에 지속적인 방해를 만들지 않기 때문이다. 둘째, 애니메이션이 활동에 필수적인 경우에는 적용되지 않는다 — 예를 들어, 실시간 주가가 페이지의 전체 목적이며 이를 일시 정지하면 콘텐츠의 본질이 근본적으로 바뀌게 되는 실시간 주식 거래 인터페이스가 이에 해당한다. 이러한 예외는 매우 좁게 정의되어 있으며, 구현을 회피하기 위한 포괄적인 변명으로 사용되어서는 안 된다.

왜 중요한가

움직이거나 깜빡이는 콘텐츠는 여러 서로 다른 장애 집단에 심각한 장벽을 만들며, 그 결과는 가벼운 산만함에서 실제 의학적 피해에 이르기까지 다양하다.

주의력결핍 과잉행동장애(ADHD) 또는 기타 인지 장애가 있는 사람들은 주변 시야에 애니메이션 요소가 있을 때 페이지의 주요 콘텐츠에 집중하는 것이 사실상 불가능한 경우가 많다. 인간의 뇌는 생존 메커니즘으로서 움직임에 주의를 기울이도록 신경학적으로 설계되어 있으며, ADHD가 있는 사람들은 신경정상(neurotypical) 사용자보다 이 끌림을 훨씬 더 강하게 경험한다. 뉴스 페이지 하단의 스크롤 티커나 사이드바의 애니메이티드 배너 광고는 본문 기사를 사실상 읽을 수 없게 만들 수 있다.

전정(vestibular) 장애 — 미로염(labyrinthitis), 양성 돌발성 체위성 현훈(BPPV), 메니에르병(Ménière's disease) 등을 포함 — 가 있는 사람들은 화면상의 특정 유형의 움직임에 노출될 때 메스꺼움, 어지러움, 방향 감각 상실을 경험할 수 있다. 이들에게 루프 캐러셀이나 패럴랙스 스크롤 효과는 단순히 성가신 수준이 아니라, 페이지를 완전히 떠나게 만들 정도의 신체적 불편을 유발할 수 있다. 전정 장애는 미국에서만 40세 이상 성인의 약 35%에 영향을 미치는 것으로 추정된다.

광과민성(photosensitive) 간질이 있는 사람들은 특정 주파수로 깜빡이거나 번쩍이는 콘텐츠로 인해 발작 위험에 노출된다. 깜빡이는 콘텐츠는 WCAG 2.3.1에서 더 직접적으로 다루지만, 2.2.2에서 다루는 blinking 콘텐츠 역시 발작을 유발할 수 있는 요인이 될 수 있다. 세계보건기구(WHO)는 전 세계적으로 약 5천만 명이 간질을 앓고 있다고 추정한다.

스크린 리더 사용자에게 자동 업데이트되는 콘텐츠는 동일하게 방해적인 문제를 만든다. 라이브 영역이 새로고침되면 스크린 리더는 새로운 콘텐츠를 읽어 주는데, 이는 사용자가 다른 내용을 듣는 도중 문장을 끊어 버린다. 업데이트를 일시 정지할 수 없다면, 라이브 콘텐츠가 있는 페이지를 탐색하는 것은 극도로 어려워진다.

다음과 같은 실제 시나리오를 생각해 보자. ADHD가 있는 사용자가 터키 전자상거래 은행 포털에서 온라인 계좌 이체를 완료하고 있다. 헤더에는 3초마다 네 가지 프로모션을 순환하는 회전 배너가 있다. 사용자는 올바른 계좌번호를 입력하는 데 집중할 수 없다. 전사(轉寫) 오류를 일으켜 이체가 실패하고, 전체 과정을 다시 반복해야 한다. 배너에 일시 정지 버튼이 있었다면 작업은 간단했을 것이다. 이는 가상의 예가 아니라, 접근성 감사자가 정기적으로 접하는 문서화된 상호작용 실패 유형이다.

장애인의 접근성을 넘어, 제어할 수 없는 움직임을 제거하면 모든 사용자의 사용성이 향상되고, 인지 부하가 줄어들며, 레이아웃 시프트와 불필요한 JavaScript 실행을 줄여 Core Web Vitals 점수와 같은 SEO 신호를 개선할 수 있다.

테스트 방법

axe DevTools 또는 Lighthouse를 사용한 자동 스캔: Chrome 또는 Firefox에서 페이지를 연다. DevTools(F12)를 열고 axe DevTools 패널 또는 Lighthouse Accessibility 감사로 이동한 뒤 전체 스캔을 실행한다. 결과에서 blink 또는 marquee로 태그된 위반을 특히 확인한다. 각 위반에는 DOM 노드, 영향 수준(serious 또는 critical), 수정 가이드에 대한 링크가 포함된다. 자동 스캔이 깨끗하다고 해서 완전한 준수를 의미하는 것은 아니므로, 수동 단계로 진행해야 한다.
CSS 및 JavaScript 애니메이션에 대한 수동 검사: 페이지를 시각적으로 검토하여 움직이거나, 스크롤되거나, 깜빡이거나, 자동으로 업데이트되는 모든 콘텐츠를 찾는다. 각 인스턴스에 대해, 애니메이션 콘텐츠 이전 또는 그와 함께 표시되는 일시 정지, 중지, 숨기기 컨트롤이 존재하고 눈에 띄는지 확인한다. 컨트롤이 키보드로 도달 가능한지(Tab으로 이동) 확인하고, Enter 또는 Space를 눌렀을 때 활성화되는지 검증한다. 컨트롤을 활성화했을 때 실제로 움직임이 완전히 멈추는지, 단지 속도만 줄어드는 것은 아닌지도 확인한다.
키보드만 사용한 테스트: 마우스를 분리한다. Tab 키를 사용해 전체 페이지를 탐색한다. 키보드만으로 모든 애니메이션 요소의 일시 정지/중지 컨트롤에 도달할 수 있고, 컨트롤에 시각적인 포커스 표시가 있는지 확인한다. 컨트롤에 도달할 수 없거나, 컨트롤에 도달하기 위해 먼저 애니메이션 콘텐츠를 Tab으로 모두 지나가야 하는 경우(이는 방향 감각을 잃게 만들 수 있다) 실패에 해당한다.
NVDA와 Firefox를 사용한 스크린 리더 테스트: NVDA를 실행하고 Firefox에서 페이지를 연 뒤, 읽는 도중 방해하는 라이브 영역 알림이 있는지 듣는다. 자동 업데이트 콘텐츠로 이동하여, 일시 정지 컨트롤을 사용했을 때 NVDA 알림이 조용해지는지 확인한다. 동일한 절차를 따라 JAWS와 Chrome, macOS의 VoiceOver와 Safari에서도 테스트한다.
자동 업데이트 콘텐츠 확인: 타이머로 새로고침되는 콘텐츠(뉴스 피드, 대시보드, 점수판 등)의 경우, 새로고침 간격을 기록한다. 업데이트를 일시 정지하거나 빈도를 제어할 수 있는 메커니즘이 있는지 확인한다. 가능하다면 업데이트를 수동으로 트리거하고, 사용자가 선택했을 때만 스크린 리더가 이를 알리고, 원치 않을 때는 알리지 않는지 검증한다.
감소된 모션 선호 설정 테스트: 운영체제에서 "동작 줄이기(Reduce Motion)" 접근성 설정을 활성화한다. 페이지를 다시 로드하고 애니메이션이 prefers-reduced-motion CSS 미디어 쿼리를 준수하는지 확인한다. 이는 WCAG 2.2.2에서 엄격히 요구되는 사항은 아니지만, 강력한 보완 기법이며 감사자들이 점점 더 기대하는 사항이다.

수정 방법

더 이상 사용되지 않는 <marquee> 요소 — 잘못된 예

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

더 이상 사용되지 않는 <marquee> 요소 — 올바른 예

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

더 이상 사용되지 않는 <blink> 요소 — 잘못된 예

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

더 이상 사용되지 않는 <blink> 요소 — 올바른 예

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

일시 정지 컨트롤이 없는 자동 재생 캐러셀 — 잘못된 예

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

일시 정지 컨트롤이 없는 자동 재생 캐러셀 — 올바른 예

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

자동 업데이트 라이브 데이터 위젯 — 잘못된 예

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

자동 업데이트 라이브 데이터 위젯 — 올바른 예

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

일반적인 실수

프로덕션 HTML 어디에서든 "레트로" 또는 장식용 스타일링을 위해서라도 <marquee>나 <blink> 요소를 사용하는 것 — 두 요소 모두 더 이상 사용되지 않고 의미론적으로 무의미하며, 2.2.2를 항상 실패하게 만들며 제거 외에는 수정 경로가 없다.
마우스 오버 시에만 보이는 일시 정지 버튼을 추가하여, Tab으로 탐색하고 마우스 오버를 사용하지 않는 키보드 전용 사용자(이 기능이 가장 필요한 사용자)에게 접근 불가능하게 만드는 것.
일시 정지 버튼을 DOM에서 애니메이션 콘텐츠보다 먼저 Tab 키로 도달할 수 없게 구현하여, 사용자가 움직임을 멈추기 전에 방향 감각을 잃게 만드는 애니메이션 콘텐츠를 먼저 모두 지나가도록 강제하는 것.
CSS에서 animation-play-state: paused를 사용해 시각적으로 애니메이션을 멈추지만, 콘텐츠 업데이트를 구동하는 JavaScript setInterval 또는 requestAnimationFrame 루프를 비활성화하지 않는 것 — 시각적으로는 멈춘 것처럼 보이지만 DOM은 계속 변경되어 스크린 리더를 계속 방해한다.
사용자가 일시 정지 버튼을 눌렀을 때도 캐러셀이나 티커에 aria-live='polite'를 설정한 채로 두는 것 — 시각적 애니메이션은 멈췄지만 라이브 영역은 DOM 변경을 계속 스크린 리더 사용자에게 알린다.
<video> 요소에서 autoplay=false에만 의존하고 브라우저 전반의 동작을 검증하지 않는 것; 일부 브라우저와 플러그인 조합은 이 속성을 무시하고, 작성자의 의도와 사용자의 기대에 반해 비디오를 자동 재생시킨다.
5초 예외를 일반적인 유예 기간으로 취급하여, 각 슬라이드 전환이 5초 미만이라는 가정하에 슬라이드를 4초씩 보여주는 캐러셀을 구현하는 것 — 애니메이션 전체는 연속적이며 5초를 훨씬 초과해 지속되므로 예외가 적용되지 않는다.
애니메이션을 멈추는 일시 정지 컨트롤을 제공하지만, 일시 정지 상태를 시각적으로 표시하지 않아 사용자가 자신의 행동이 효과가 있었는지 확신할 수 없게 만드는 것 — 버튼은 현재 상태를 반영해야 하며, 이상적으로는 aria-pressed를 사용하고 레이블을 "Pause"와 "Play" 사이에서 업데이트해야 한다.
prefers-reduced-motion을 CSS 전환에만 적용하고, CSS와 독립적으로 실행되는 JavaScript 기반 애니메이션은 무시하는 것 — 시스템 수준의 동작 줄이기 설정을 활성화한 사용자도 여전히 페이지에서 움직임을 경험하게 된다.
tabindex='-1'을 설정하거나, 마우스 상호작용으로만 조건부로 표시되는 display:none 컨테이너 안에 컨트롤을 넣어 일시 정지 컨트롤을 키보드 탭 순서 밖에 두는 것 — 컨트롤은 항상 키보드 탐색으로 도달 가능해야 한다.

터키 접근성 규정과의 관계

2025년 6월 21일자 관보(Resmî Gazete) 32933호에 게재된 터키 대통령령 2025/10호는 WCAG 2.2와 정렬된 의무적인 웹 및 모바일 접근성 요구 사항을 수립한다. WCAG 2.2.2 Pause, Stop, Hide는 레벨 A 기준으로, 준수의 가장 기초적인 단계에 해당하며, 회람의 적용 대상이 되는 모든 기관에 대해 예외 없이 의무적이다.

이 회람은 단계적 준수 기한을 설정한다. 공공 기관 및 단체는 회람 공포일로부터 1년 이내에 레벨 A 완전 준수에 도달해야 하며, 민간 부문 사업자는 2년 이내에 이를 달성해야 한다. 자발적 선택 참여는 없으며, 회람은 법적 의무를 부과하고, 비준수 디지털 자산은 행정 감독과 잠재적인 집행 조치의 대상이 된다.

회람의 적용 대상에는 터키 디지털 서비스의 광범위한 범주가 포함된다. 모든 공공 기관 및 정부 부처; 터키에서 운영되는 전자상거래 플랫폼; 은행 및 금융 서비스 기관; 병원 및 민간 의료 제공자; 200,000명 이상의 가입자를 보유한 통신 사업자; 여행사; 민간 운송 회사; 그리고 국립교육부(Millî Eğitim Bakanlığı, MoNE)의 인가를 받은 민간 학교가 이에 해당한다.

이들 기관에 대해 WCAG 2.2.2는 직접적이고 실질적인 함의를 가진다. 일시 정지 버튼이 없는 자동 재생 상품 캐러셀을 가진 전자상거래 사이트는 위반 상태다. 중지 컨트롤 없이 스크롤되는 보안 공지 티커를 사용하는 은행의 인터넷 뱅킹 포털은 비준수다. 중단할 수 없는 애니메이션 알림을 사용하는 병원의 예약 페이지는 요구 사항을 충족하지 못한다. 루프 배경 비디오에 눈에 띄는 중지 컨트롤이 없는 통신 회사의 홈페이지는 기한 전에 이를 수정해야 한다.

법적 의무를 넘어, 터키 접근성 법은 EU 웹 접근성 지침과 유럽 접근성법(EAA)으로 대표되는 더 넓은 유럽의 흐름과 정렬되어 있다. 터키 기업이 유럽 시장으로 확장하거나 유럽 사용자를 대상으로 서비스를 제공함에 따라, WCAG 2.2 레벨 A 준수 — 기준 2.2.2를 포함 — 는 이중 준수 요구 사항이 된다. Pause, Stop, Hide를 올바르게 구현하는 것은 따라서 국내 법적 필수 사항이자 국제 디지털 존재감을 가진 터키 조직에 대한 전략적 자산이다.