コンポーネント / primitives

primitives · @awesome-ds/react

Link

移動先を明確に伝えるセマンティックなリンク。

関連ルール: rule.a11y.wcag-aa, rule.interaction.interface-quality

状態マトリクス

通常必須
ホバー必須
フォーカス必須
訪問済み必須

構造

  • a要素
  • 移動先を示す文言
  • 任意の外部リンク表示

キーボード操作契約

Tabでフォーカスし、Enterで移動します。

スクリーンリーダー契約

リンクであることと、移動先が分かる文言を読み上げます。

コンテンツ規則

  • 移動先を名前で示します。
  • URLだけ、または「詳しく見る」のような曖昧な文言を避けます。

公開API

プロパティ型必須説明
hrefstring必須リンクの移動先。
childrenReactNode必須表示または読み上げ対象となる内容。
…nativeOmit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">—対応するネイティブ要素の標準属性。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Link/renders-href

ライブ表示

ライブ表示

リファレンスを開く

コピー可能な実装例

import { Link } from "@awesome-ds/react";

<Link href="/references">Atlas</Link>