TextLink

a要素の代わりに使用する汎用テキストリンクコンポーネントです。本文中にリンクを置くとき、HelpLinkやUpwardLinkで表現できないテキストリンクを提供するときに使います。

使用上の注意

ボタンとして使わない

TextLinkは、ページを移動するためのリンクです。それ以外の処理を実行するボタンとして使わないでください。

視覚的優先度の低いボタンを表現したい場合は、Tertiaryボタンを使ってください。

TextLinkを使用したコンポーネント

開発で頻繁に利用する実装をコンポーネント化しています。

レイアウト

アイコンの有無

特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。

アイコン付きテキストリンク

テキストリンクの左右にアイコンを配置できます。 SmartHR UIでは、アイコン付き（左）はプレフィックス（prefix props）に、アイコン付き（右）はサフィックス（suffix props）にIconを指定することで表現できます。
アイコンは左右どちらかにのみ指定してください。

アイコン付き（左）

テキストリンクを押した移動先の意味・内容を想起させるために使用します。

アイコン付き（右）

テキストリンクを押したときの挙動を表現するために使用します。

デザインパターン

特別なテキストリンク

特定の役割を示すためにアイコンを使います。これはテキストが異なっていても、同じ挙動であることを示すためです。

新規ウィンドウで開くテキストリンク

テキストリンクで別の画面に移動することで、現在の画面での入力や作業が中断され作業効率が著しく落ちる場合には、新規ウィンドウ（新規タブ）でテキストリンクを開くことを検討します。

• TextLinkは、テキストの右側に 別タブで開く アイコン（OpenInNewTabIcon）を自動で配置するため、個別に設定する必要はありません。
  • リンク先がSmartHRの内部ページ、外部サイトに関わらず表示します。
• アイコン付き（左）（プレフィックス）は指定しないでください。

ヘルプセンターを開くテキストリンク

ヘルプセンター別タブで開くを開くテキストリンクはHelpLinkとして提供しています。

一階層上のコンテンツに戻るテキストリンク

一階層上のコンテンツに戻るテキストリンクはスタイリングやpropsを整えたコンポーネントUpwardLinkとして提供しています。アイコン付き（右）（サフィックス）は指定しないでください。

アクセシビリティ

基本的なアクセシビリティ機能

新規ウィンドウで開くリンクであることを伝える

target="_blank" を指定した場合、TextLinkは新規ウィンドウ（新規タブ）で開くことを示すアイコンを自動で表示します。

これにより、リンクを開いた際に別タブへ移動することが視覚的に伝わります。また、アイコンには「別タブで開く」のアクセシブルネームが設定されているため、スクリーンリーダーを使用するユーザーにも新規ウィンドウで開くことが伝わります。

開発時の考慮点

リンク先がわかるテキストを設定する

リンクテキストは、リンク先や実行される内容がわかる文言にしてください。 リンク先がわからない曖昧なテキストは、ユーザーがリンクの目的を理解しづらくなり、意図したページへ移動できるか判断しにくくなる場合があります。

詳しい書き方や例については、リンクのテキストからリンク先が判別できるの達成方法を参照してください。

関連ページ

• リンクテキストからリンク先が判別できる | アクセシビリティガイドライン
• リンクテキストに下線がある | 弱視・ロービジョンのユーザビリティチェックリスト

使い方チェックリスト

TextLink

参照元：使用上の注意 > ボタンとして使わない 「使用上の注意 > ボタンとして使わない」の本文へ移動

• Must

  視覚的優先度の低いボタンを表現したい場合は Tertiary ボタンを使う
• Avoid

  TextLink はページを移動するためのリンク用途で使い、それ以外の処理を実行するボタンとして使わない

参照元：レイアウト > アイコンの有無 > アイコン付きテキストリンク 「レイアウト > アイコンの有無 > アイコン付きテキストリンク」の本文へ移動

• Must

  アイコンは左右どちらかにのみ指定する

参照元：レイアウト > アイコンの有無 > アイコン付きテキストリンク > アイコン付き（左） 「レイアウト > アイコンの有無 > アイコン付きテキストリンク > アイコン付き（左）」の本文へ移動

• Should

  アイコン付き（左）はテキストリンクを押した移動先の意味・内容を想起させるために使用する

参照元：レイアウト > アイコンの有無 > アイコン付きテキストリンク > アイコン付き（右） 「レイアウト > アイコンの有無 > アイコン付きテキストリンク > アイコン付き（右）」の本文へ移動

• Should

  アイコン付き（右）はテキストリンクを押したときの挙動を表現するために使用する

参照元：デザインパターン > 特別なテキストリンク > 新規ウィンドウで開くテキストリンク 「デザインパターン > 特別なテキストリンク > 新規ウィンドウで開くテキストリンク」の本文へ移動

• Avoid

  新規ウィンドウで開くテキストリンクには `アイコン付き（左）`（プレフィックス）を指定しない
• Should

  別画面に移動することで現在の画面での入力や作業が中断され作業効率が著しく落ちる場合は、新規ウィンドウ（新規タブ）でテキストリンクを開くことを検討する

参照元：デザインパターン > 特別なテキストリンク > ヘルプセンターを開くテキストリンク 「デザインパターン > 特別なテキストリンク > ヘルプセンターを開くテキストリンク」の本文へ移動

• Should

  ヘルプセンターを開くテキストリンクには HelpLink を使う

参照元：デザインパターン > 特別なテキストリンク > 一階層上のコンテンツに戻るテキストリンク 「デザインパターン > 特別なテキストリンク > 一階層上のコンテンツに戻るテキストリンク」の本文へ移動

• Avoid

  UpwardLink には `アイコン付き（右）`（サフィックス）を指定しない
• Should

  一階層上のコンテンツに戻るテキストリンクには UpwardLink を使う

参照元：アクセシビリティ > 開発時の考慮点 > リンク先がわかるテキストを設定する 「アクセシビリティ > 開発時の考慮点 > リンク先がわかるテキストを設定する」の本文へ移動

• Must

  リンクテキストは、リンク先や実行される内容がわかる文言にする

Props