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