ページ全体

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

タイトルの指定

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

以下の0682-axe-01と0682-misc-01がOKであることを確認する。

0682-axe-01：axe DevToolsによるチェック方法の例

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

• bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)

• asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)

• contentinfoランドマークは他のランドマークに含まれるべきではありません (Contentinfo landmark should not be contained in another landmark)

• mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)

• ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)

• ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

• ランドマークが一意であることを確認します (Ensures landmarks are unique)

• ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)

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

Landmark Navigation via Keyboard or Pop-upをインストールしたブラウザーで表示した際、コンテンツのすべてのパーツが適切なARIAランドマークの領域に属していることを確認する。

本文の開始位置の明示

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

対象プラットフォーム

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

以下の0681-axe-01がOK、かつ(0681-nvda-01または0681-nvda-02または0681-macosvo-01または0681-macosvo-02がOK)であることを確認する。

0681-axe-01：axe DevToolsによるチェック方法の例

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

• ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)

• ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)

0681-nvda-01：NVDAによるチェック方法の例

NVDAのブラウズ・モードで、次/前の見出しへの移動（H / Shift + Hキー）を用いて、本文直前の見出しに移動できることを確認する。

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

0681-nvda-02：NVDAによるチェック方法の例

NVDAのブラウズ・モードで、次のランドマークへの移動（Dキー）でmain要素の先頭部分に移動でき、その直後から本文が始まっていることを確認巣る。

0681-macosvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverの次/前の見出しへの移動（VO + Command + H / VO + Command + Shift + Hキー）を用いて、本文直前の見出しに移動できることを確認する。

0681-macosvo-02：macOS VoiceOverによるチェック方法の例

macOS VoiceOverで以下の以下の操作を行って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

以下の0711-nvda-01または0711-macvo-01がOKであることを確認する。

0711-nvda-01：NVDAによるチェック方法の例

NVDAが起動している状態で、以下を確認する：

• ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

• 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

0711-macvo-01：macOS VoiceOverによるチェック方法の例

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：0551

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

Web

h1～h6でマークアップする。

iOS

UIAccessibilityTraits.headerをセットする。

Android

当該テキストに対してandroid:accessiblityHeadingをtrueに設定する（Android 9以降）

チェックID：0561

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

チェック手順：Web

以下の0561-axe-01がOK、かつ(0561-nvda-01または0561-macvo-01がOK)であることを確認する。

0561-axe-01：axe DevToolsによるチェック方法の例

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

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

0561-nvda-01：NVDAによるチェック方法の例

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

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

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

0561-macvo-01：macOS VoiceOverによるチェック方法の例

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

1. VO + Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェックID：0721

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0722

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

画面方向を固定しない

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

対象プラットフォーム

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

以下の0801-keyboard-01がOK、かつ(0801-nvda-01または0801-macvo-01がOK)であることを確認する。

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

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

0801-nvda-01：NVDAによるチェック方法の例

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

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

0801-macvo-01：macOS VoiceOverによるチェック方法の例

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

複数の到達手段

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

対象プラットフォーム

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

以下の0861-nvda-01または0861-macvo-01がOKであることを確認する。

0861-nvda-01：NVDAによるチェック方法の例

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

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

0861-macvo-01：macOS VoiceOverによるチェック方法の例

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

チェックID：0862

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]