블록 링크는 고통입니다 (그리고 아마도 나쁜 생각 일 수도 있습니다)

우리의 포괄적 인 가이드가 설명하는 것처럼, 당신 은<a href=""></a> 태그 (이것을 "블록 링크"라고 부르겠습니다). 전체 컨텐츠 "카드"를 링크하여 클릭 가능한 큰 영역을 생성하는 것은 이상적이지 않습니다.

<a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e"> 
  </a>
    <h2 id="카드">카드</h2>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="블록 링크는 고통입니다 (그리고 아마도 나쁜 생각 일 수도 있습니다)"><p> 콘텐츠</p>
  

Adrian Roselli는 상당한 접근성 문제를 강조합니다. 링크에 전체 블록을 마무리하면 화면 리더가 전체 컨텐츠를 단일의 긴 링크로 발표하여 유용성에 큰 영향을 미칩니다.

따라서이 접근법을 피하십시오. 더 나은 대안은 헤더 만 연결하는 것입니다.

<div>
  <h2 id="a-href-https-www-php-cn-link-bc-ceec-e-cd-a-a-b-e-기사-a"><a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e">기사</a></h2>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="블록 링크는 고통입니다 (그리고 아마도 나쁜 생각 일 수도 있습니다)"><p> 콘텐츠</p>
</div>

전체 카드를 포함하도록 클릭 가능 영역을 확장하면 CSS를 사용하여 다음을 수행 할 수 있습니다.

 .card {
  위치 : 상대;
}
.card h2 a :: 이후 {
  콘텐츠: "";
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  너비 : 100%;
  높이 : 100%;
}

이것은 접근성 문제를 다루지 만 또 다른 것을 소개합니다. 텍스트 선택이 번거 롭습니다. 간단한 클릭은 링크를 시작하여 카드 내에서 자연스러운 텍스트 선택을 방지합니다. 선택을 완전히 차단하지는 않지만 사용자 친화적이지 않습니다.

링크를 트리거하기 전에 텍스트 선택을 감지하기위한 JavaScript 솔루션은 상상할 수 있지만 지나치게 복잡하고 잠재적으로 신뢰할 수없는 해결 방법처럼 느껴집니다.

추가 상황은 그의 카드 기사에서 "The Redundant Click 이벤트"에 대한 Heydon의 통찰력있는 토론을 참조하십시오.

결론적으로, 블록 링크는 상당한 과제를 제시합니다. 완벽한 솔루션은 애매 모호하지만 단점은 대부분의 시나리오에서 이점을 능가합니다. 우리는 대안적인 접근 방식을 장려하여 넓은 클릭 가능 영역을 달성 할 수 있습니다.

위 내용은 블록 링크는 고통입니다 (그리고 아마도 나쁜 생각 일 수도 있습니다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!