ブロックリンク：完璧なソリューションの検索

クリスは最近、「ブロックリンク」のアクセシビリティとUXの欠点を強調しました。これは、アンカータグ内のカード要素全体を描いています。この記事は、問題がパターン自体にあるのかその実装にあるのかを調査し、課題を再検討します。これらの問題に対処するカードコンポーネントを作成することを目指します。 「カード」とは、ブロックリンクパターンを使用するコンポーネントを指します。

理想的なカードコンポーネントは、これらの基準を満たす必要があります。

1. 完全にクリック可能でリンクされています。
2. 複数の内部リンクに対応します。
3. 支援技術の互換性のためにセマンティックHTMLを維持します。
4. 標準リンクのようなテキスト選択を許可します。
5. サポート右クリックとキーボードショートカット。
6. フォーカス可能な要素の適切なタブ注文を確認します。

ブラウザには標準のカードウィジェットがないため、これは大きな課題です。いくつかのアプローチを調べてみましょう。

方法1：シンプル（ただし、欠陥）<a></a>包む

最も単純なアプローチ - カード全体をand<a></a>タグ - も最も効果的ではありません。基本的なクリック可能性と右クリック/キーボードのショートカット機能を達成しながら、いくつかの面で失敗します。

1. カード内のネストされたリンクを防ぎます。
2. アクセシビリティを妥協します。スクリーンリーダーは、カード全体のコンテンツを無差別に発表する場合があります。
3. テキストの選択を無効にします。

この方法は明らかに不十分です。

方法2：必要な要素のみをリンクします

このアプローチは、リンクが必要な個々の要素のみをリンクすることにより、アクセシビリティを優先します。これは正常に対処します：

1. 複数の内部リンク。
2. セマンティックHTML。
3. テキスト選択。
4. 右クリック/キーボードショートカット。
5. タブオーダー。

ただし、完全なカードクリック可能性の重要な機能がありません。

方法3：::擬似要素アプローチ::before

a ::before orまたは::afterカードの上に絶対に配置された後、クリック可能な領域が提供されます。ただし、この方法はまだ次のとおりです。

1. ネストされたリンクの制限。擬似要素層は、基礎となるリンクをクリックします。
2. テキストの選択は問題のままです。

より堅牢なソリューションが必要です。

方法4：方法2のJavaScriptの強化

方法2に基づいて、進行性の強化のためにJavaScriptを活用できます。クリックイベントリスナーをカードに追加し、メインリンクのクリックイベントをプログラム的にトリガーします。テキスト選択への干渉を防ぐために、 window.getSelection().toString()を使用して、リンクをトリガーする前にテキストが選択されているかどうかを確認します。

 const card = document.queryselector（ "。カード"）;
const mainlink = document.queryselector（'。main-link '）;

Card.AddeventListener（ "Click"、Handleclick）;

function handleclick（event）{
  const istextselected = window.getSelection（）。toString（）;
  if（！istextSelected）{
    mainlink.click（）;
  }
}

//カード内のクリック可能な要素でのイベントの伝播を防ぐ
const clickableElements = array.from（card.queryselectorall（ "a"））;
ClickableElements.foreach（（ele）=>
  ELE.ADDEVENTLISTENER（ "Click"、（e）=> e.StopPropagation（））
）;

このアプローチは、すべての要件を正常に満たしています。ただし、内部リンクとボタンでの潜在的な二重イベントトリガーが必要になる場合があります。

このソリューションは、機能的でアクセス可能なクリック可能なカードコンポーネントを提供します。 「続きを読む」リンクや画像を使用してカードを処理するなど、さらなる考慮事項には、追加の調査が必要です。

さらに読むために：

• ヘイドンピカリングによるカード
• エイドリアン・ロゼリによるリンク、カード、クリック可能な領域、行などをブロック
• ブロックリンクは、Chris Coyierによる痛み（そしておそらく悪い考えかもしれません）です
• Dave RupertによるカードUIの落とし穴

以上がブロックリンク：完璧なソリューションの検索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。