성공기준 이해 2.5.8:타겟 크기 (최소) (Level AA)

예외

요구 사항은 대상 크기가 최소 24 × 24 CSS 픽셀이어야 한다는 것이다. 여기에는 다섯 가지 예외가 있다.

• 간격: 크기가 작은 대상(24 × 24 CSS 픽셀 미만)은 24 CSS 픽셀 직경의 원이 각 경계 상자의 중앙에 있는 경우 원이 다른 대상이나 크기가 작은 다른 대상의 원과 교차하지 않도록 배치된다.
• 동등한: 타겟의 크기가 24 × 24 CSS 픽셀과 동일하지 않지만 이 성공 기준의 요구 사항을 충족하는 기본 기능을 달성할 수 있는 다른 컨트롤이 있는 경우 타겟은 "동등한" 예외이다.
• 인라인: 문장 내 인라인 타겟이나 타겟 크기가 타겟이 아닌 텍스트의 줄 높이에 의해 제한되는 경우 성공 기준은 적용되지 않는다. 뷰포트 크기에 따른 텍스트 재정렬로 인해 저작자가 링크가 서로 상대적인 위치를 예측할 수 없기 때문에 이 예외가 허용된다. 여러 링크가 더 작은 텍스트 블록에 포함되어 있을 때 이 성공 기준을 적용하면 바람직하지 않은 디자인이 되는 경우가 많다. 가독성을 높이는 값으로 줄 높이를 설정하는 것이 더 중요하다.
• 사용자 에이전트 컨트롤: 브라우저에는 <input type="date">의 달력과 같은 일부 컨트롤의 기본 렌더링이 있다. 저작자가 사용자 에이전트 기본값을 수정하지 않는 한 사용자 에이전트 컨트롤의 타겟 크기는 제외된다.
• 필수적인: 타겟의 크기와 간격이 전달되는 정보의 기본인 경우 필수 예외가 적용된다. 예를 들어, 디지털 지도에서 핀의 위치는 지도에 표시된 장소의 위치와 유사하다. 서로 가까운 핀이 많은 경우 핀과 인접 핀 사이의 간격이 24 CSS 픽셀 미만인 경우가 많다. 올바른 지도 위치에 핀을 표시하는 것이 중요하므로 필수 예외가 적용된다. 비슷한 예는 대상이 반드시 밀집되어 있는 대화형 데이터 시각화이다. 다른 예시로는 온라인 양식이 종이 양식을 법적으로 반영해야 하는 경우가 있다. 이때 타겟 크기에 제약이 따를 수 있다. 이러한 법적 구간에서는 작은 타겟을 복제해야 하는 법적 요구사항이 필수적인 것으로 간주될 수 있다. "필수적인" 예외가 적용되는 경우, 저작자는 실용적인 한도 내에서 대체 수단을 통해 동등한 기능을 제공하는 것이 강력히 권장된다.

크기 요구 사항

타겟이 "최소 24 × 24 CSS 픽셀"이 되려면 정사각형이 타겟 내에 완전히 들어가도록 가로 및 세로 축에 정렬된 24 × 24 CSS 픽셀 정사각형을 그릴 수 있어야 한다(타겟 영역 외부로 확장되지 않음).

24×24px 정사각형은 페이지와 정렬되어야 하지만 타겟 자체는 기울어질 수 있다.

타겟 내부에 24×24px 정사각형을 그릴 수 있을 만큼 크지 않으면 크기가 작은 것으로 간주되어 성공 기준의 크기 요구 사항을 통과하지 못한다. 그러나 인접한 타겟 없이 주위에 충분한 공간이 있는 경우 간격 예외에 따라 여전히 기준을 통과할 수 있다.(아래)

요구 사항은 페이지의 확대/축소 비율과 무관하다. 사용자가 확대해도 요소의 CSS 픽셀 크기는 변경되지 않는다. 이는 사용자가 페이지를 확대하면 대상이 충분한 간격이나 크기를 갖게 될 것이라고 저작자가 주장하는 것으로는 이를 충족할 수 없음을 의미한다.

요구 사항은 사용자 상호 작용 또는 콘텐츠의 스크립팅된 동작의 결과로 표시되는 콘텐츠에 의해 가려지는 대상에는 적용되지 않는다. 예를 들면 다음과 같다.

• 콤보박스의 드롭다운 제안 목록을 보여주는 상호작용
• 모달 대화 상자가 표시되는 버튼 활성화
• 페이지 로드 후 쿠키 배너를 표시하는 콘텐츠
• 일정 기간 동안 사용자 활동이 없으면 "설문조사 참여" 대화 상자를 표시하는 콘텐츠

그러나 요구 사항은 다른 콘텐츠 위에 표시되는 모든 새 콘텐츠의 타겟에 적용된다.

성공 기준은 주로 인접한 대상의 우발적인 활성화를 방지하기 위해 대상의 크기를 제공함으로써 터치 사용자를 돕지만, 마우스나 펜 사용자에게도 유용하다. 이것은 떨림이나 감소된 정밀도로 인한 잘못된 실행 가능성을 줄여준다. 정밀 운동 제어 능력 감소 또는 입력 부정확성 때문에 발생할 수 있는 문제를 줄여준다.

간격

타겟의 최소 크기 요건을 충족하지 못할 경우, 적절한 간격을 두는 것만으로도 사용자 경험을 개선할 수 있다. 타겟이 바로 인접한 다른 타겟이 없다면 인접한 타겟을 실수로 활성화할 가능성이 낮아진다. 터치스크린 장치와 사용자 에이전트는 일반적으로 사용자의 터치 동작에 가장 가까운 링크나 컨트롤을 식별하는 내부 기법(heuristics)을 가지고 있다. 이는 타겟 사이에 충분한 간격이 있다면 더 큰 타겟 크기만큼 효과적으로 작동할 수 있음을 의미한다.

타겟이 24 × 24 CSS 픽셀보다 작은 경우 소형(undersized)으로 본다. 이 경우에는 타겟의 경계 상자 중앙에 있는 작은 타겟 위에 지름 24 CSS 픽셀의 원을 그려 최소한 충분한 간격이 있는지 확인한다. 직사각형 타겟의 경우 경계 상자는 대상 자체와 일치하므로 원은 대상의 중심에 배치된다. 대상이 직사각형이 아닌 경우(예: 타겟이 잘렸거나 모서리가 둥글거나 더 복잡한 클릭 가능한 SVG 모양인 경우) 먼저 경계 상자를 결정한 다음 상자의 중심을 찾아야 한다. 오목한 모양의 경우 경계 상자의 중심이 타겟 외부에 있을 수 있다. 이제 경계 상자의 중심에 원의 중심을 맞준다.

인접한 모든 소형 타겟에 대해 이 절차를 반복한다. 크기가 작은 타겟의 간격이 충분한지 확인하기 위해(이 성공 기준의 간격 예외를 통과하기 위해) 대상의 직경 24 CSS 픽셀인 원이 다른 대상이나 크기가 작은 다른 대상의 원과 교차하지 않는지 확인한다.

다음 예에서 6개의 아이콘 기반 버튼으로 구성된 가로 행의 세 가지 버전을 보여준다.

• 맨 위 행에서 각 대상의 크기는 24 × 24 CSS 픽셀로 이 성공 기준을 통과한다.
• 두 번째 행에서 동일한 대상은 20 × 20 CSS 픽셀이지만 그 사이에 4 CSS 픽셀 공간이 있다. 대상 크기가 24 × 24 CSS 픽셀 미만이므로 성공 기준의 간격 예외에 대해 평가해야 하고 통과한다.
• 마지막 행에서 대상은 다시 20 × 20 CSS 픽셀이지만 그 사이에 공백이 없다. 이는 간격 예외에 실패한다. 이는 대상 위에 직경 24개의 CSS 픽셀 원을 그릴 때 원이 교차하기 때문이다.

다음 두 그림은 높이가 16 CSS 픽셀에 불과한 버튼 세트를 보여준다. 첫 번째 세트에서는 버튼 바로 위나 아래에 타겟이 없으므로 통과한다. 두 번째 그림에는 추가 버튼이 있는데, 버튼이 서로 겹쳐서 실패가 발생했다.

다음 두 그림은 이 요구 사항을 적절하게 충족하기 위해 메뉴 항목을 조정하는 방법을 보여준다. 첫 번째 그림에서는 About us 메뉴가 활성화되어 각 메뉴 항목 타겟의 높이(텍스트 및 패딩)가 24 CSS 픽셀이므로 통과되었음을 보여준다. 두 번째 그림에서는 동일한 메뉴가 확장되어 있지만 메뉴 항목의 높이가 18 CSS 픽셀에 불과하므로 실패한다.

다음 예에는 하나의 큰 타겟(해당 이미지와 관련된 새 페이지에 링크되는 이미지)과 아주 작은 두 번째 타겟(모달로 확대되는 이미지 미리 보기를 열 수 있는 돋보기 아이콘이 있는 컨트롤)이 있다.

맨 윗줄에는 작은 타겟이 큰 타겟과 겹치거나 기술적으로 더 정확하게 말하면 잘린다. 작은 타겟 자체의 크기는 24 × 24 CSS 픽셀이므로 통과한다. 두 번째 행에서 두 번째 타겟이 더 작으면(이 경우 16 × 16 CSS 픽셀) 기준에 실패한다. 작은 대상 위에 그리는 직경 24 CSS 픽셀의 원이 큰 대상과 교차하기 때문이다.

다음 예에는 동일한 두 개의 대상(큰 대상과 작은 대상)이 있다. 이번에는 작은 타겟이 큰 타겟에 닿거나 접해있다. 작은 대상이 24 × 24 CSS 픽셀보다 작은 경우 작은 대상 위에 그리는 직경 24 CSS 픽셀의 원이 큰 대상 자체와 교차하여 요구 사항을 충족하지 못한다. 소형 타겟은 해당 원이 대형 타겟과 교차하지 않을 때까지 대형 타겟에서 더 멀리 떨어져 있어야 한다.

충분 기법

1. C42: Using min-height and min-width to ensure sufficient target spacing