リンク

これらのガイドラインは、リンクに関するものです。

ここでリンクとは、ユーザーがクリック（タッチ）することでページ遷移や何らかの機能が実行されるものを差します。リンクにはテキストのみで構成されているもの、アイコンが用いられているもの、画像とテキストの一方又は両方が用いられているものが含まれます。また、a要素で実装されているものに加えて、button要素で実装されていたり、適切なrole属性が付加されて実装されているものも含みます。

[MUST]複数の視覚的要素を用いた表現

クリッカブルであることを、色だけで表現しない。

意図

視覚障害者や色弱者がリンクを認知できるようにする。

対応するWCAG 2.1の達成基準

SC 1.4.1：

• Use of Color

• 色の使用

参考情報

• 色を用いた表現に関する注意点

• グレースケール表示への切り替え方

チェック内容

チェックID：0031

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない配色になっている:

• リンク箇所を判別できる

• 画像、テキストの意図が伝わる

• 入力フォームの必須項目、エラーを認知できる

チェックID：0051

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

グレイスケール表示でも利用に支障が出ない:

• リンク箇所を判別できる

• 画像、テキストの意図が伝わる

• 入力フォームの必須項目、エラーを認知できる

[MUST]適切なリンク・テキスト

リンク・テキスト（a要素の中身、アイコンのラベルなど）は、そのリンクの目的を判断できるものにする。

意図

• リンク先を閲覧するかどうかの判断を容易にして、肢体不自由者の不必要な操作の抑制につなげる。

• スクリーン・リーダーが提供するリンクの一覧機能を使う視覚障害者が、リンク先について容易に判断できるようにする。

対応するWCAG 2.1の達成基準

SC 2.4.4：

• Link Purpose (In Context)

• リンクの目的 (コンテキスト内)

参考情報

• リンク先の内容を推測しやすくする

チェック内容

チェックID：0241

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。

チェックID：0261

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

• 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または

• リンク・テキストの意図がマークアップで明確になっている。

[MUST]一貫したリンク・テキスト

同じ機能を実行するリンクは、サイト内で一貫性のあるリンク・テキストを付与する。

意図

予測可能性を上げ、混乱を防ぐ。

対応するWCAG 2.1の達成基準

SC 3.2.4：

• Consistent Identification

• 一貫した識別性

チェック内容

チェックID：0242

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

チェックID：0262

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

[MUST]適切なフォーカス順序

Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

対応するWCAG 2.1の達成基準

SC 2.4.3：

• Focus Order

• フォーカス順序

参考情報

• Tab/Shift+Tabキーを用いたチェック

チェック内容

チェックID：0172

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

• リンクとボタン

• フォーム・コントロール

• その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

キーボード操作によるチェック実施方法の例

TabキーとShift+Tabキーでフォーカスを移動して確認する。

iOS VoiceOverによるチェック実施方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

• 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

• 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

• 画面上に表示されているもので読み上げられないものがない

参考：1本指による右および左方向へのフリック