ページ全体

これらのガイドラインは、ページ全体に関するもので、すべてのページが対象です。

タイトルの指定

title要素に、ページの主題又は目的を説明したタイトルを記述する。

対象プラットフォーム

Web

意図

ページ全体を一望することができない視覚障害者が、目的のページにアクセスしているかどうか判断できるようにする。

多くのスクリーン・リーダーにはタイトルバーの内容を簡単に確認できる機能がある。
多くのスクリーン・リーダーでは、複数のウィンドウを切り替える操作をする際タイトルバーの内容が読み上げられる。

対応するWCAG 2.1の達成基準

達成基準2.4.2(レベルA)：
- Page Titled
- ページタイトル

参考情報

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0631

そのページ/画面の目的を示し、かつ他のページ/画面とは異なるタイトルが設計資料で明示されている。

対象: デザイン
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0651

そのページ/画面の目的を示し、かつ他のページ/画面とは異なるタイトルが付けられている。

ブラウザーのタイトルバー/タブバーに表示されている。

対象: プロダクト
対象プラットフォーム: Web
重篤度: [NORMAL]

ページを構成する領域の明示

ページを構成する領域を示すマークアップをする。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術が、ページの構成を適切にユーザーに提示できるようにする。

多くのスクリーン・リーダーには、ARIAランドマークで示される領域間を移動する機能がある。
スクリーン・リーダーのユーザーは、ページ内の目的の部分に容易に移動できる。

対応するWCAG 2.1の達成基準

達成基準1.3.1(レベルA)：
- Info and Relationships
- 情報及び関係性

参考情報

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0661

ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

対象: デザイン
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0671

header, main, nav, footerの各要素が適切に用いられている。または
これらがrole属性で明示されている。

対象: コード
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

対象: プロダクト
対象プラットフォーム: Web
重篤度: [NORMAL]

チェック手順：Web

以下のaxe DevToolsによるチェックとLandmark Navigation via Keyboard or Pop-upによるチェックの両方を満たしていることを確認する。

axe DevToolsによるチェック方法の例

画面上に表示されているコンテンツに対して、以下のいずれの問題も発生しないことを確認する。（非表示箇所に対して以下の問題が発生しても、通常は問題ない。）

本文の開始位置の明示

本文が始まる位置を示すマークアップをする。

対象プラットフォーム

Web

意図

視覚障害者が、容易に本文の先頭を見つけられるようにする。

多くのスクリーン・リーダーには、ARIAランドマークで示される領域間を移動する機能、見出し間を移動する機能がある。
スクリーン・リーダーのユーザーは、領域間を移動する機能でmain要素の先頭に移動したり、見出し間を移動する機能で本文の直前に移動したりして、迅速に本文を読み始めることができる。

対応するWCAG 2.1の達成基準

達成基準2.4.1(レベルA)：
- Bypass Blocks
- ブロックスキップ

参考情報

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0672

main要素が本文の開始位置を反映している。または
本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

対象: コード
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0681

スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

対象: プロダクト
対象プラットフォーム: Web
重篤度: [NORMAL]

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

NVDAによるチェック方法の例

以下のいずれかの方法で、本文またはその画面の中心的な機能の開始位置を容易に見つけられることを確認する。

ブラウズ・モードで、次/前の見出しへの移動（H / Shift + Hキー）を用いて、本文直前の見出しに移動できる
ブラウズ・モードで、次のランドマークへの移動（Dキー）でmain要素の先頭部分に移動でき、その直後から本文が始まっている

参考動画：本文の開始位置【NVDAでアクセシビリティーチェック】

macOS VoiceOverによるチェック方法の例

以下のいずれかの方法で、本文またはその画面の中心的な機能の開始位置を容易に見つけられることを確認する。

次/前の見出しへの移動（VO + Command + H / VO + Command + Shift + Hキー）を用いて、本文直前の見出しに移動できる
以下の手順でmain要素の先頭部分に移動でき、その直後から本文が始まっている
1. VO + Uキーを押下してローターのメニューを表示
2. 「ランドマーク」を選択
3. 「本文」を選んでEnterキーを押下

適切な記述順序

最初から順に読み進めた場合に、コンテンツの意味が正しく伝わるような順序でHTMLの各要素を記述する。

対象プラットフォーム

Web

意図

スクリーン・リーダーなどの支援技術のユーザーが、コンテンツを正しく理解できるようにする。

画面上で近接して表示されているコンテンツは、HTMLソース中ても同様に近接して記述することで、スクリーン・リーダーのユーザーにも見つけやすく、認知しやすくなる。
CSSでレイアウトを制御しているような場合に注意が必要。

対応するWCAG 2.1の達成基準

達成基準1.3.2(レベルA)：
- Meaningful Sequence
- 意味のある順序

参考情報

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

NVDAによるチェック方法の例

ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

適切なセクション分けと見出しの付与

コンテンツを適切にセクション分けし、スクリーン・リーダーが認識できる形で見出しを付ける。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が、ページ内で目的のコンテンツを見つけやすくする。

多くのスクリーン・リーダーは、見出し間で移動する機能、見出しのリストを表示する機能がある。
適切な見出しが付けられていれば、見出しを追うことで斜め読みのような読み方ができる。

対応するWCAG 2.1の達成基準

達成基準2.4.10(レベルAAA)：
- Section Headings
- セクション見出し

参考情報

適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス

チェック内容

チェックID：0541

見出しとして表現されるべきものが、設計資料で明示されている。

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェックID：0543

見出しには適切な見出しレベルが指定されている：

文書の階層構造を反映した見出しレベルが指定されている
ページ全体では、見出しレベルは1から始まっている
見出しレベルは、1の下位は2、2の下位は3のように1ずつ増加していて、抜けがない状態になっている

対象: デザイン
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0721

ページ内の機能や内容の区切り、本文の先頭部分などに適切に見出しが配置されている。

対象: デザイン
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0722

複数の種類の情報を含む画面においては、情報の区切りに見出しが配置されている。

対象: デザイン
対象プラットフォーム: モバイル
重篤度: [NORMAL]

チェックID：0551

見出しが、設計資料に従って適切に実装されている。

対象: コード
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

実装方法の例：見出しの実装

Web: h1～h6でマークアップする。
iOS: UIAccessibilityTraits.headerをセットする。
Android: 当該テキストに対してandroid:accessiblityHeadingをtrueに設定する（Android 9以降）

チェックID：0561

見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

axe DevToolsによるチェック方法の例

以下のいずれの問題も出ないことを確認する。

NVDAによるチェック方法の例

以下の手順で見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。

ブラウズ・モードで要素リストを表示（NVDA+F7）
「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティーチェック】

macOS VoiceOverによるチェック方法の例

以下の手順で見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。

VO + Uを押下してローターのメニューを表示
「見出し」を選択

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

ローター・ジェスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

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

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

読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

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

画面方向を固定しない

コンテンツの性質上必要不可欠な場合を除いて、特定の画面方向（縦置き/横置き）での利用を強制しない。

対象プラットフォーム

Web、モバイル

意図

タブレットなどの端末を、特定の方向（縦置き/横置き）に固定して使う必要がある肢体不自由者などが、コンテンツを利用することを妨げない。

対応するWCAG 2.1の達成基準

達成基準1.3.4(レベルAA)：
- Orientation
- 表示の向き

参考情報

画面の表示方向と肢体不自由者の利用

チェック内容

チェックID：0751

特定の画面方向に固定した使用を前提としたデザインになっていない。

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

チェックID：0771

画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

コンポーネントの一貫した出現順序

ナビゲーション・メニューなど、複数のページに共通して用いられるコンポーネントは、すべてのページで同じ出現順序にし、コンポーネント内でのリンクの出現順序も同じにする。

対象プラットフォーム

Web、モバイル

意図

視覚障害者、認知障害者などが、ページの構成を容易に予測できるようにする。

共通部分に一貫性があれば、複数のページで毎回すべての表示内容を確認しなくても、推測に基づく操作がしやすくなる。

対応するWCAG 2.1の達成基準

達成基準3.2.3(レベルAA)：
- Consistent Navigation
- 一貫したナビゲーション

参考情報

使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0661

ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

対象: デザイン
対象プラットフォーム: Web
重篤度: [NORMAL]

チェックID：0781

グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ
これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェックID：0801

グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページ/画面で共通に用いられている構成要素は、すべてのページ/画面で同じ出現順序になっている。かつ
これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェック手順：Web

以下のキーボードによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

TabキーおよびShift+Tabキーでフォーカスを移動した際、複数のページで移動順序が一貫していることを確認する。

NVDAによるチェック方法の例

ブラウズ・モードで上下矢印キーで読み上げさせたとき、複数のページで読み上げ順序が一貫していることを確認する。

参考動画：同じ出現順序【NVDAでアクセシビリティーチェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせたとき、複数のページで読み上げ順序が一貫していることを確認する。

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面一貫していることを確認する。

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

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

1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。

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

複数の到達手段

そのページへの到達手段を複数提供する。ただし、そのページが何らかの手順の実行の過程や結果としてしか表示されない場合は除く。

対象プラットフォーム

Web、モバイル

意図

利用環境や認知能力などの違いにかかわらず、そのページへのアクセスのしやすさを確保する。

対応するWCAG 2.1の達成基準

達成基準2.4.5(レベルAA)：
- Multiple Ways
- 複数の手段

参考情報

使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0811

そのページへの到達手段が複数ある。ただし、特定のの操作の結果として表示されるページや、何らかの手順（例：ウィザード）の途中で表示されるようなページは除く。

例：

ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。
特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。
ヘルプ・ページ中のリンクからも遷移できる。

対象: デザイン
対象プラットフォーム: Web
重篤度: [MINOR]

現在地の明示

そのページが、サイト構造のどこに位置しているかが分かるようにする。

対象プラットフォーム

Web、モバイル

意図

ページ全体を一望することができない視覚障害者が、目的のページにアクセスしているかどうか判断できるようにする。

スクリーン・リーダーによっては、aria-current属性が付与されているメニュー・アイテムなどに「現在のページ」などという読み上げが追加される。

対応するWCAG 2.1の達成基準

達成基準2.4.8(レベルAAA)：
- Location
- 現在位置

参考情報

使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

チェック内容

チェックID：0841

グローバル・ナビゲーションやいわゆるパンくずリストがある場合、そのページ/画面のサイトやアプリケーション内での位置がグローバル・ナビゲーションやパンくずリスト内で示されている。

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェックID：0851

グローバル・ナビゲーションやパンくずリスト内でそのページ/画面の位置が明示されている。

対象: コード
対象プラットフォーム: Web
重篤度: [NORMAL]

実装方法の例：位置の明示

Web

aria-current属性の付与

チェックID：0861

スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

NVDAによるチェック方法の例

ブラウズ・モードでの矢印キーの操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声があることを確認する。

参考動画：現在のページ【NVDAでアクセシビリティーチェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによる読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声があることを確認する。

チェックID：0862

グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような表示がされている。

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

ページ全体

タイトルの指定

チェック内容

ページを構成する領域の明示

チェック内容

チェック手順：Web

axe DevToolsによるチェック方法の例

Landmark Navigation via Keyboard or Pop-upによるチェック方法の例

本文の開始位置の明示

チェック内容

チェック手順：Web

NVDAによるチェック方法の例

macOS VoiceOverによるチェック方法の例

適切な記述順序

チェック内容

チェック手順：Web

NVDAによるチェック方法の例

macOS VoiceOverによるチェック方法の例

適切なセクション分けと見出しの付与

チェック内容

実装方法の例：見出しの実装

チェック手順：Web

axe DevToolsによるチェック方法の例

NVDAによるチェック方法の例

macOS VoiceOverによるチェック方法の例

チェック手順：モバイル

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

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

画面方向を固定しない

チェック内容

コンポーネントの一貫した出現順序

チェック内容

チェック手順：Web

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

NVDAによるチェック方法の例

macOS VoiceOverによるチェック方法の例

チェック手順：モバイル

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

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

複数の到達手段

チェック内容

現在地の明示

チェック内容

実装方法の例：位置の明示

チェック手順：Web

NVDAによるチェック方法の例

macOS VoiceOverによるチェック方法の例