ページ全体

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

[MUST]タイトルの指定

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

意図

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

  • 多くのスクリーン・リーダーにはタイトルバーの内容を簡単に確認できる機能がある。

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

対応するWCAG 2.1の達成基準

SC 2.4.2:

参考情報

チェック内容

チェックID:0631

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID:0651

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

Webの場合

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

モバイルの場合

画面のタイトルとして表示されている。

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

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

意図

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

  • 多くのスクリーン・リーダーには、ARIAランドマークで締め去れる領域間を移動する機能がある。

  • スクリーン・リーダーのユーザーは、ページ内の目的の部分に容易に移動できる。

対応するWCAG 2.1の達成基準

SC 1.3.1:

参考情報

チェック内容

チェックID:0661

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID:0671

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

[MUST]本文の開始位置の明示

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

意図

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

  • 多くのスクリーン・リーダーには、ARIAランドマークで示される領域間を移動する機能、見出し間を移動する機能がある。

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

対応するWCAG 2.1の達成基準

SC 2.4.1:

参考情報

チェック内容

チェックID:0672

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

  • main要素が本文の開始位置を反映している。または

  • 本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

チェックID:0681

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

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

以下のいずれかの方法で、本文やその画面の中心的な機能の開始位置に移動することができる。

  • ブラウズ・モードで、次/前の見出しへの移動(H/Shift+Hキー)を実行して、容易に本文直前の見出しに移動できる

  • ブラウズ・モードで、次のランドマークへの移動(Dキー)でmain要素の先頭部分に容易に移動でき、その直後から本文が始まっている

[MUST]適切な記述順序

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

意図

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

  • 画面上で近接して表示されているコンテンツは、HTMLソース中ても同様に近接して記述することで、スクリーン・リーダーのユーザーにも見つけやすく、認知しやすくなる。

  • CSSでレイアウトを制御しているような場合に注意が必要。

対応するWCAG 2.1の達成基準

SC 1.3.2:

参考情報

チェック内容

チェックID:0711

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

NVDAによるチェック実施方法の例
  • ブラウズ・モードでページ先頭からカーソルキー操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

iOS VoiceOverによるチェック実施方法の例
  • 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

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

Android TalkBackによるチェック実施方法の例
  • 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

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

コンテンツを適切にセクション分けし、h?要素を使って見出しを付ける。

意図

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

  • 多くのスクリーン・リーダーは、見出し間で移動する機能、見出しのリストを表示する機能がある。

  • 適切な見出しが付けられていれば、見出しを追うことで斜め読みのような読み方ができる。

対応するWCAG 2.1の達成基準

SC 2.4.10:

参考情報

チェック内容

チェックID:0721

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID:0722

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

[MUST]画面方向を固定しない

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.3.4:

参考情報

チェック内容

チェックID:0751

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID:0771

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

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

意図

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

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

対応するWCAG 2.1の達成基準

SC 3.2.3:

参考情報

チェック内容

チェックID:0661

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID:0781

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

  • これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

チェックID:0801

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

  • これらの構成要素の中でのリンクやボタンの出現順序は、すべてのページ/画面で同じになっている。

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

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

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

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

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

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

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

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

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

[SHOULD]複数の到達手段

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

意図

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

対応するWCAG 2.1の達成基準

SC 2.4.5:

参考情報

チェック内容

チェックID:0811

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

そのページへの到達手段が複数ある。

例:

  • ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。

  • 特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。

  • ヘルプ・ページ中のリンクからも遷移できる。

[SHOULD]現在地の明示

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

意図

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

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

対応するWCAG 2.1の達成基準

SC 2.4.8:

参考情報

チェック内容

チェックID:0841

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID:0851

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

実装方法の例:位置の明示
Web
  • aria-current属性の付与

iOS
  • ナビゲーションバーのタイトルを適切に設定する

Android
  • ナビゲーションをcontentDescriptionのないアイコン画像のみにしない

チェックID:0861

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

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

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

チェックID:0862

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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