UI Component Lab English

← コンポーネント一覧

ナビゲーション

Link リンク

別のページや、同じページ内の別の場所へ移動するための文字や画像。

ページを移動せずに操作を実行するときはボタンを使います。

見分けるポイント

アクセントカラーの文字で、多くは下線が付く。マウスを乗せると色や下線が変わることが多い。

挙動

  • クリックすると、同じタブで移動先が開く。
  • 新しいタブで開く・アドレスをコピーする・履歴で戻るといった操作も、ブラウザが用意している。
  • このデモのリンクは、このサイトのボタンのページへ移動する。

キーボード操作

キー動作
Tabリンクにフォーカスを移す。
Enterリンク先へ移動する。

使い分け・注意点

  • 下線を付ける。「こちら」だけのリンクや、行き先の違う「詳細」の繰り返しは避ける。
  • 新しいタブや外部サイトで開くリンクには、代替テキスト付きのアイコンを付ける。
  • ボタン: リンクは別のページや場所へ移動し、ボタンは今のページで操作を実行する。

出典