탭 타겟의 크기가 적절하지 않음

탭 타겟은 터치 기기의 사용자가 상호작용할 수 있는 웹페이지 영역입니다. 버튼, 링크, 양식 요소에는 모두 탭 타겟이 있습니다.

대부분의 검색엔진은 모바일 친화성에 따라 페이지의 순위를 매깁니다. 탭 타겟이 충분히 크고 서로 충분히 멀리 떨어져 있도록 하면 페이지의 모바일 친화적 및 접근성이 높아집니다.

Lighthouse 탭 대상 감사가 실패하는 이유

Lighthouse는 다음 두 조건을 모두 충족하는 탭 타겟이 있는 페이지를 신고합니다.

  • 타겟이 48x48픽셀보다 작습니다.
  • 타겟 중심에서 48픽셀 이내의 타겟 영역이 다른 타겟과 25% 이상 겹칩니다.
부적절한 크기의 탭 타겟을 보여주는 Lighthouse 감사

감사에 실패하면 Lighthouse는 세 개의 열이 포함된 테이블에 결과를 나열합니다.

탭 타겟 크기가 부적절한 탭 타겟입니다.
크기 대상의 경계 직사각형 크기입니다(단위: 픽셀).
타겟 중복 너무 가까운 다른 탭 타겟(있는 경우)

탭 타겟 수정 방법

옵션 1: 너무 작은 탭 타겟의 크기를 늘립니다. 48x48픽셀인 탭 대상은 감사를 통과하지 못합니다. 더 크게 표시되면 안 되는 요소 (예: 아이콘)가 있는 경우 padding 속성을 늘려보세요.

적절한 크기의 탭 타겟
요소의 모양을 변경하지 않고 탭 타겟을 더 크게 만들려면 padding를 사용합니다.

옵션 2: margin와 같은 속성을 사용하여 서로 너무 가까운 탭 타겟 사이의 간격을 늘립니다. 탭 타겟 간 8px로 시작하는 것이 좋지만, 특히 매우 작은 타겟의 경우 항상 감사를 통과하기에 충분한 간격은 아닙니다.

자료