Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse 탭 대상 감사에 실패하는 이유
  • 리소스

탭 대상의 크기가 적절하지 않습니다.

May 2, 2019 — 업데이트됨 Aug 21, 2019
Available in: Español, 日本語, Português, Русский, 中文, English
Appears in: SEO 감사
이 페이지에서
  • Lighthouse 탭 대상 감사에 실패하는 이유
  • 리소스

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

많은 검색 엔진은 페이지가 모바일 친화적인 정도에 따라 페이지 순위를 매깁니다. 탭 대상이 충분히 크고 서로 충분히 떨어져 있도록 하면 페이지가 모바일 친화적이고 접근성이 높은 것으로 평가됩니다.

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

Lighthouse는 너무 작거나 너무 가까운 탭 대상이 있는 페이지에 플래그를 지정합니다.

부적절한 크기의 탭 대상을 나타낸 Lighthouse 감사

48 x 48픽셀보다 작거나 8픽셀보다 가까운 대상은 감사에 실패합니다. 감사가 실패하면 Lighthouse는 세 개의 열이 있는 테이블에 결과를 나열합니다.

탭 대상부적절한 크기의 탭 대상입니다.
크기대상 경계 사각형의 크기(픽셀)입니다.
대상 중첩다른 탭 대상이(있는 경우) 너무 가깝습니다.
Each SEO audit is weighted equally in the Lighthouse SEO Score, except for the manual Structured data is valid audit. Learn more in the Lighthouse Scoring Guide.

탭 대상을 수정하는 방법 #

1단계: 너무 작은 탭 대상의 크기를 늘립니다. 48 x 48 px인 탭 대상은 절대 감사에 실패하지 않습니다. 더 크게 표시되지 않아야 하는 요소(예: 아이콘)가 있는 경우 padding 속성을 늘려 보세요.

적절한 크기의 탭 대상
padding을 사용하여 요소의 모양을 바꾸지 않고 탭 대상을 더 크게 만드세요.

2단계: margin과 같은 속성을 사용하여 서로 너무 가까운 탭 대상 사이의 간격을 늘리세요. 탭 대상 사이에는 최소 8픽셀이 있어야 합니다.

리소스 #

  • 접근 가능한 탭 대상: 모든 사용자가 탭 대상에 액세스할 수 있도록 하는 방법에 대한 추가 정보입니다.
  • 탭 대상의 크기가 적절하지 않습니다 Lighthouse 감사의 소스 코드
마지막 업데이트: Aug 21, 2019 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.