SmartHR Design System

ヘルプページへの動線

アプリケーションからヘルプセンターの各ヘルプページへのテキストリンクを定義しています。

基本的な考え方

アプリケーションからヘルプページへ移動する操作であることを、ユーザーが認識できるように表記します。 現状、ヘルプページへの動線の表現に敬語表現が多く見られますが、他の操作文言と同様に敬語表現は用いません。

構成

ヘルプページへの動線は、以下の要素で構成されています。

  • テキスト
  • テキストリンク
  • アイコン

テキスト

  • リンクへの導入部は、 「詳細は、」ではなく「詳しくは、」 とします。
    • リンク先で説明している内容を表現する場合は、hogeの詳しい操作方法は、、hogeについては、 と書きます。
    • 羅列する場合には、 hogeやfuga、piyoについては、 と書きます。
  • ユーザーに求める動作は 「確認」ではなく「参照」 とします。
    • アプリケーション内の確認を求める場合と書き分けることで、アプリケーション外であることを表現します。
  • スペースに限りがある場合には、テキスト部分は省略して構いません。

テキストリンク

  • テキストは、移動先ヘルプページのタイトルを基本とし、括弧で囲みません。
  • スペースの都合がある場合は、短くリライトして構いません。

アイコン

ヘルプセンターのリンクであることを表すために、ヘルプセンター アイコン（FaQuestionCircleIcon）をテキストリンクの左側に配置できます。（推奨）
モードレスダイアログや新規ウィンドウなどの表示に関わらず、使用できます。

アクセシビリティの観点

  • FaQuestionCircleIcon アイコンだけでヘルプページへのリンクを設定してもよいか。

    • 構いません。altを記述したうえで、前後の文脈から関連したヘルプページに移動することが推測できれば良いです。

  • リンクテキストとリンク先ページタイトルが違っても問題ないか。

    • リンクの目的が判断できれば構いません。リンクテキストとリンク先のページタイトルは完全一致でなくても構いません。(※1.)

ライティングパターン

参考文献

※1. Web Content Accessibility Guidelines - 2.4.4 リンクの目的（コンテキスト内）を理解する