ブロックリンクは痛みです（そしておそらく悪い考えかもしれません）

私たちの包括的なガイドが説明しているように、あなたは任意のHTMLセグメントをで包むことができます<a href=""></a>タグ（これを「ブロックリンク」と呼びましょう）。コンテンツ全体の「カード」をリンクして大きなクリック可能な領域を作成することは理想的ではありません。

<a href="https://www.php.cn/link/bc02850ceec640422e0cd11a6a4b827e"> 
  </a>
    <h2 id="カード">カード</h2>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" 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/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="ブロックリンクは痛みです（そしておそらく悪い考えかもしれません）"><p>コンテンツ</p>
</div>

CSSを使用して、カード全体を包含するためにクリック可能な領域を拡張することを行うことができます。

 .card {
  位置：相対;
}
.card h2 a ::後{
  コンテンツ： "";
  位置：絶対;
  上：0;
  左：0;
  幅：100％;
  高さ：100％;
}

これはアクセシビリティの問題に対処しますが、別のものを紹介します。テキスト選択は面倒になります。簡単なクリックがリンクを開始し、カード内の自然なテキストの選択を防ぎます。完全にブロックされた選択ではありませんが、ユーザーフレンドリーは大幅に少なくなります。

リンクをトリガーする前にテキスト選択を検出するJavaScriptソリューションは考えられますが、過度に複雑で潜在的に信頼性の低い回避策のように感じます。

さらにコンテキストについては、カード記事の「The Redundant Click Event」に関するHeydonの洞察に富んだ議論を参照してください。

結論として、ブロックリンクはかなりの課題を提示します。完璧なソリューションはとらえどころのないままですが、欠点はほとんどのシナリオで利点を上回ります。大きなクリック可能な領域を達成するための代替アプローチをお勧めします。

以上がブロックリンクは痛みです（そしておそらく悪い考えかもしれません）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。