적중 영역에서 보이는 모양을 분리합니다.
일시 중지 버튼과 같은 작은 아이콘의 경우 클릭 가능한 컨테이너가 그려진 기호 너머로 확장되도록 합니다. 손가락이 모호하게 활성화되지 않도록 인접한 작업을 충분히 멀리 유지하십시오. 캔버스 게임에서는 개체를 그리고 동일한 레이아웃 데이터에서 개체의 히트 영역을 계산합니다. 별도의 코드 경로에 좌표를 복제하면 드리프트가 발생합니다.
WCAG 2.2 성공 기준 2.5.8은 간격 및 동등한 컨트롤을 포함하여 정의된 예외와 함께 최소 24 x 24 CSS 픽셀을 사용합니다. 설계 상한이 아닌 접근성 요구 사항으로 평가하십시오. 움직이는 대상이나 주요 작업에는 더 많은 영역이 필요할 수 있습니다. 터치가 인식되는 위치를 표시하기 위해 색상이나 미묘한 테두리에만 의존하지 마세요.
실제 화면 크기에서 적중 테스트 확인
각 가장자리와 모서리 근처, 인접한 컨트롤 사이, 게임 영역이 확대·축소될 때 탭을 시험하세요. 화면에 보이는 컨트롤, DOM의 히트 영역, 게임 월드 좌표가 같은 동작을 가리키는지 확인합니다. 작고 움직이는 객체는 위험 요소와 충분히 떨어지도록 하면서 그림보다 히트 영역을 넓게 설정할 수 있습니다.
터치로 다양한 뷰포트 크기를 시험하세요. 마우스 포인터는 손가락보다 더 정밀하게 목표를 가리킬 수 있습니다. 포인터 좌표를 게임 영역의 좌표계로 변환하고 크기를 바꾼 뒤에도 올바른지 확인하세요. W3C 설명은 해당 기준과 예외를 다룹니다.
게임 터치 대상 크기 관련 질문
모든 게임 목표를 최소 24픽셀로 만들어야 하나요?
WCAG 2.2 성공 기준 2.5.8은 포인터 입력 목표에 최소 24 × 24 CSS 픽셀을 요구하며 예외도 규정합니다. 기준을 확인하고 게임 상황에 따라 더 넓은 히트 영역을 선택하세요.
히트 영역이 그림보다 커도 되나요?
네. 작은 아이콘 주변의 인터랙티브 영역을 넓히면 누르기 쉬워집니다. 다만 가까운 컨트롤을 명확히 구분하고 예측 가능한 결과를 제공해야 합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보