リンク¶
これらのガイドラインは、リンクに関するものです。
ここでリンクとは、ユーザーがクリック（タッチ）することでページ遷移や何らかの機能が実行されるものを差します。リンクにはテキストのみで構成されているもの、アイコンが用いられているもの、画像とテキストの一方又は両方が用いられているものが含まれます。また、a要素で実装されているものに加えて、button要素で実装されていたり、適切なrole属性が付加されて実装されているものも含みます。
認知を可能にする¶
[MUST]複数の視覚的要素を用いた表現¶
- ガイドライン
[MUST]クリッカブルであることを、色だけで表現しない。
- チェック内容
- デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）
グレイスケール表示でも利用に支障が出ない:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
[MUST]適切なリンク・テキスト¶
- ガイドライン
[MUST]リンク・テキスト（
a要素の中身、アイコンのラベルなど）は、そのリンクの目的を判断できるものにする。- チェック内容
- デザイン（チェックID: 0241）
リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。
- プロダクト（チェックID: 0261）
「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または
リンク・テキストの意図がマークアップで明確になっている。
[MUST]一貫したリンク・テキスト¶
- ガイドライン
[MUST]同じ機能を実行するリンクは、サイト内で一貫性のあるリンク・テキストを付与する。
- チェック内容
- デザイン（チェックID: 0242）、プロダクト（チェックID: 0262）
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
[MUST]適切なフォーカス順序¶
- ガイドライン
[MUST] Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。
- チェック内容
- プロダクト（チェックID: 0172）
Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。
リンクとボタン
フォーム・コントロール
その他、マウスやキーボードによる操作を受け付けるすべてのもの