이 성공 기준의 의도는 타겟이 인접한 타겟을 실수로 활성화하지 않으면서 쉽게 활성화될 수 있도록 하는 데 있다.
손 기능에 제약이 있는 사용자나 미세 운동에 어려움을 겪는 사용자는 다른 타겟이 너무 가까이 있는 경우 작은 타겟을 정확하게 활성화하는 데 어려움을 겪는다.
충분한 크기를 제공하거나 타겟 사이에 충분한 간격을 제공하면 잘못된 컨트롤을 실수로 활성화할 확률을 줄일 수 있다.
이 요구 사항이 다루는 장애에는 손 떨림, 경직, 사지마비가 포함된다. 일부 장애인은 컴퓨터 마우스나 트랙패드 대신 특수 입력 장치를 사용한다.
일반적으로 이러한 유형의 입력 장치는 일반적인 포인팅 장치만큼 정확도를 제공하지 못한다.
이 요구 사항을 충족하면 터치스크린 인터페이스도 더 쉽게 사용할 수 있게 된다.
참고
이 성공 기준은 최소 크기를 정의하며, 이를 충족할 수 없는 경우 최소 간격을 정의한다.
인접한 타겟이 너무 가깝지 않다면, 매우 작고 활성화하기 어려운 타겟으로도 이 성공 기준의 요구 사항을 충족하는 것이 가능하다.
그러나 더 큰 타겟 크기를 사용하면 많은 사람이 타겟을 더 쉽게 사용하는 데 도움이 된다. 모범 사례로서, 간격과 무관하게 최소한 이 성공 기준의 최소 크기 요구 사항을 충족하는 것이 권장된다. 중요한 링크/컨트롤의 경우, 더 엄격한 2.5.5 타겟 크기(향상된)를 목표로 하는 것을 고려한다.
이 요구 사항은 타겟이 최소 24×24 CSS 픽셀 크기여야 한다는 것이다. 다음의 다섯 가지 예외가 있다:
간격: 크기 미달인 타겟(24×24 CSS 픽셀 미만인 타겟)은 각 타겟의 경계 상자를 중심으로 지름 24 CSS 픽셀의 원을 그렸을 때, 그 원이 다른 타겟이나 다른 크기 미달인 타겟의 원과 겹치지 않도록 배치한다.
대체 수단: 타겟이 24×24 CSS 픽셀과 동등한 크기를 갖지 않지만, 이 성공 기준의 요구 사항을 충족하는 다른 컨트롤이 본래 기능을 수행할 수 있는 경우, 해당 타겟은 “대체 수단” 예외에 따라 예외로 처리될 수 있다.
인라인: 이 성공 기준은 문장 내 인라인 타겟이나, 타겟의 크기가 타겟이 아닌 텍스트의 줄 높이에 의해 제한되는 경우에는 적용되지 않는다. 이 예외가 허용되는 이유는 뷰포트 크기에 따른 텍스트 리플로우로 인해 저작자가 링크가 서로에 대해 어디에 위치할지 예상하는 것이 불가능하기 때문이다. 작은 텍스트 블록 안에 여러 링크가 포함되어 있을 때 이 성공 기준을 적용하면 종종 바람직하지 않은 디자인이 발생한다. 가독성을 향상시키는 값으로 줄 높이를 설정하는 것이 더 중요하다.
사용자 에이전트 컨트롤: 브라우저는 <input type="date">의 날짜 캘린더와 같은 일부 컨트롤에 대해 기본 렌더링을 제공한다. 저작자가 사용자 에이전트의 기본 크기를 변경하지 않은 한, 사용자 에이전트 컨트롤의 타겟 크기는 예외로 처리된다.
필수적인 경우: 타겟의 크기와 간격이 전달되는 정보에 근본적으로 필요한 경우, “필수적인 경우” 예외가 적용된다. 예를 들어, 디지털 지도에서 핀의 위치는 지도에 표시된 장소의 위치에 상응한다. 여러 핀이 가까이 모여 있는 경우, 핀과 인접한 핀 사이의 간격이 24 CSS 픽셀 미만이 되는 경우가 많다. 핀을 정확한 지도 위치에 표시하는 것이 필수적이므로, “필수적인 경우” 예외가 적용된다. 유사한 예로 타겟이 필연적으로 밀집될 수밖에 없는 대화형 데이터 시각화가 있다. 또 다른 예로는 특정 법규 아래에서는 법적으로 온라인 서식이 종이 서식을 복제하도록 요구하여 타겟 크기에 제약이 가해지는 경우가 있다. “필수적인 경우” 예외가 적용될 때에도, 저작자는 가능한 한 대체 수단을 통해 동등한 기능을 제공하도록 강력히 권장된다. 타겟 크기는 미학적 선택보다는 컨트롤을 쉽게 활성화할 수 있도록 하는 데 목적이 있다. 저작자는 항상 사용자 인터페이스 컨트롤의 크기를 늘리는 것보다 목표를 달성할 수 있는 대체 수단이 있는지 고려해야 한다.
타겟이 “최소 24×24 CSS 픽셀”이 되려면, 가로세로 축에 정렬된 24×24 CSS 픽셀 크기의 정사각형이 해당 타겟 내에 완전히 포함될 수 있어야 한다(타겟 영역 밖으로 벗어나지 않아야 한다).
그림 1. 타겟이 최소 24×24 CSS 픽셀 정사각형인 경우, 이 기준의 크기 요구 사항을 충족하며 통과한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
24×24px 정사각형은 페이지에 정렬되어야 하지만, 타겟 자체는 기울어져 있을 수 있다.
그림 2. 타겟 내에 24×24px 정사각형이 포함되어 있는 한, 이 기준의 크기 요구 사항을 충족하며 통과한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
타겟이 그 안에 24×24px 정사각형을 그릴 수 있을 만큼 크지 않은 경우, 크기 미달로 간주되어 이 성공 기준의 크기 요구 사항을 충족하지 못한다. 다만, 인접한 타겟 없이 주위에 충분한 공간이 있다면, 아래의 간격 예외 덕분에 여전히 이 기준을 충족할 수 있다.
그림 3. 둥근 모서리로 인해 타겟 내부에 24×24px 정사각형을 그릴 충분한 공간이 없어, 이 타겟은 크기 미달이 된다. 다른 타겟과의 간격에 따라, 충분한 여유 공간이 있다면 여전히 통과할 수 있다(이미지는 1:1 및 2:1 비율로 표시됨 - 확대 가능한 원본 이미지 참조).
이 요구 사항은 페이지의 확대/축소 비율과 무관하다. 사용자가 확대해도 요소의 CSS 픽셀 크기는 변하지 않는다. 즉, 저작자는 사용자가 페이지를 확대하면 타겟이 충분한 간격이나 충분한 크기를 갖게 될 것이라고 주장하는 방식으로 이 요구 사항을 충족할 수 없다.
이 요구 사항은 사용자 상호작용이나 콘텐츠의 스크립트 동작의 결과로 표시된 콘텐츠에 의해 타겟이 가려진 경우에는 적용되지 않는다. 예를 들면 다음과 같다.
콤보박스와 상호작용하면 제안 항목의 드롭다운 목록이 표시되는 경우
버튼을 활성화하면 모달 대화 상자가 표시되는 경우
콘텐츠가 페이지 로드 후 쿠키 배너를 표시하는 경우
사용자가 일정 시간 동안 활동하지 않은 후 콘텐츠가 “설문조사 참여” 대화 상자를 표시하는 경우
그러나 이 요구 사항은 다른 콘텐츠 위에 표시되는 모든 새로운 콘텐츠 내의 타겟에는 적용된다.
이 성공 기준은 인접한 타겟의 우발적인 활성화를 방지하기 위해 타겟 크기를 제공함으로써 주로 터치 사용자에게 도움이 되지만, 마우스나 펜 사용자에게도 유용하다. 이는 미세 운동 제어가 어렵거나 입력 부정확성으로 인한 손 떨림 또는 낮은 정밀도로 인해 잘못 활성화될 가능성을 줄여준다.
타겟의 최소 크기가 충족되지 않는 경우, 간격이 최소한 사용자 경험을 개선할 수 있다. 타겟이 다른 타겟과 바로 인접해 있지 않다면 인접한 타겟을 실수로 활성화할 가능성이 줄어든다.
터치스크린 기기와 사용자 에이전트는 일반적으로 사용자의 터치 상호작용에 가장 가까운 링크나 컨트롤을 식별하기 위한 내부적 판별 방식을 가지고 있다. 이는 타겟 사이의 충분한 간격이 더 큰 타겟 크기만큼 효과적으로 작용할 수 있음을 의미한다.
타겟이 24×24 CSS 픽셀보다 작으면, 그 타겟은 크기 미달이다.
이 경우, 크기 미달인 타겟 위에 그 경계 상자를 중심으로 지름 24 CSS 픽셀의 가상의 원을 그려서 최소한 충분한 간격을 가지고 있는지 확인한다.
직사각형 타겟의 경우, 경계 상자는 타겟 자체와 일치한다. 따라서 원은 타겟의 중심에 놓인다.
타겟이 직사각형이 아닌 경우(예를 들어 타겟이 잘려 있거나, 모서리가 둥글거나, 더 복잡한 클릭 가능한 SVG 도형인 경우) 먼저 경계 상자를 결정한 다음, 그 상자의 중심을 찾아야 한다.
오목한 도형의 경우, 경계 상자의 중심이 타겟 자체의 바깥에 위치할 수 있다는 점에 유의한다.
이제 이 원을 경계 상자의 중심에 배치한다.
그림 4. 정사각형/직사각형 타겟의 경우, 지름 24 CSS 픽셀의 원은 타겟 자체를 중심으로 배치된다. 볼록하거나 오목한 타겟의 경우, 도형의 경계 상자를 중심으로 배치된다. 오목한 타겟의 경우 경계 상자의 중심이 실제 타겟의 바깥에 위치할 수 있음에 유의한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
이 과정을 인접한 모든 크기 미달인 타겟에 대해 반복한다.
크기 미달인 타겟이 충분한 간격을 가지고 있는지(이 성공 기준의 간격 예외를 충족하는지) 판단하기 위해, 해당 타겟의 지름 24 CSS 픽셀 원이 다른 타겟이나 인접한 다른 크기 미달인 타겟의 원과 겹치지 않는지 확인한다.
다음 예제는 아이콘 기반 버튼 6개로 이루어진 가로 행의 세 가지 버전을 보여준다:
첫 번째 행에서는 각 타겟의 크기가 24×24 CSS 픽셀로, 이 성공 기준을 충족한다.
두 번째 행에서는 동일한 타겟이 20x20 CSS 픽셀에 불과하지만, 타겟 사이에 4 CSS 픽셀의 간격이 있다. 타겟 크기가 24×24 CSS 픽셀 미만이므로 이 성공 기준의 간격 예외에 따라 평가해야 하며, 이 경우 통과한다.
마지막 행에서는 타겟이 다시 20x20 CSS 픽셀이지만, 타겟 사이에 간격이 없다. 이는 간격 예외를 충족하지 못한다. 이는 타겟 위의 가상의 지름 24 CSS 픽셀 원이 서로 겹치기 때문이다.
그림 5. 세 행의 타겟을 통해 이 성공 기준을 충족하는 두 가지 방법과 충족하지 못하는 한 방법을 보여준다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조)
다음 두 그림은 높이가 16 CSS 픽셀에 불과한 버튼 집합을 보여준다.
첫 번째 집합에서는 버튼 바로 위나 아래에 타겟이 없으므로 통과한다.
두 번째 그림에서는 추가 버튼이 있으며, 서로 위아래로 쌓여 있어 실패하게 된다.
그림 6. 타겟의 높이가 16 CSS 픽셀에 불과하더라도, 위아래에 인접한 타겟이 없으므로 이 성공 기준을 통과한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
그림 7. 높이가 16 CSS 픽셀에 불과한 두 행의 버튼. 두 행은 서로 가까이 있으며, 그 사이의 간격은 1 CSS 픽셀에 불과하다. 이는 한 행의 타겟들이 갖는 24 CSS 픽셀 간격 원이 다른 행의 타겟(및 각 너비에 따른 그 원)과 겹치게 됨을 의미하며, 따라서 이 성공 기준을 충족하지 못한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
다음 두 그림은 이 요구 사항을 적절히 충족하도록 메뉴 항목을 조정하는 방법을 보여준다.
첫 번째 그림에서는 “회사 소개” 메뉴가 활성화되어, 각 메뉴 항목 타겟의 높이(텍스트와 여백 포함)가 24 CSS 픽셀임을 보여주며, 이는 통과한다.
두 번째 그림에서는 동일한 메뉴가 펼쳐졌지만, 메뉴 항목의 높이가 18 CSS 픽셀에 불과하여 실패한다.
그림 8. 높이가 24 CSS 픽셀인 메뉴 항목은 통과한다. 높이가 18 CSS 픽셀에 불과한 메뉴 항목의 경우, 한 행의 타겟이 갖는 24 CSS 픽셀 간격 원이 인접한 메뉴 항목 타겟 및 원과 겹치게 되어 실패한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
다음 예제는 하나의 큰 타겟(해당 이미지와 관련된 새 페이지로 연결되는 이미지)과 매우 작은 두 번째 타겟(이미지의 확대된 미리보기를 모달 등으로 여는 돋보기 아이콘 컨트롤)을 보여준다.
첫 번째 행에서는 작은 타겟이 큰 타겟과 겹치거나, 더 정확히 말하면 큰 타겟을 잘라낸다. 작은 타겟 자체는 24×24 CSS 픽셀 크기이므로 통과한다.
두 번째 행에서는 두 번째 타겟이 더 작을 경우 - 이 경우 16×16 CSS 픽셀 - 이 기준을 충족하지 못하는 것을 볼 수 있는데, 이는 작은 타겟 위에 그린 지름 24 CSS 픽셀의 가상의 원이 큰 타겟 자체와 겹치기 때문이다.
그림 9. 24×24 CSS 픽셀의 작은 타겟은 통과하지만, 16×16 CSS 픽셀의 작은 타겟은 실패한다. 이는 크기 미달인 타겟에 사용되는 지름 24 CSS 픽셀의 원이 큰 타겟과 겹치기 때문이다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
다음 예제에서도 동일한 두 타겟 (큰 타겟과 작은 타겟)이 있다.
이번에는 작은 타겟이 큰 타겟에 닿아 있거나 인접해 있다.
작은 타겟이 24×24 CSS 픽셀보다 작으면, 작은 타겟 위에 그린 지름 24 CSS 픽셀의 가상의 원이 큰 타겟 자체와 겹치게 되어 이 요구 사항을 충족하지 못한다.
크기 미달인 타겟은 그 원이 큰 타겟과 겹치지 않을 때까지 큰 타겟으로부터 더 멀리 떨어져 배치되어야 한다.
그림 10. 첫 번째 행에서는 16×16 CSS 픽셀 타겟이 큰 타겟에 닿아 있거나 인접해 있어 실패하는데, 이는 크기 미달 타겟에 사용되는 지름 24 CSS 픽셀의 원이 큰 타겟과 겹치기 때문이다. 두 번째 행에서는 크기 미달 타겟이 통과할 수 있는 유일한 방법이 타겟 사이에 4 CSS 픽셀의 간격을 추가하는 것임을 보여준다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
참고
서로 다른 장애가 있는 사용자는 컨트롤 크기에 대해 서로 다른 요구 사항을 갖는다.
눈에 보이는 타겟 크기를 늘리지 않으면서 활성 타겟 영역을 늘리는 옵션을 제공하는 것이 유익할 수 있다.
또 다른 방법은 레이아웃의 밀도를 조절하는 메커니즘을 제공하여 타겟 크기나 간격, 또는 둘 다를 변경하도록 하는 것이다.
이는 다양한 범위의 사용자에게 유익할 수 있다.
예를 들어, 시야 손실이 있는 사용자는 더 작은 크기의 컨트롤로 더 조밀한 레이아웃을 선호할 수 있는 반면, 다른 형태의 저시력이 있는 사용자는 큰 컨트롤을 선호할 수 있다.
통제할 수 없는 부분이 있어 사용자 정의 스타일시트가 컨트롤의 표현 방식을 완전히 재정의할 수 없는 경우, 저작자는 이 성공 기준의 요구 사항을 충족하는 컨트롤의 대체 버전을 제공하는 것을 고려해야 한다.
이 성공 기준은 사용자 에이전트에 의해 결정되며 저작자가 변경하지 않은 타겟 크기에 대해 예외를 둔다.
이러한 유형의 타겟의 예로는 브라우저의 스크롤바가 있다. 스크롤바의 크기가 저작자에 의해 변경된 경우, 스크롤바와 페이지 콘텐츠 사이에 통과 기준을 충족하는 간격이 있어야 한다.
다음 예제는 통과하는 디자인과 실패하는 디자인을 보여준다.
그림 11. 통과 예제는 스크롤바 위에 배치된 지름 24 CSS 픽셀의 원이 링크와 겹치지 않도록 링크와 스크롤바 사이에 충분한 공간이 있다. 실패 예제는 링크와 스크롤바 사이에 공간이 없어, 지름 24 CSS 픽셀의 원이 링크와 겹치기 때문에 이 기준을 실패한다(이미지는 비율에 맞게 표시됨 - 확대 가능한 원본 이미지 참조).
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
