본문 바로가기

2.5.7 끌기 동작

(Level AA)

목표
사용자 작업을 끌기에 의존하지 않는다.
할 일
끌기가 포함된 모든 작업에 대해 간단한 포인터 대체 수단을 제공한다.
중요성
어떤 사람들은 마우스로 항목을 끌 수 없다.

성공 기준(SC)

조작을 위해 끌기 동작을 사용하는 모든 기능은, 끌기 동작이 필수적이거나 해당 기능이 사용자 에이전트에 의해 결정되고 저작자가 수정하지 않은 경우를 제외하고는, 끌기 없이 단일 포인터로 구현할 수 있어야 한다.

참고

이 성공기준은 포인터 동작을 해석하는 웹 콘텐츠에 적용된다. (즉, 사용자 에이전트나 보조 기술을 조작하는 데 요구되는 동작에는 적용되지 않는다.)

이 성공 기준의 목적은 끌기 동작을 사용하는 기능이 요소를 끄는 데 필요한 조작 능력 없이 없어도 다른 단일 포인터 작동 방식을 갖추도록 보장하는 것이다.

어떤 사람들은 끌기 동작을 정확하게 수행 할 수 없다. 또 다른 사람들은 트랙볼, 헤드 포인터, 시선 추적 시스템이나 음성 제어 마우스 에뮬레이터 같은 특수하거나 개조된 입력 장치를 사용하기도 한다. 이들에게는 끌기가 번거롭고 오류가 발생하기 쉽다.

인터페이스가 끌기 동작을 사용하는 기능을 구현할 때, 사용자는 네 가지 개별 작업을 수행한다.

  1. 탭하거나 클릭해서 시작점을 설정한 뒤,
  2. 그 접촉 대상을 길게 누른 상태에서
  3. 포인터 위치를 조정한 후
  4. 끝에서 포인터를 놓는다.

모든 사용자가 해당 접촉 대상을 정확하게 누른 상태에서 포인터 위치를 변경할 수 있는 것은 아니다. 포인터(마우스, 펜, 터치 접촉)를 사용하는 운동 장애가 있는 사용자가 기능을 사용할 수 있도록 대체 수단이 제공되어야 한다.

조절기 위에 손 모양 마우스 포인터가 있는 범위 입력 슬라이더

그림 1. 끌기를 할 수 있는 흔한 수평 범위 슬라이더 예제

예를 들어, 범위 슬라이더는 조절기를 끌어서 조작하지만, 값을 바꾸는 대체 포인터 방식으로 슬라이더 트랙의 아무 곳이나 클릭하거나 탭하여 조절기를 그 위치로 옮길 수 있다.

마우스로 슬라이드 하나를 끌어서 다음 슬라이드가 나타나는 모습을 보여주는 끌기 가능한 콘텐츠 캐러셀

그림 2. 끌기가 가능한 흔한 콘텐츠 캐러셀의 예제

터치스크린 장치를 사용하는 사람은 실제 키보드를 사용하지 않을 수 있으므로, 이 성공기준은 키보드 접근성과는 별개다. 끌어서 놓는 컨트롤을 마주치면 탭 이동이나 화살표 키 같은 키보드 고유의 상호작용이 불가능할 수 있다. 하지만 텍스트 입력을 제공하는 것이 허용 가능한 단일 포인터 대체수단이 될 수 있다. 예를 들어, 슬라이더 옆에 입력란이 있으면 모든 사용자가 슬라이더에 정확한 값을 입력할 수 있게 된다. 이런 상황에서 터치 사용자에게 나타나는 화면 키보드는 영숫자 값을 입력할 수 있는 단일 포인터 수단을 제공한다.

이 기준은 사용자 에이전트에 의해 활성화된 스크롤 및 끌기 제스처에는 적용되지 않는다. 이러한 것에 대해 접근성을 지원하는 메커니즘을 제공하는 것은 사용자 에이전트의 책임이기 때문이다. 마우스로 조작하는 브라우저에서 사용자는 보통 브라우저의 스크롤바를 끌어 콘텐츠를 스크롤한다. 터치 스크린 브라우저에서 사용자는 보통 화면의 페이지를 “끄는” 방식으로 스크롤한다. 마찬가지로, 대부분의 터치 스크린 브라우저는 페이지를 새로고침/재로드하기 위해 “끌어서 새로고침” 제스처를 제공한다. 이 모든 경우에 기능은 콘텐츠에 의해 구현되기보다 브라우저에 의해 제공되므로 이 기준은 적용되지 않는다. 이 기준은 콘텐츠 섹션을 스크롤 가능하게 만드는 CSS overflow와 같은 기법의 사용에도 적용되지 않는다. 이러한 상황에서도 실제 스크롤 메커니즘은 사용자 에이전트에 의해 제공되기 때문이다. 콘텐츠가 사용자 에이전트 자체의 스크롤 기능을 적극적으로 차단하거나 자체적인 스크롤 메커니즘을 구현하는 경우에는 기준이 적용된다. 이러한 경우 스크롤/끌기 제스처는 콘텐츠 자체에 의해 해석되고 처리되므로 콘텐츠 저작자의 책임에 속하게 된다.

키보드 접근성 요구사항과의 관계

Section titled “키보드 접근성 요구사항과의 관계”

성공 기준 2.1.1 키보드2.1.3 키보드(예외 없음)에서는 끌기 기능이 키보드로 접근 가능해야 한다. 하지만 끌기 작업에 대해 키보드가 동등한 기능을 한다고 해서 자동으로 이 성공 기준을 충족하는 것은 아니다. 단, 해당 키보드 작업이 포인터로 클릭하거나 탭할 수 있는 컨트롤도 함께 제공하는 경우는 제외된다. 끌기 및 키보드 컨트롤로는 작동하지만 클릭이나 탭만으로는 여전히 작동하지 않는 인터페이스를 만드는 것도 가능하다. 단일 포인터 조작을 통해 키보드 접근성과 조작성을 모두 만족하는 끌기 대체 수단으로 다양한 디자인을 만들 수 있지만, 이 두 가지 요구 사항은 독립적으로 평가되어야 한다.

경로 기반 포인터 제스처와 끌기 동작 구별하기

Section titled “경로 기반 포인터 제스처와 끌기 동작 구별하기”

이 성공 기준은 사용자가 요소를 ‘잡고’ 다른 위치로 옮기는 일반적인 끌기 동작에 적용된다. 포인터가 타겟을 집거나 잡기 위해 맞물리고 나면, 끌기 동작의 방향은 상호작용에 전혀 영향을 주지 않는다. 성공 기준 2.5.1 포인터 제스처는 다중 지점 제스처뿐만 아니라 경로 기반 제스처를 다룬다. 포인터 제스처의 경우 포인터 움직임의 방향이 중요하다. 하지만 어떤 작업이 끌기 동작(슬라이더 조절기를 잡고 움직인 후 놓는 것 등)과 경로 기반 제스처(슬라이더 트랙을 정확히 따라가야만 하고 그렇지 않으면 조절기를 놓치게 되는 경우 등)를 모두 포함한다면, 두 성공 기준의 요구사항을 모두 충족하지 못할 수 있다.

같은 페이지에서 끌기 동작에 대한 대체 수단

Section titled “같은 페이지에서 끌기 동작에 대한 대체 수단”

끌기 동작을 통해 기능을 실행할 수 있고 끌기 없이 단일 포인터 접근을 허용하는 동등한 옵션이 존재한다면, 이 성공 기준을 충족한다. 기능이 동등하다면 굳이 동일한 컴포넌트일 필요는 없다. 포인터를 끌어서 색상을 변경할 수 있는 색상환을 예로 들 수 있다. 또한, 색상 값을 숫자로 입력할 수 있는 텍스트 필드를 제공하면 끌기 동작 없이도 색상을 정의할 수 있다. (참고로 텍스트 입력은 장치에 구애받지 않는 것으로 간주해. 문자를 입력하는 것이 목적이지만 텍스트 입력은 음성, 포인터, 키보드 등을 통해 이루어질 수 있다.)

  • 끌기 동작을 수행하는 데 어려움이 있는 사용자도 포인터 인터페이스로 상호작용 할 수 있다.
  • 지도를 사용하면 사용자가 지도 화면을 끌 수 있으며, 화면을 이동할 수 있는 상/하/좌/우 버튼도 제공한다.
  • 정렬 가능한 요소 목록은 목록 요소를 탭하거나 클릭한 후, 해당 컨트롤을 단순히 탭하거나 클릭하여 목록에서 요소를 위 아래로 이동할 수 있는 대체 수단을 제공할 수 있다.
  • 사용자가 열 사이에서 항목을 끌어다 놓을 수 있는 작업판이, 항목을 탭하거나 클릭한 후 팝업 메뉴도 추가로 제공하여, 팝업 메뉴 항목을 탭하거나 클릭함으로써 선택한 요소를 다른 열로 옮길 수 있게 한다.
  • 현재 선택된 색상의 마커를 다른 위치로 끌어서 값을 설정할 수 있는 방사형 컨트롤 위젯(색상환)은 색상환의 다른 위치를 탭하거나 클릭하여 다른 색상 값을 선택할 수도 있다.
  • 현재 값을 표시하는 시각적 표시기(조절기)를 끌어 값을 설정할 수 있는 범위 슬라이더 컨트롤 위젯은 슬라이더 트랙의 임의의 지점을 탭하거나 클릭하여 값을 변경하고 조절기를 해당 위치로 설정할 수 있다.
  • 여러 사람이 있는 사진에서 한 사람에게 선물을 끌어다 놓을 수 있는 위젯은 사용자가 메뉴에서 선물을 받을 사람을 선택할 수 있는 대체수단을 제공해야 한다.
  • 그래픽 인터페이스는 사용자가 사각형을 그릴 수 있도록 한다. 사용자가 포인터를 눌러서 첫 지점으로 설정하고, 두번째 지점으로 포인터를 끈후, 포인터를 떼면서 모서리 위치를 설정한다. 끌지 않는 대안으로 사용자는 선택 모드를 활성화하고 포인터를 누른 채로 끌 필요 없이 첫 번째 모서리를 클릭/탭한 다음 반대쪽 모서리를 클릭/탭할 수 있다.
  • 온라인 퀴즈에서 사용자는 첫 번째 열의 각 항목과 두 번째 열의 해당 대응 항목 사이에 연결선을 그려야 한다. 이 선을 수동으로 그릴 수 없거나 원하지 않는 사용자는 첫 번째 열의 한 항목을 클릭/탭한 다음 두 번째 열의 항목을 클릭/탭하면 연결선이 자동으로 그려진다.
  • 정의된 프로세스의 상태를 나타내는 여러 개의 수직 열이 있는 칸반 위젯은 사용자가 요소를 끌어서 다른 열로 이동할 수 있도록 한다. 사용자는 단일 탭이나 클릭으로 요소를 선택한 다음 화살표 버튼을 활성화하여 선택한 요소를 이동함으로써 이를 수행할 수도 있다.
  • 뉴스 사이트에는 항목을 보기 안으로 이동하기 위해 끌 수 있는 다양한 뉴스 티저가 포함된 수평 캐로셀이 있다. 또한 캐로셀의 왼쪽과 오른쪽에 정방향 및 역방향 버튼을 제공하여 간단한 클릭/탭으로 캐로셀을 이전 및 다음 항목으로 이동할 수 있다. 이 버튼들은 보일 수도 있고(예: 큰 화살표 아이콘 모양) 시각적으로 숨겨질 수도 있지만 단일 포인터로 조작할 수 있다.

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

  1. G219: Ensuring that an alternative is available for dragging movements that operate on content

다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

의견 남기기