ページ全体

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

ページ構造

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

[MUST]タイトルの指定

ガイドライン

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

チェック内容
デザイン(チェックID: 0631
  • そのページの目的を示し、かつ他のページとは異なるページ・タイトル(title要素)が設計資料で定義されている。

プロダクト(チェックID: 0651
  • そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。(ブラウザーのタイトルバー/タブバーに表示されている。)

意図

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

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

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

対応するWCAG 2.1の達成基準

[MUST]ページ内のリージョンの明示

ガイドライン

[MUST]ページ内のリージョンを示すマークアップをする。

チェック内容
デザイン(チェックID: 0661
  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

コード(チェックID: 0671
  • header, main, nav, footerの各要素が適切に用いられている。または

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

意図

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

  • 多くのスクリーン・リーダーには、リージョン間の移動をする機能がある。

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
コード(チェックID: 0672
  • main要素が本文の開始位置を反映している。または

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

プロダクト(チェックID: 0681
  • スクリーン・リーダーの見出しジャンプ機能やリージョン間ジャンプ機能で本文の開始位置を見つけることができる。

意図

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

  • 多くのスクリーン・リーダーには、リージョン間を移動する機能、見出し間を移動する機能がある。

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

対応するWCAG 2.1の達成基準

[MUST]適切な記述順序

ガイドライン

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

チェック内容
プロダクト(チェックID: 0711
  • ページの状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
デザイン(チェックID: 0721
  • ページ内の機能や内容の区切り、本分の先頭部分などに適切に見出しが配置されている。

コード(チェックID: 0731
  • h1h6要素で見出しが適切にマークアップされている。

プロダクト(チェックID: 0741
  • スクリーン・リーダーが見出しを適切に見出しとして認識している。

意図

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

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

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

対応するWCAG 2.1の達成基準

ページの方向

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

ガイドライン

[MUST]特定の画面方向(縦置き/横置き)での利用を強制しない。

チェック内容
デザイン(チェックID: 0751
  • 特定の画面方向に固定した使用を前提としたデザインになっていない。

プロダクト(チェックID: 0771
  • 画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

意図

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

対応するWCAG 2.1の達成基準