リンク
これらのガイドライン項目は、リンクに関するものです。
ここでリンクとは、ユーザーがクリック（タッチ）することでページ遷移や何らかの機能が実行されるものを差します。リンクにはテキストのみで構成されているもの、アイコンが用いられているもの、画像とテキストの一方又は両方が用いられているものが含まれます。また、a要素で実装されているものに加えて、button要素で実装されていたり、適切なrole属性が付加されて実装されているものも含みます。
複数の視覚的要素を用いた表現
クリッカブルであることを、色だけで表現しない。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者や色弱者がリンクを認知できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.1(レベルA)：
- 参考情報
- 関連FAQ
チェック内容
チェックID：0031
グレイスケール表示でも利用に支障が出ない配色になっている:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID：0051
グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
適切なリンク・テキスト
リンク・テキスト（a要素の中身、アイコンのラベルなど）は、そのリンクの目的を判断できるものにする。
- 対象プラットフォーム
Web、モバイル
- 意図
リンク先を閲覧するかどうかの判断を容易にして、肢体不自由者の不必要な操作の抑制につなげる。
スクリーン・リーダーが提供するリンクの一覧機能を使う視覚障害者が、リンク先について容易に判断できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準2.4.4(レベルA)：
- 参考情報
チェック内容
チェックID：0241
リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェックID：0261
リンクは、リンク先が容易に推測できるようなテキストで提供されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェック手順：Web
以下の0261-content-00を満たしている、または(0261-content-01または0261-content-02を満たしている)ことを確認する。
0261-content-00：その他の手段によるチェック方法の例
チェック対象の画面に、リンクが存在しない。
0261-content-01：その他の手段によるチェック方法の例
「○○はこちら」の「こちら」の部分だけがリンクになっているようなリンクがない。（この場合は「○○はこちら」全体をリンクにする。）
0261-content-02：その他の手段によるチェック方法の例
リンク・テキストの意図が、マークアップで明確になっている。（例：直前の見出しなどから容易に推測できる場合）
一貫したリンク・テキスト
同じ機能を実行するリンクには、サイト内で一貫性のあるリンク・テキストを付与する。
- 対象プラットフォーム
Web、モバイル
- 意図
予測可能性を上げ、混乱を防ぐ。
- 対応するWCAG 2.1の達成基準
達成基準3.2.4(レベルAA)：
チェック内容
チェックID：0242
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID：0262
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順：Web
以下の0262-content-00または0262-content-01を満たしていることを確認する。
0262-content-00：その他の手段によるチェック方法の例
チェック対象の画面には、同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンが存在しない。
0262-content-01：その他の手段によるチェック方法の例
同じ画面に遷移する複数のリンクや、同じ機能を実行する複数のボタンには、一貫したテキストやアイコンが使われている。
適切なフォーカス順序
Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。
- 対象プラットフォーム
Web
- 意図
スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準2.4.3(レベルA)：
- 参考情報
- 関連FAQ
チェック内容
チェックID：0172
フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。
リンクとボタン
フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）
その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順：Web
以下の0172-keyboard-01を満たしていることを確認する。
0172-keyboard-01：キーボード操作によるチェック方法の例
Tabキー、またはShift+Tabキーでフォーカスを移動したときの挙動は、以下を満たしている：
すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる
フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている