リンク

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.1(レベルA)：

  • Use of Color

  • 色の使用

参考情報

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

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

関連FAQ

• グレースケール表示にするブックマークレットで表示が崩れる

チェック内容

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：0051

グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

適切なリンク・テキスト

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

対象プラットフォーム

Web、モバイル

意図

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

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

対応するWCAG 2.1の達成基準

• 達成基準2.4.4(レベルA)：

  • Link Purpose (In Context)

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

参考情報

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

チェック内容

チェックID：0241

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

チェックID：0261

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準3.2.4(レベルAA)：

  • Consistent Identification

  • 一貫した識別性

チェック内容

チェックID：0242

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェックID：0262

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

適切なフォーカス順序

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.4.3(レベルA)：

  • Focus Order

  • フォーカス順序

参考情報

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

チェック内容

チェックID：0172

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

• リンクとボタン

• フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0172-keyboard-01がOKであることを確認する。

0172-keyboard-01：キーボード操作によるチェック方法の例

Tabキー、またはShift+Tabキーでフォーカスを移動して、以下を確認する：

• すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

• フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている