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