2.1.3. 조작 가능

사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.

목적

컨트롤의 크기를 충분히 확보하여, 손떨림이 심한 사용자나 운동장애가 있는 사용자뿐만 아니라 모바일 터치 디바이스 환경에서도 원하는 대상을 정확하고 쉽게 조작할 수 있도록 보장하기 위함이다.

손떨림이 심한 사용자나 운동장애가 있는 사용자는 작은 버튼이나 링크를 선택하거나 클릭하는 세밀한 조작이 어려울 수 있다.

예를 들어, 손떨림이 심한 사용자는 마우스로 작은 버튼의 클릭 영역을 정확히 선택하지 못하거나, 영역 밖을 클릭하여 여러 번 시도해야 할 수 있다.

또한, 탭이나 여러 버튼이 서로 붙어서 배치되어 있으면 의도하지 않은 요소를 누를 위험이 커진다.

터치스크린 환경에서는 마우스보다 클릭 정확도가 낮아, 작은 버튼이나 간격이 좁은 요소는 사용자가 실수로 다른 요소를 터치할 가능성이 크다.

이 문제를 해결하기 위해, 컨트롤의 크기를 다음과 같이 최소한으로 확보해야 한다.

콘텐츠에 포함된 모든 컨트롤의 조작 범위는 대각선 길이 기준 6mm 이상이어야 한다. PC 환경에서는 최소 17px × 17px, 모바일 환경에서는 24px × 24px 이상의 크기를 제공해야 한다.
컨트롤이 서로 붙어 있으면 1px 이상의 간격을 둔다. 이 간격에서는 위치 지정 도구(예: 마우스 커서, 터치 입력)가 작동하지 않도록 구현해야 한다.

위치 지정 도구(포인터): 마우스, 터치패드, 스타일러스 펜과 같이 화면상의 특정 위치를 가리키고 조작할 수 있는 장치를 의미한다. 터치스크린 환경에서는 손가락을 이용한 터치 입력도 위치 지정 도구의 역할을 수행한다.

웹 페이지에서 제공하는 모든 이웃한 컨트롤은 개별적으로 선택할 수 있도록, 대각선 길이가 최소 6.0mm 이상 (PC 17px x 17px, 모바일 24px x 24px 이상) 되도록 제공해야 한다.

서로 붙어 있는 링크, 버튼 등의 컨트롤 사이에는 최소 1px 이상의 여백을 제공하여, 사용자가 의도하지 않은 요소를 잘못 선택하는 실수를 방지해야 한다. 이 여백에서는 위치 지정 도구(마우스 커서, 터치 입력 등)가 작동하지 않도록 구현한다.

컨트롤의 크기가 충분하지 않아 사용자가 조작하기 어려운 사례이다.

이러한 경우, 손떨림이나 운동장애가 있는 사용자는 작은 크기의 링크나 버튼을 정확히 선택하기 어려워 반복된 조작이 필요할 수 있으며, 조작 실수로 인해 불편함이 발생할 가능성이 높다.

컨트롤의 크기를 최소 PC 웹에서는 17px × 17px, 모바일 웹에서는 24px × 24px 이상으로 설정하여 충분한 크기를 제공한다.

서로 인접한 컨트롤의 조작 범위 사이에 여백이 제공되지 않은 사례이다. 이러한 경우, 손 떨림이 심한 등 정밀한 조작이 어려운 사용자는 원하는 요소를 정확히 선택하지 못할 가능성이 높다. 이로 인해 사용자가 의도와 다른 잘못된 조작을 할 가능성이 커진다.

인접한 조작 범위 사이에 최소 1px 이상의 여백을 제공함으로써 의도하지 않은 컨트롤을 누르는 실수를 방지할 수 있도록 한다.