ナビゲーション可能のガイドライン

2.4.1ブロックスキップ の達成基準（レベルA）

ランドマークを正しく設定する

この達成基準は、利用者がコンテンツを効率的かつ容易に利用できるようにすることを目的としています。特に、支援技術を使用する利用者にとって、ランドマークと見出しが適切に設定されていることは非常に重要です。これにより、繰り返されるナビゲーションやヘッダーを省略し、メインコンテンツに素早くアクセスすることができます。

実践すべきこと

WCAG 2.0

構造の明確化

• ランドマークと見出しを適切に設定し、コンテンツの構造が利用者にとって理解しやすいようにする。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、ランドマークと見出しが適切に設定されているかを定期的にチェックする。

開発者への注意

HTMLの適切な使用

• <header>、<nav>、<main>などのHTML構造化要素を適切に使用して、ページの構造を明確にする。

見出しの階層

• <h1>から<h6>までの見出しタグを階層構造に従って正しく使用し、コンテンツの概要が把握しやすいようにする。

アクセス容易性の向上

• タブ操作でメインコンテンツに2～3回程度で到達できるように、ナビゲーションの構造を工夫する。

ランドマークの入れ子

• <header>や<footer>のなかに<nav>を入れると、ランドマーク構造が不自然になる場合があるため必要に応じて確認する。

2.4.2 ページタイトルの達成基準（レベルA）

ページの内容が一目でわかるタイトルを設定する

この達成基準は、各ページにその内容を示すタイトルを付けることで、利用者がコンテンツを見つけやすく、自分の現在位置を容易に確認できるようにすることを目的としています。適切なタイトルの設定により、利用者は効率的にコンテンツにアクセスでき、サイト内を自由に移動できるようになります。

実践すべきこと

WCAG 2.0

明確なタイトルの設定

• 各ページには、その内容を正確に反映する明確なタイトルを設定する。

位置と関連性の反映

• タイトルはサイト内の位置やページの関連性が理解できるものを選ぶ。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、適切なページタイトルが設定されているか定期的にチェックする。

タイトルの内容

• 別ジャンルでカテゴリー名が同名の場合ページタイトルが重複する可能性があるので注意する。
• 見出しにコンテンツの内容を含まない（文章にしない）

開発者への注意

<title>要素の使用：

• ページの<title>要素に、その内容を適切に示すテキストを設定する。

ナビゲーションとの整合性

• サイトマップやナビゲーション構造を考慮して、利用者が自分の現在位置を把握しやすいようなタイトルを付ける。

2.4.3フォーカス順序の達成基準（レベルA）

キーボードナビゲーションのためにフォーカスの順序を正しくする

この達成基準は、キーボードのみでウェブページを操作する利用者が、コンテンツ内を順序良く、かつ予測可能な方法で移動できるようにすることを目的としています。

実践すべきこと

WCAG 2.0

論理的なフォーカス順序

• ページ上のフォーカス可能な要素は、コンテンツの構造と自然な読み取り順序にする。

予測可能な順序

• ユーザーが次にどの要素がフォーカスされるかを容易に予測できるように、フォーカスの順序を設計する。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいて、フォーカスの順序が適切に保たれているかを定期的にチェックする。

開発者への注意

論理的なマークアップ

• ページのマークアップは、論理的な構造に基づいて行い、フォーカス順序を自然かつ意味のあるものにする。

タブインデックスの慎重な使用

• タブインデックスの値を使用してフォーカス順序をカスタマイズする場合は、ナビゲーションの予測可能性を損なわないように注意深く行う。

2.4.4リンクの目的（コントラスト内）の達成基準（レベルA）

テキストリンクは、リンク先のページを理解できるよう明確にする

この達成基準は、利用者がページ上の各リンクをクリックする前に、そのリンク先の目的や内容を理解できるようにすることを目的としています。

実践すべきこと

WCAG 2.0

明瞭なリンクテキスト

• リンクテキストは明確で、クリックすることでアクセスされるページの内容や目的を利用者が容易に理解できるものにする。

コンテキストの提供

• リンクテキストだけでリンク先の内容を完全に伝えることが難しい場合は、リンクの近くに追加の説明を提供することで、リンク先のページの目的を理解できるようにする。
• 必ずしも外部リンクは別ウインドウで開く必要はないが挙動はサイト内で統一する。

運用者への注意

リンクの確認

• リンクが適切に設定され、リンクの目的が明確にされているかを確認する。
• 自身のページへのリンクはなるべくない方が望ましい。
• リンク先名に悩む場合は遷移先のタイトルが妥当。
• 外部リンクを別ウインドウで開く場合、テキストなどで事前に知らせる方が望ましい。

開発者への注意

適切なリンクテキストの選択

• リンクテキストは利用者がリンク先を推測しやすいように、具体的かつ分かりやすい表現を選ぶ。

コンテキストの活用

• リンクテキストのみでリンク先の内容を十分に伝えられない場合は、リンクの直前や直後のテキストを利用してリンク先の内容を補足し、理解を助ける。

2.4.5複数の手段の達成基準（レベルAA）

サイト内を回遊するための複数のナビゲーション手段の提供する

この達成基準は、利用者が情報を見つける過程をより柔軟で使いやすくすることを目的としています。複数のナビゲーション手段を提供することで、利用者はそれぞれに合った手段を選択でき、目的のコンテンツにスムーズにアクセスできるようになります。

実践すべきこと

WCAG 2.0

サイトマップの提供

• サイト全体の構造を把握しやすいサイトマップを提供する。

検索機能の提供

• キーワード検索を通じて情報を探せる検索機能を設置する。

関連ページへのリンク

• 主要なセクションや関連する内容へ簡単に移動できるよう、ナビゲーションリンクを提供する。

グローバルナビゲーションの提供

• グローバルナビゲーションには、サイト内の主要なページへのリンクと、遷移先に現在位置から子階層へのリンクを設定する。

ホームページからの全ページリンク（小規模サイト向け）

• 小規模なウェブサイトの場合、ホームページからサイト内の全ページへのリンクを提供することが有効。

運用者への注意

リンクの維持

• リンクが切れていないかを定期的にチェックする。

ナビゲーション手段の確認

• 新規ページや更新されたコンテンツにおいて適したナビゲーション手段が用意されているかチェックする。

開発者への注意

実装の適正化

• サイトマップや検索機能を正しく実装し、ページ間の関連性に基づいた自然なナビゲーションパスを設計する。

2.4.6見出し及びラベルの達成基準（レベルAA）

見出しやラベルは、分かりやすく、簡潔に伝える

この達成基準は、利用者がページ内の情報やフォームコントロールの目的を容易に理解できるようにすることを目的としています。適切な見出しとラベルを設定することで、利用者は自分が探している情報や操作しようとしている入力フィールドを簡単に識別できるようになります。

実践すべきこと

WCAG 2.0

内容の明確な表現

• 見出しやラベルは、対象となるコンテンツや機能の目的を明確かつ簡潔に伝えるようにする。

運用者への注意

適切な情報の提供

• 見出しには関連する内容のみを含め、余計な情報を避ける。

定期的な確認

• 新規ページや更新されたコンテンツにおいて適切な見出しやラベルが設定されているか定期的にチェックする。

開発者への注意

見出しタグの適切な使用

• <h1>から<h6>までの見出しタグを、ページの構造に沿った階層で使用する。

フォームコントロールのラベル付け

• フォームコントロールには、利用者が理解しやすいラベルを設定する。
• ラベルと入力フィールドの関連付けは明確にする。

簡潔さと明確さ

• 見出しやラベルのテキストは、分かりやすく、簡潔に保つことが重要。

2.4.7フォーカスの可視化の達成基準（レベルAA）

キーボード操作によるフォーカス変更を視覚的に明確にする

この達成基準は、現在どの要素がフォーカスされているかを利用者が視覚的に識別できるようにすることを目的としています。適切なフォーカススタイルを設定することで、利用者はキーボードナビゲーション中の現在位置を把握しやすくなります。

実践すべきこと

WCAG 2.0

フォーカスの視覚化

• キーボードでのフォーカス移動時に、そのフォーカス位置が明確に視覚化されるようにする。

運用者への注意

定期的な確認

• 新規ページや更新されたコンテンツにおいてフォーカスが適切に視覚化されているかを定期的にチェックする。

開発者への注意

デフォルトスタイルの保持

• デフォルトのフォーカススタイルを不必要に上書きしない。
• カスタムスタイルを適用する場合は、フォーカスが視覚的に明確になるように注意深く設計する。

2.4.8 現在位置の達成基準（レベルAAA）

WCAG 2.1 解説書

2.4.9 リンクの目的 (リンクのみ)の達成基準（レベルAAA）

WCAG 2.1 解説書

2.4.10 セクション見出しの達成基準（レベルAAA）

WCAG 2.1 解説書

2.4.11 隠されないフォーカス（最低限）の達成基準（レベルAA）

WCAG2.2

2.4.12 隠されないフォーカス（高度）の達成基準（レベルAAA）

WCAG2.2

2.4.13 フォーカスの外観の達成基準（レベルAAA）

WCAG2.2

目次へ戻る