カード

サンプル

タイトル

説明文説明文説明文説明文説明文説明文

• タグ
• タグ

実装上の考慮事項

• 自己完結した記事を表すため、article要素を使用します（達成基準 1.3.1 情報及び関係性 (レベル A) ）。
• a要素の範囲はタイトルの文字列部分のみとし、カード全体を囲まないようにします。
  • スクリーンリーダーに対してタイトル部分のみをリンクとして読み上げさせるため。
  • タグのような、カード内の他の要素もクリック可能にするため。
• クリック操作ではカード全体をクリック範囲とするため、疑似要素を利用します。
• タイトルのみをリンクとするため、JSでホバー時のクラスを付与します。
• 状況に応じて、タイトル部分は見出し（h1-h6）要素としてマークアップできます。

アクセシビリティ上の考慮事項

• リンクがキーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
• タイトルの前に他のテキスト要素が来ないようにデザインしてください（達成基準 1.3.2 意味のある順序 (レベル A) ）。
  • タイトルの前に表示すべき情報がある場合、それを含めて見出しとしてマークアップしてください。
• 画像に対してalt属性は不要です（タイトルが代替テキストとなるため）。ただし、テキストなしで画像のみのカードとして使用する場合にはalt属性を設定してください（達成基準 1.1.1 非テキストコンテンツ (レベル A)）。
• ユーザーがホバー時のモーションアニメーションを無効にできるようにしてください（達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA)）
  • この例ではprefers-reduced-motionを参照することで実現しています。