アクセシビリティー・チェック全項目一覧

書くガイドラインの「チェック内容」に示したものを、チェックID順に掲載しています。

それぞれ、以下の項目を記しています。

  • チェックID

  • チェック内容

  • 対象：デザイン、コード、またはプロダクト

  • 関連ガイドライン：そのチェックによって対応状況を確認することができるガイドライン

  • 参考情報：そのチェックの意図や実施方法に関する情報が記されているものもあります（各関連ガイドラインで掲載しているものと同じです。）

  • チェック実施方法の例を記しているものもあります（チェック実施方法の例からリンクされているページにある内容と同じものです）

チェックID: 0001

アイコンや画像に関して、充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。

  • アイコンと背景色

  • 画像内の重要な情報とその背景色

  • 画像および画像化されたテキストとその隣接領域

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0002

テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

  • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

  • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

  • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0021

テキストの表示色と背景色には、充分なコントラスト比が確保されている。

  • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

  • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

  • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

対象

プロダクト

関連ガイドライン
参考情報

axe DevToolsを用いたチェック実施方法の例

「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。

ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。

  • マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合

  • 大きいテキストのコントラスト比が3:1以上4.5:1未満の場合

    • freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px（22pt）以上または22px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない

  • テキスト以外のコントラスト比が不足している場合

    • アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など

  • 半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合

  • 要素が重なっていて背景色と前景色の特定が難しい場合

チェックID: 0031

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0032

形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。

例：

避けるべき表現

  • 赤字の項目は必須項目です

  • 右の表を参照してください

  • 青いボタンを押してください

問題のない表現

  • 赤い※印のついた項目は必須項目です

  • 右の表（表3）を参照してください

  • 青い「保存」ボタンを押してください

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0051

グレイスケール表示でも利用に支障が出ない:

  • リンク箇所を判別できる

  • 画像、テキストの意図が伝わる

  • 入力フォームの必須項目、エラーを認知できる

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0071

マウス・ボタンのdownイベントをトリガーにしていない。

対象

コード

関連ガイドライン
参考情報

チェックID: 0081

マウス・クリックを受け付けるリンクやボタンなどは、マウス・ボタンを押下した状態でマウス・ポインターを外し、マウス・ボタンを放した場合、その機能が実行されない。（ドラッグ&ドロップは対象外）

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0091

ホバーで表示されるすべてのコンテンツは、以下のすべてを満たす設計になっている:

  • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など）

  • ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0092

ホバーで表示されるすべてのコンテンツは、ポインターをそのコンテンツ上に移動しても、コンテンツが消えない設計になっている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0111

ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている:

  • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など）

  • ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0112

ホバーで表示されるすべてのコンテンツは、ポインターをそのコンテンツ上に移動しても、コンテンツが消えない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0141

ショートカットキーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている：

  • ユーザーがショートカットキーを無効にできる

  • ユーザーがショートカットキーの割当を変更できる

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0151

デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターを設計資料で明示している。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0152

Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない：

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

  • モーダル・ダイアログの表示

  • 表示内容の大幅な変更、など

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0171

Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている：

  • フォーカス・インジケーターまたはそれを代替する表示がある

  • 自動的に次のような挙動が発生しない：

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

    • モーダル・ダイアログの表示

    • 表示内容の大幅な変更など

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0172

Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール

  • その他、マウスやキーボードによる操作を受け付けるすべてのもの

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0201

何らかの機能を提供するためにページ中に埋め込まれているコンポーネントにフォーカスがあるとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。

例：

  • 動画や音声コンテンツのプレイヤー

  • デート・ピッカーなど、フォーム入力のためにJavaScriptで実装されたコンポーネント

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0211

クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0231

クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0241

リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。

対象

デザイン

関連ガイドライン

チェックID: 0242

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

デザイン

関連ガイドライン

チェックID: 0261

  • 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または

  • リンク・テキストの意図がマークアップで明確になっている。

対象

プロダクト

関連ガイドライン

チェックID: 0262

同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

対象

プロダクト

関連ガイドライン

チェックID: 0271

見出しのテキストは、内容を適切に示す文言になっている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0311

文字サイズの指定において、絶対値指定（例：px）と相対値指定（例：rem）が混在していない。

対象

コード

関連ガイドライン
参考情報

チェックID: 0321

ブラウザーのズーム機能で200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0322

1280x1024のサイズのウィンドウにおいて400パーセントの拡大表示をしたときに適切にリフローされ

  • 横書きのコンテンツでは横スクロールが、縦書きのコンテンツでは縦スクロールが発生しない、かつ

  • 読み取れない内容や利用できない機能がない

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0323

ブラウザーの文字サイズ変更機能で200パーセントの拡大表示をする設定をしても、テキストの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0324

ブラウザーの文字サイズ変更機能で200パーセントまで拡大することができ、その際テキストの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0331

ボタンなどのサイズが、デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上になっていることを確認している。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0351

ボタンなどのサイズが、デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上になっていることを確認している。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0361

以下のような機能が設計資料に存在しない：

  • 特定の入力ディバイスで発生するイベントのみをトリガーにした機能

  • 使用できる入力ディバイスを、特定の時点で検出されたものに限定している機能

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0391

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

対象

デザイン

関連ガイドライン

チェックID: 0401

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

対象

コード

関連ガイドライン

チェックID: 0411

アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

対象

プロダクト

関連ガイドライン

NVDAを用いたチェック実施方法の例

以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。

  • ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき

  • そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

チェックID: 0412

テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

対象

プロダクト

関連ガイドライン

チェックID: 0421

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0431

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

対象

コード

関連ガイドライン
参考情報

チェックID: 0441

画像の説明がスクリーン・リーダーで適切に読み上げられる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

  • 以下の操作をしたとき、画像に関する完結な読み上げがされることを確認する。- ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき- その画像がリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき

  • 詳細な説明が必要な画像の場合、以下のいずれかを満たしている- 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでのカーソルキー操作で読み上げさせることができる- ブラウズ・モードで次/前の画像への移動（G/Shift+Gキー）を実行して当該の画像を読み上げさせたときに、詳細な説明が読み上げられる

axe DevToolsを用いたチェック実施方法の例

「画像には代替テキストがなければなりません」という問題が出ないことを確認する。

ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。

チェックID: 0451

情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0461

情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

対象

コード

関連ガイドライン
参考情報

チェックID: 0471

情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

ブラウズ・モードでのカーソルキー操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない

チェックID: 0481

画像化されたテキストを用いて実装する対象として、自社および他者のロゴ、バナー、図や写真の中の文字列以外のものが設計資料中に存在しない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0501

自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0521

画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

対象

コード

関連ガイドライン
参考情報

チェックID: 0531

画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

ブラウズ・モードでのカーソルキー操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる

チェックID: 0541

見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

対象

デザイン

関連ガイドライン

チェックID: 0551

見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

対象

コード

関連ガイドライン

チェックID: 0561

設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

対象

プロダクト

関連ガイドライン

NVDAを用いたチェック実施方法の例

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

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

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

チェックID: 0562

スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

対象

プロダクト

関連ガイドライン

NVDAを用いたチェック実施方法の例

  • 以下の手順で表を発見可能：

    1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）

    2. 前後の表への移動（TまたはShift+Tキー）で、表に移動

  • 以下の手順で、表中のセル間を移動しながら読み上げが可能：

    1. ブラウズ・モードで表の先頭部分を探す

    2. 以下のキー操作でセル間を移動し、移動先のセルの内容が読み上げられることを確認する：

      • Ctrl+Alt+←：左のセル

      • Ctrl+Alt+→：右のセル

      • Ctrl+Alt+↓：下のセル

      • Ctrl+Alt+↑：上のセル

参考：読み上げられる内容について

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

  • 左右の移動：移動先のセルの列見出し、列の番号、セルの内容

  • 上下の移動：移動先のセルの行見出し、行の番号、セルの内容

単にカーソルキーを操作した場合は、以下のような内容が読み上げられます。

  • 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で開業がある場合などは、セルの1部分だけが読み上げられることもある。

  • 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

チェックID: 0571

validatorやlinterでチェックが通る。

対象

コード

関連ガイドライン
参考情報

チェックID: 0591

静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

以下のすべてを満たしている：

  • ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

  • その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

  • 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

  • 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

チェックID: 0611

日本語のページには、<html lang="ja">の記述がある。

対象

コード

関連ガイドライン
参考情報

チェックID: 0621

多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

  1. NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照）

  2. ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、表示されているテキストが問題なく読み上げられることを確認する。

チェックID: 0631

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0651

そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。（ブラウザーのタイトルバー/タブバーに表示されている。）

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0661

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0671

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

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

対象

コード

関連ガイドライン
参考情報

チェックID: 0672

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

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

対象

コード

関連ガイドライン
参考情報

チェックID: 0681

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

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

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

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

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

チェックID: 0711

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

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

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

チェックID: 0721

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0731

h1～h6要素で見出しが適切にマークアップされている。

対象

コード

関連ガイドライン
参考情報

チェックID: 0751

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0771

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

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0781

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

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0801

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

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

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0811

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

例：

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

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

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0841

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

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0851

aria-current属性を用いて、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が明示されている。

対象

コード

関連ガイドライン
参考情報

チェックID: 0861

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

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

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

チェックID: 0862

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

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0891

line-heightを1.5em以上、段落間の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 0911

複数の言語が含まれているテキストについて、適切にlang属性が指定されている。

対象

コード

関連ガイドライン
参考情報

チェックID: 0921

複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

  1. NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照）

  2. ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。

チェックID: 0931

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0941

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

対象

コード

関連ガイドライン
参考情報

チェックID: 0951

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

対象

プロダクト

関連ガイドライン
参考情報

axe DevToolsを用いたチェック実施方法の例

「フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。

チェックID: 0961

フォームの入力に制限時間を設ける場合：

  • 事前にユーザーがその制限時間を解除することができる。又は、

  • 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

  • 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

  • リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

  • 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

  • 制限時間が20時間よりも長い。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 0991

フォーム入力に制限時間が設けられていない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1021

制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1051

フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こるような機能が設計資料に存在しない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1071

フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1081

フォーム入力でエラーが発生したとき、エラー内容が分かる具体的な表示文言が設計資料で定義されている

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1101

フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1111

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1131

フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1141

法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能になっている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1171

ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1181

操作の結果などを伝えるステータス・メッセージには適切にaria-live属性が付与されている。

対象

コード

関連ガイドライン
参考情報

チェックID: 1191

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

対象

プロダクト

関連ガイドライン
参考情報

NVDAを用いたチェック実施方法の例

設計資料に従ってステータス・メッセージが表示される操作を行い、ステータス・メッセージが自動的に読み上げられることを確認する。

参考：期待される挙動を確認する場合は、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

チェックID: 1201

点滅、スクロールを伴うコンテンツがない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1221

点滅、スクロールを伴うコンテンツがない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1231

  • 自動更新されるコンテンツがない。または

  • ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1251

  • 自動更新されるコンテンツがない。または

  • ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1261

1秒間に3回以上光るコンテンツがない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1281

1秒間に3回以上光るコンテンツがない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1291

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1311

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1321

ログイン・セッションにタイムアウトを設ける場合：

  • ログイン時などに、ユーザーがセッション・タイムアウトの設定を解除することができる。又は、

  • ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、大幅なタイムアウト設定値の調整をすることができる。又は、

  • 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーがタイムアウトを10回以上延長することができる。又は、

  • タイムアウトが必要不可欠なもので、タイムアウトを延長することがコンテンツの動作を無効にすることになる。又は、

  • タイムアウトが20時間よりも長い。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1351

ログイン・セッションに有効期限が設定されていない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1381

ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1411

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1421

3秒以上の長さの自動再生される音声コンテンツがない。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1441

3秒以上の長さの自動再生される音声コンテンツがない。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1451

  • 自動的に開始し5秒以上続く動画、アニメーションがない。または

  • 動画やアニメーションを呈し、一時停止、または非表示にすることができる。

対象

デザイン

関連ガイドライン

チェックID: 1471

  • 自動的に開始し5秒以上続く動画、アニメーションがない。または

  • 動画やアニメーションを呈し、一時停止、または非表示にすることができる。

対象

プロダクト

関連ガイドライン

チェックID: 1481

音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

デザイン

関連ガイドライン
参考情報

チェックID: 1501

音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1531

音声を含むコンテンツには、同期したキャプションが提供されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1561

  • 動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または

  • 動画には音声解説が含まれている。または

  • 映像に関するテキストによる説明が提供されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1562

  • 動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または

  • 動画には音声解説が含まれている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1591

映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1621

動画の音声情報には同期した手話通訳が提供されている。

対象

プロダクト

関連ガイドライン
参考情報

チェックID: 1651

音声コンテンツについて、充分に聴き取りやすい。

対象

プロダクト

関連ガイドライン
参考情報