ページ全体

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

ページ構造

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

[MUST] タイトルの指定

ガイドライン

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

チェック内容
  • 挙動:そのページの目的を示すタイトルが付けられている。(ブラウザーのタイトルバー/タブバーに表示されている。)

  • 挙動: 複数のページに同じタイトルが付いていない。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • マークアップ:header,nav,main,footerの各要素が適切に用いられている。または

  • マークアップ:role属性で適切にリージョンが明示されている。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • マークアップ:main要素が本文の開始位置を反映している。

  • マークアップ: 本文やその画面の先頭部分に適切なレベルのh?要素のテキストがある。

意図

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

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

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

対応するWCAG 2.1の達成基準

[MUST] 適切な記述順序

ガイドライン

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

チェック内容
  • 挙動、マークアップ: スクリーン・リーダーで読み上げさせたとき、内容的、および視覚的に自然な順序で読み上げられる。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • ビジュアル、マークアップ: ページ内の機能や内容の区切り、本分の先頭部分などに適切に見出しが配置されていて、スクリーン・リーダーが見出しとして認識する。

意図

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

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

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

対応するWCAG 2.1の達成基準

ページの方向

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

ガイドライン

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

チェック内容
  • ビジュアル、挙動: 画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

意図

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

対応するWCAG 2.1の達成基準