WCAG 2.5.7: 끌기 동작

WCAG 2.5.7은 끌기 동작을 사용하는 모든 기능이, 끌기가 필수적인 경우를 제외하고는 끌기 없이 단일 포인터만으로도 수행될 수 있어야 한다고 요구합니다. 이는 끌기 제스처를 안정적으로 수행할 수 없는 운동 장애가 있는 사용자들도 모든 기능에 계속 접근할 수 있도록 보장합니다.

이 규칙의 의미

WCAG 2.5.7 — 끌기 동작(Dragging Movements) (레벨 AA, WCAG 2.2에서 도입됨)은 동작 수행에 끌기 동작을 사용하는 모든 기능은, 끌기 없이 단일 포인터 동작만으로도 수행 가능해야 한다고 규정합니다. 단, 끌기 동작이 그 기능에 본질적이며 다른 대체 메커니즘이 존재하지 않는 경우는 예외입니다.

끌기 동작(dragging movement)은 포인터를 누른 상태에서 유지한 채 새 위치로 이동한 뒤 놓는 상호작용으로 정의됩니다. 일반적인 예로는 드래그 앤 드롭으로 목록 항목 정렬하기, 분할 막대 핸들을 끌어 패널 크기 조정하기, 슬라이더의 손잡이를 잡아 끌어 값 변경하기, 캔버스에 그림 그리기, 칸반 카드 순서 바꾸기 등이 있습니다. 이러한 모든 패턴에는 동등한 단일 포인터 대안이 있어야 합니다. 즉, 사용자가 포인터 버튼을 누른 상태로 이동을 유지하지 않고도 활성화할 수 있는 메커니즘이 필요합니다.

단일 포인터 제약이 중요합니다. 대안이 반드시 키보드 단축키일 필요는 없습니다. 마우스 클릭, 탭, 또는 하나의 접점만 사용하고 누른 상태에서 지속적인 이동을 요구하지 않는 다른 어떤 동작도 될 수 있습니다. 예를 들어, 사용자가 트랙을 직접 클릭해 해당 값으로 점프할 수 있는 슬라이더는, 트랙 클릭이 끌기 없는 단일 포인터 동작이므로 이 기준을 충족합니다.

통과로 인정되는 사례: 드래그 가능한 목록이 위/아래 화살표 버튼이나 위치 이동 대화상자를 함께 제공하는 경우; 트랙 어디든 클릭을 받아들이는 범위 슬라이더; 숫자 입력이나 더블 클릭으로 접을 수 있는 기능을 함께 제공하는 크기 조절 패널; 드래그뿐 아니라 탐색 화살표 클릭으로도 이동할 수 있는 지도.

실패로 인정되는 사례: 항목을 재정렬하는 유일한 방법이 드래그뿐인 정렬 가능한 목록; 다른 대체 수단이 없는 분할 창 크기 조절기; 버튼 대체 수단 없이 드래그 앤 드롭만 허용하는 파일 업로드; 숫자나 텍스트 입력 대안 없이, 색조를 선택하는 유일한 방법이 그라디언트 스트립 위를 드래그하는 것뿐인 색상 선택기.

공식 예외: 이 기준은 끌기만 가능한 인터페이스를, 끌기가 본질적인 경우에 한해 명시적으로 허용합니다. 즉, 끌기를 제거하면 활동 자체가 근본적으로 바뀌거나 무효화되는 경우입니다. 제스처 드로잉 애플리케이션이나 서명 캡처 위젯이 대표적인 예입니다. 그러나 이 예외는 의도적으로 범위가 좁습니다. 대부분의 일상적인 UI 패턴(슬라이더, 정렬 가능한 목록, 크기 조절 가능한 열 등)은 본질적 끌기 시나리오로 간주되지 않습니다.

왜 중요한가

운동 장애는 전 세계 인구의 상당 부분에 영향을 미칩니다. 세계보건기구(WHO)에 따르면, 전 세계적으로 13억 명이 넘는 사람들, 즉 전 세계 인구의 약 16%가 어떤 형태로든 장애를 가지고 있으며, 이 중 운동 또는 신체 장애는 가장 흔한 범주에 속합니다. 본태성 떨림, 파킨슨병, 반복성 긴장 손상, 편마비, 척수 손상, 사지 차이와 같은 상태는 포인터 버튼을 누른 상태로 유지하면서 동시에 포인터를 정확하게 움직이는 것을 어렵거나 불가능하게 만듭니다.

손 떨림이 있는 사용자에게는, 슬라이더 손잡이를 트랙 한쪽 끝에서 다른 쪽 끝으로 끌어 이동하는 일이 단순히 불편한 수준을 넘어, 전혀 신뢰할 수 없는 작업이 될 수 있습니다. 포인터가 미끄러지거나, 끌기 동작이 중간에 취소되거나, 요구되는 정밀도가 떨림이 있는 손이 제공할 수 있는 수준을 초과할 수 있습니다. 이런 사용자들은 종종 클릭 기반 대안, 키보드 탐색, 스위치 접근 장치에 의존합니다. 어떤 기능에 접근하는 유일한 경로가 끌기 제스처라면, 그 기능 전체가 사실상 이들에게는 접근 불가능한 것입니다.

구체적인 시나리오: 듀얼 핸들 범위 슬라이더로 구현된 가격 범위 필터가 있는 전자상거래 상품 페이지를 생각해 봅시다. 미세 운동 능력이 제한된 사용자가 가격 범위를 좁히려 하지만, 어느 핸들이든 목표 위치로 안정적으로 끌어 옮길 수 없습니다. 포인터가 빗나가고, 핸들이 잘못된 값으로 튀며, 결국 좌절감 때문에 작업을 포기합니다. 같은 필터가 슬라이더 옆에 두 개의 숫자 텍스트 입력을 제공했다면, 사용자는 원하는 최소·최대 가격을 직접 입력하고 제출하기만 하면 됩니다. 이 한 가지 추가만으로, 접근 불가능했던 기능이 최소한의 개발 비용으로 완전히 접근 가능한 기능으로 바뀝니다.

운동 장애를 넘어, 어려운 환경에서 터치스크린을 사용하는 사용자들 — 대중교통에서 손잡이를 잡고 있거나, 장갑을 끼고 있거나, 스타일러스를 사용하는 경우 — 역시 단일 포인터 대안의 혜택을 봅니다. 인지적 접근성도 중요한 역할을 합니다. 더 단순한 클릭 기반 상호작용은, 공간적 메타포를 이해하면서 동시에 물리적 정밀성을 유지해야 하는 드래그 앤 드롭 작업에 비해 인지적 부담을 줄여 줍니다.

사용성과 SEO 관점에서도, 인터랙티브 컨트롤이 단순한 포인터 동작으로 접근 가능하도록 보장하는 것은, 더 깔끔한 컴포넌트 아키텍처와 더 나은 시맨틱 마크업으로 이어지는 경향이 있으며, 이는 보조 기술과 검색 엔진 크롤러 모두에 의한 발견 가능성을 향상시킵니다.

테스트 방법

자동 스캔 기준선: 페이지에 대해 axe DevTools 또는 Lighthouse를 실행해 관련 포인터나 입력 방식 문제를 찾아냅니다. axe 규칙 중 2.5.7에 직접 대응하는 것은 없지만, 2.5.x 규칙 아래에 표시된 이슈를 검토하면 유용한 맥락을 얻을 수 있습니다. axe가 키보드 지원이 불충분하다고 표시하는 컴포넌트를 기록해 두십시오. 이런 컴포넌트는 종종 끌기 전용 패턴과 겹칩니다.
모든 드래그 가능한 컴포넌트 식별: Chrome DevTools를 열고 Elements 패널로 이동한 뒤 Event Listeners 탭에서 dragstart, drag, drop, pointermove, mousemove, touchmove 핸들러를 찾습니다. 또는 페이지 소스에서 draggable 속성과 .addEventListener('dragstart' 같은 JavaScript 패턴을 검색할 수도 있습니다. 끌기를 요구하는 모든 컴포넌트를 목록으로 정리합니다.
각 드래그 가능한 컴포넌트의 대안 테스트: 식별된 각 컴포넌트에 대해, 끌기 없이 단일 포인터 클릭이나 탭만으로 동일한 결과를 얻을 수 있는지 시도합니다. 슬라이더의 경우, 원하는 위치의 트랙을 직접 클릭해 봅니다. 정렬 가능한 목록의 경우, 이동 버튼이나 컨텍스트 메뉴 옵션을 찾습니다. 크기 조절 가능한 패널의 경우, 더블 클릭이나 클릭 기반 컨트롤을 찾습니다. 대안이 없다면 이 기준은 실패입니다.
키보드 탐색 확인(보조 신호): 키보드만 사용해(탭으로 포커스 이동, 화살표 키, Enter/Space) 모든 드래그 가능한 컴포넌트를 테스트합니다. 키보드 지원은 WCAG 2.1.1에 의해 다뤄지지만, 탄탄한 키보드 지원이 존재한다는 사실은 비끌기(non-drag) 대안이 존재할 가능성과 상관관계가 높으므로 유용한 확인 단계입니다. NVDA + Firefox, VoiceOver + Safari(macOS/iOS), 또는 JAWS + Chrome을 사용해 포인팅 장치 없이도 컴포넌트의 전체 기능을 사용할 수 있는지 확인합니다.
터치 기기 검증: 모바일 기기에서 또는 Chrome DevTools의 터치 모드 기기 에뮬레이션을 사용해, 스와이프-앤-홀드 없이 탭 제스처만으로 동일한 작업을 완료해 봅니다. 모든 기능에 대해 단일 탭 또는 대상 탭 상호작용만으로 충분한지 확인합니다.
결과 문서화: 테스트한 각 컴포넌트에 대해, 기준을 충족하는 단일 포인터 대안이 존재하는지, 그 대안이 전체 기능 범위를 포괄하는지, 끌기 동작이 본질적이라고 볼 수 있는지 기록합니다. WCAG 2.5.7에 대한 Accessibility Insights for Web 수동 테스트 체크리스트를 구조화된 가이드로 활용하십시오.

수정 방법

트랙 클릭 지원이 없는 범위 슬라이더 — 잘못된 예

<!-- Slider that only responds to drag on the thumb;
     clicking the track does nothing -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

트랙 클릭 및 숫자 입력이 있는 범위 슬라이더 — 올바른 예

<!-- Native <input type='range'> provides drag, click-on-track,
     and keyboard support natively. A numeric input offers an
     additional single-pointer alternative. -->
<label for='priceRange'>Maximum price: <span id='priceValue'>500</span> TL</label>
<input type='range'
       id='priceRange'
       name='priceRange'
       min='0'
       max='1000'
       value='500'
       step='10'
       aria-valuemin='0'
       aria-valuemax='1000'
       aria-valuenow='500'
       oninput='document.getElementById("priceValue").textContent = this.value;
                document.getElementById("priceNumber").value = this.value;'>
<label for='priceNumber'>Or enter a value:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

대안이 없는 드래그 앤 드롭 정렬 목록 — 잘못된 예

<!-- Items can only be reordered by dragging.
     No move buttons or keyboard reordering exist. -->
<ul id='taskList'>
  <li draggable='true' ondragstart='handleDrag(event)' id='item1'>Task One</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item2'>Task Two</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item3'>Task Three</li>
</ul>

이동 버튼이 있는 드래그 앤 드롭 정렬 목록 — 올바른 예

<!-- Drag-and-drop is preserved for users who can use it.
     Move Up / Move Down buttons provide a single-pointer
     (and keyboard-accessible) alternative for every item. -->
<ul id='taskList' aria-label='Sortable task list'>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item1'>
    <span>Task One</span>
    <button type='button'
            onclick='moveItem("item1", -1)'
            aria-label='Move Task One up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item1", 1)'
            aria-label='Move Task One down'>
      &darr; Move Down
    </button>
  </li>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item2'>
    <span>Task Two</span>
    <button type='button'
            onclick='moveItem("item2", -1)'
            aria-label='Move Task Two up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item2", 1)'
            aria-label='Move Task Two down'>
      &darr; Move Down
    </button>
  </li>
</ul>

대안이 없는 크기 조절 분할 창 — 잘못된 예

<!-- The divider can only be repositioned by dragging.
     No percentage input or preset-size buttons exist. -->
<div class='split-pane'>
  <div class='pane pane-left' id='leftPane'>Content A</div>
  <div class='divider'
       onmousedown='startResize(event)'
       aria-hidden='true'></div>
  <div class='pane pane-right' id='rightPane'>Content B</div>
</div>

사전 설정 크기 버튼이 있는 크기 조절 분할 창 — 올바른 예

<!-- The divider still supports dragging, but preset-layout
     buttons allow single-pointer repositioning. The divider
     is also keyboard-focusable with arrow-key support. -->
<div class='split-pane-wrapper'>
  <div class='split-controls' role='group' aria-label='Panel size presets'>
    <button type='button' onclick='setSplit(25)'>25 / 75</button>
    <button type='button' onclick='setsplit(50)'>50 / 50</button>
    <button type='button' onclick='setSplit(75)'>75 / 25</button>
  </div>
  <div class='split-pane'>
    <div class='pane pane-left' id='leftPane'>Content A</div>
    <div class='divider'
         role='separator'
         tabindex='0'
         aria-label='Resize panels'
         aria-valuenow='50'
         aria-valuemin='10'
         aria-valuemax='90'
         onmousedown='startResize(event)'
         onkeydown='resizeWithKeys(event)'>
    </div>
    <div class='pane pane-right' id='rightPane'>Content B</div>
  </div>
</div>

자주 발생하는 실수

슬라이더를 트랙 클릭 지원 없이 커스텀 <div> 기반 컴포넌트로 구현하는 것. 손잡이 요소를 끌기에만 전적으로 의존하고, 값이 클릭한 위치로 점프하도록 트랙 요소 자체의 click 이벤트를 처리하지 않는 경우입니다.
드래그 앤 드롭 파일 업로드만으로 충분하다고 가정하는 것. 드롭 존과 함께 필수 폴백으로 눈에 보이고 클릭 가능한 파일 탐색 버튼(<input type='file'>)을 제공하지 않는 경우입니다.
본질성 예외를 지나치게 넓게 적용하는 것 — 예를 들어, 이동 버튼만으로도 기능 손실 없이 사용자 요구를 완전히 충족할 수 있는 할 일 목록이나 칸반 보드를 “본질적 끌기”로 취급하는 경우입니다.
단일 포인터 대안 없이 키보드 대안만 제공하는 것. WCAG 2.5.7이 키보드 지원만으로 충족된다고 잘못 해석하는 경우입니다. 이 기준은 단일 포인터 경로를 명시적으로 요구하며, 키보드 전용 해결책은 2.1.1을 다루지 2.5.7을 다루지 않습니다.
이동 버튼이나 숫자 입력을 호버 상태나 2차 메뉴 뒤에 숨기는 것. 이때 해당 호버나 메뉴 자체가 드래그 상호작용이나 복잡한 포인터 시퀀스를 요구한다면, 대안의 접근성을 사실상 무효화하게 됩니다.
터치 기기를 간과하는 것. 데스크톱 마우스로만 드래그 대안을 테스트한 뒤, 드래그 제스처 동작과 그 대안이 데스크톱 구현과 크게 다를 수 있는 터치스크린 사용자에게 그대로 배포하는 경우입니다.
CSS에서 슬라이더 트랙에 pointer-events: none을 사용하는 것. 끌기 중 우발적인 클릭을 막기 위해 이렇게 했다가, 2.5.7이 요구하는 트랙 클릭 대안을 의도치 않게 차단하는 경우입니다.
지도 이동/드래그 상호작용에 대한 대안을 제공하지 않는 것. 임베디드 지도나 커스텀 캔버스 기반 시각화에서 방향 화살표 버튼 클릭이나 좌표 입력이 충분한 단일 포인터 대안이 될 수 있음에도 이를 제공하지 않는 경우입니다.
단일 포인터 대안을 또 다른 드래그 앤 드롭 대상으로 구현하는 것. 예를 들어, 여전히 드래그가 필요한 “여기에 드롭” 영역을 만드는 것처럼, 버튼이나 텍스트 입력 같은 진정으로 다른 상호작용 모델이 아닌 경우입니다.
드래그 가능한 컴포넌트의 전체 값 범위에 대해 대안을 테스트하지 않는 것. 사용자가 트랙의 몇몇 사전 설정 위치에만 클릭할 수 있고 임의의 위치에는 클릭할 수 없는 슬라이더는, 끌기 버전이 연속 값을 지원한다면 완전한 대안을 제공하지 못하는 것입니다.

터키 접근성 규정과의 관계

터키의 Cumhurbaşkanlığı Genelgesi 2025/10(대통령령 2025/10)은 2025년 6월 21일, Resmî Gazete(공식 관보) 32933호에 게재되었으며, 디지털 서비스에 대한 포괄적인 국가 접근성 프레임워크를 수립합니다. 이 일반지침은 해당 기관이 웹 콘텐츠 접근성 지침(WCAG)을 준수할 것을 요구하며, 특히 Aile ve Sosyal Hizmetler Bakanlığı(가족·사회서비스부)가 발급하는 공식 인증 마크인 Erişilebilirlik Logosu(접근성 로고)를 획득하기 위한 기준으로 레벨 AA 준수를 명시적으로 언급합니다.

WCAG 2.5.7은 WCAG 2.2에서 도입된 레벨 AA 기준으로서, 접근성 로고를 획득하고 유지하는 데 필요한 요구사항 범위에 포함됩니다. 제품 필터링 슬라이더나 정렬 가능한 위시리스트를 사용하는 전자상거래 플랫폼, 포트폴리오 관리 대시보드를 제공하는 은행 애플리케이션, 날짜 범위 선택기를 사용하는 여행사 예약 도구 등, 드래그 앤 드롭 상호작용에 의존하는 조직의 경우 2.5.7을 준수하지 않으면 인증에 대한 직접적인 장애 요인이 됩니다.

Cumhurbaşkanlığı Genelgesi 2025/10의 적용 대상에는 터키 디지털 경제의 폭넓은 영역이 포함됩니다. 중앙 및 지방 수준의 공공 기관 및 정부 기관, Bankacılık Düzenleme ve Denetleme Kurumu(BDDK, 은행 규제·감독 기관)의 규제를 받는 은행 및 금융 서비스 제공자, 터키에서 운영되는 전자상거래 플랫폼, 병원 및 민간 의료 서비스 제공자, 20만 명 이상의 가입자를 보유한 통신 사업자, 여행사 및 민간 운송 회사, Milli Eğitim Bakanlığı(MoNE, 교육부)의 인가를 받은 사립 학교 등이 이에 해당합니다.

이러한 조직에게 끌기 상호작용에 대한 단일 포인터 대안을 제공하지 않는 것은 단순한 기술적 미비가 아니라, 인증을 방해하고 규제 기관의 감시 대상이 되며, 운동 장애가 있는 상당수 사용자를 배제할 수 있는 준수상의 공백입니다. 터키의 장애 통계는 전 세계 추세와 유사하며, 수백만 명의 거주자가 미세 운동 조절에 영향을 미치는 상태를 가지고 있습니다. 끌기 제스처에만 의존하는 디지털 서비스는 이 인구 집단에게 불필요한 장벽을 세우는 셈입니다.

실무적으로, Erişilebilirlik Logosu를 추구하는 조직은 접근성 감사 체크리스트에 WCAG 2.5.7을 포함하고, 끌기 기능으로 구현된 모든 인터랙티브 컴포넌트가 기준을 충족하는 대안을 갖추었는지 검토해야 하며, 본질성 예외 주장 등을 포함한 준수 결정 사항을 Erişilebilirlik Beyanı(접근성 선언문)의 일부로 문서화해야 합니다. 이 선언문은 일반지침에 따라 해당 기관이 공개하고 최신 상태로 유지해야 하는 문서입니다.