TextLink

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

使用上の注意

ボタンとして使わない

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

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

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

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

レイアウト

アイコンの有無

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

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

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

アイコン付き（左）

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

アイコン付き（右）

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

デザインパターン

特別なテキストリンク

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

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

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

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

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

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

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

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

アクセシビリティ

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

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

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

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

開発時の考慮点

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

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

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

関連ページ

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

Props