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

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

それぞれ、以下の項目を記しています。各項目については、チェック内容に詳述しています。

  • チェックID

  • チェック内容

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

  • 対象プラットフォーム：Web、モバイルのいずれかまたは両方

  • 重篤度：[CRITICAL]/[MAJOR]/[NORMAL]/[MINOR]

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

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

  • 「対象」が「コード」のものの中には、実装方法例を記しているものもあります

  • 「対象」が「プロダクト」のものの中には、チェック実施方法の例を記しているものもあります

チェックID：0001

アイコンや画像に関して、3:1以上のコントラスト比が確保されている。

  • アイコンと背景色

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0002

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

  • 文字サイズが29px（22pt）以上の場合：3:1以上

  • 文字サイズが24px（18pt）以上で太字の場合：3:1以上

  • その他の場合：4.5:1以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0003

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

  • 文字サイズが24px（18pt）以上の場合：3:1以上

  • 文字サイズが19px（14pt）以上で太字の場合：3:1以上

  • その他の場合：4.5:1以上

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

チェックID：0021

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のaxe DevToolsによるチェック、またはWebAIM Contrast Checkerによるチェックのいずれかを満たしていることを確認する。

axe DevToolsによるチェック方法の例

「要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません (Elements must meet minimum color contrast ratio thresholds)」という問題が出ないことを確認する。

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

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

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

    • freeeの場合日本語テキストを想定しているため、「大きいテキスト」を29px（22pt）以上または24px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、18pt以上22pt未満（太字の場合は14pt以上18pt未満）の日本語のテキストについて、Axe DevToolsはコントラスト不足を検知できない

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

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

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

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

WebAIM Contrast Checkerによるチェック方法の例

WebAIM Contrast Checkerで、以下の基準を満たしていることを確認する：

  • 文字サイズが29px（22pt）以上の場合：3:1以上

  • 文字サイズが24px（18pt）以上で太字の場合：3:1以上

  • その他の場合：4.5:1以上

チェックID：0031

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0032

形状、色、大きさ、視覚的な位置、方向、音などのうち、1つだけを用いた説明ではなく、複数の要素を用いた説明をしている。

例：

避けるべき表現

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

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

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

  • 画面右下のボタンを押してください

問題のない表現

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

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

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

  • 画面右下の「新規作成」ボタンを押してください

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0051

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web、モバイル

グレイスケール表示にして、以下を確認する：

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

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

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

チェックID：0071

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0081

リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。

注：ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェック手順：Web

マウスで以下の操作をして、何も実行されないことを確認する：

  1. マウス・ポインターをオブジェクト上に移動

  2. マウス・ボタンを押下

  3. マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動

  4. マウス・ボタンを放す

チェックID：0091

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0092

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0111

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0112

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0141

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0151

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェックID：0152

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

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェックID：0153

スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[CRITICAL]

関連ガイドライン項目

チェックID：0171

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

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

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

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

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

    • 表示内容の大幅な変更

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のキーボードによるチェックを見足していることを確認する。

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

Tabキー、またはShift+Tabキーでフォーカスを移動して、以下を確認する：

  • すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる

  • フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

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

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

1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。

  • 選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない

  • 画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない

  • 画面上に表示されているもので読み上げられないものがない

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

チェックID：0201

  • Tab/Shift+Tabキーによるフォーカスの移動時、特定の箇所からフォーカスが抜け出せないような状況が発生しない、または

  • 特定の箇所からフォーカスが抜け出せない状態では、矢印キーやEscキーの押下といった簡単な操作でその状態を抜け出すことができる

特に注意が必要なコンポーネントの例：

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

  • ポップアップ・メニュー

  • モーダル・ダイアログ

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェック手順：Web

以下のキーボード操作によるチェックを見足していることを確認する。

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

Tabキーを使って、ページの先頭からフォーカスを順に移動し、以下を確認する：

  • TabキーまたはShift+Tabキーを押下しても、特定の場所からフォーカスが抜け出せないような状況が発生しない、または

  • TabキーやShift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。

チェックID：0211

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0231

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0241

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

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

チェックID：0242

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

チェックID：0261

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

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

チェックID：0262

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

チェックID：0271

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0311

CSSに絶対値指定（例：px）と相対値指定（例：rem）が混在していない。

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0321

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0322

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

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

チェックID：0323

ブラウザーの文字サイズの設定を200パーセントにしても、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0324

ブラウザーの文字サイズ設定を200パーセントにしたとき、実際にテキストが200パーセントに拡大され、コンテンツの理解を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

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

チェックID：0325

文字の拡大表示に対応している場合は、最大の文字サイズでの表示をしたときに、利用を困難にするような表示崩れが発生しない。

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MINOR]

関連ガイドライン項目

チェックID：0326

OSの設定で最大の文字サイズを指定しても、コンテンツの理解や利用を妨げるようなレイアウト崩れが起こらない。

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン項目

チェックID：0331

画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

  • デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

  • モバイルWebでは44 x 44 CSS px以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0332

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールの見た目をブラウザーのデフォルトのものから変更する場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

  • デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

  • モバイルWebでは44 x 44 CSS px以上

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0333

画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44x44px（OSのUIガイドラインで示されている条件）

Androidの場合

  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

  • 見た目上、横長の縦は36px、正方形は40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

チェックID：0334

チェックボックス、ラジオボタン、ボタンなどのフォーム・コントロールやその他の操作を受け付けるものは、クリックやタッチに反応する領域のサイズが充分な大きさになっていて、その領域が設計資料で明示されている。

iOSの場合

44x44px（OSのUIガイドラインで示されている条件）

Androidの場合

  • タップサイズは48x48pxのサイズで表示上は8pxのスペースを設ける（OSのUIガイドラインで示されている条件）

  • 見た目上、横長の縦は36px、正方形は40pxを確保する

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

チェックID：0351

ボタンやリンクになっている画像は、クリックやタッチに反応するサイズが、充分な大きさになっている。

  • デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

  • モバイル向けWebでは44 x 44 CSS px以上

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0352

チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールの見た目がブラウザーのデフォルト表示から変更されている場合、クリックやタッチに反応するサイズが、充分な大きさになっている。

  • デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上

  • モバイル向けWebでは44 x 44 CSS px以上

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0361

マウスのホバー時にしか表示されない情報や実行できない機能が、設計資料に存在しない。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0362

本体を振る操作など、標準的なタッチ操作以外の方法を用いないと利用できない機能や情報がない。

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

チェックID：0371

エディット・ボックスや独自に実装した暗証番号入力のためのコンポーネントなど、ユーザーが文字列を入力する場面において、外付けキーボードが接続されたタイミングに関係なく、外付けキーボードによる入力が可能になっている。

対象

コード

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

チェックID：0391

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

チェックID：0401

  • アイコンの役割や示している状態を表すテキストが表示されていて、そのアイコンと明示的に関連付けられている。または

  • そのようなテキストがアイコンに付加されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

実装方法の例：表示されているテキストとアイコンを関連付ける

Web

  • aria-labelledby属性を用いる

実装方法の例：アイコンにラベルを付加する

Web

  • alt属性またはaria-label属性を用いる

iOS

  • accessibilityLabelで指定する。

Android

  • contentDescription属性で指定する。

実装方法の例：適切な状態の確認

Web

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

チェックID：0402

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられないようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

実装方法の例：スクリーン・リーダーに読み上げられないようにする

Web

  • img要素の場合、空のalt属性（alt=""）を指定

  • img要素以外の要素の場合、aria-label属性やaria-labelledby属性を指定しない

iOS

isAccessibilityElementをfalseにする。

Android

importantForAccessibilityをnoにする。

チェックID：0411

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

axe DevToolsによるチェック方法の例

「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ないことを確認する。

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

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

  • ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき

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

参考動画：アイコンの役割や示している状態【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

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

  • VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき

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

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

  • 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

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

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

  • 1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。

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

チェックID：0412

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

チェックID：0413

アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられない。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン項目

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

ブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

参考動画：アイコンの説明が重複しない【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

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

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

1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。

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

チェックID：0421

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0431

  • 画像に関する簡潔で過不足ない説明が付加されている。かつ

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

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

実装方法の例：簡潔な説明の付加

Web

  • alt属性またはaria-label属性で指定する

  • 表示されているテキストを簡潔な説明として利用する場合は、aria-labelledby属性でそのテキストと画像を関連付ける

iOS

  • accessibilityLabelで指定する

Android

  • contentDescriptionで指定する

実装方法の例：詳細な説明を付加する

Web

  • 詳細な説明と画像がDOMツリー上で離れている場合などには、aria-describedby属性で関連付ける

チェックID：0441

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

axe DevToolsによるチェック方法の例

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

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

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

  • 以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。

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

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

  • 詳細な説明が必要な画像の場合、以下のいずれかを満たしていることを確認する。

    • 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでの矢印キーの操作で読み上げさせることができる

    • ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる

  • いずれの場合も、説明が画像の内容を適切に表していることを確認する。

参考動画：画像の説明【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

  • 以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。

    • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき

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

  • 詳細な説明が必要な画像の場合、以下のいずれかを満たしていることを確認する。

    • 当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる

    • VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる

  • いずれの場合も、説明が画像の内容を適切に表していることを確認する。

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

  • 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認するる。

  • 読み上げられる説明が画像の内容を適切に表していることを確認する。

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

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

  • 1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認する。

  • 読み上げられる説明が画像の内容を適切に表していることを確認する。

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

チェックID：0451

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0461

情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

実装方法の例：スクリーン・リーダーに無視させる

Web

  • 空のalt属性（alt=""）を指定、または

  • role="presentation"を指定。

iOS

  • isAccessibilityElementをfalseにする。

Android

  • importantForAccessibilityをnoにする。

チェックID：0471

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

参考動画：情報や機能性を持たない画像【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされないことを確認する。

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

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

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

1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。

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

チェックID：0481

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0501

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0511

画像化されたテキストと同じ内容のテキストが、その画像代替テキストとして設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0521

画像化されたテキストと同じ内容が、スクリーン・リーダーで確認できる形のテキスト・データとしても提供されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

実装方法の例：テキスト・データの提供

Web

  • alt属性、またはaria-label属性を用いる

iOS

  • accessibilityLabelを用いる

Android

  • contentDescriptionを用いる

チェックID：0531

画像化されているテキストの内容を、スクリーン・リーダーで確認できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

参考動画：画像化されたテキスト【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

  • 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

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

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

  • 1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

  • （フリックではなく）画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。

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

チェックID：0541

見出しとして表現されるべきものが、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0542

箇条書き、表などとして表現されるべきものが、使用するべきHTMLの要素やデザイン・システムのコンポーネントと共に、設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェック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：0552

箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

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

実装方法の例：セマンティクスに応じた実装

Web

  • 箇条書き（ul、ol、dl）、表（table）などを使用する

  • デザイン・システムの適切なコンポーネントを使用する

チェックID：0553

ボタンはbutton要素で、リンクはhref属性があるa要素で、エディット・ボックス、チェックボックス、ラジオボタンなど、各種フォーム・コントロールはHTMLの適切な要素で実装されている

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0554

UIコンポーネントは、OSや開発フレームワークの標準コンポーネントを用いて実装されている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0561

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

axe DevToolsによるチェック方法の例

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

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

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

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

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

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

macOS VoiceOverによるチェック方法の例

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

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

  2. 「見出し」を選択

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

ローター・ジェスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

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

読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェックID：0562

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のNVDAによるチェックを見足していることを確認する。

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

以下のすべてを満たしていることを確認する。

  • 以下の手順で表を発見できる：

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

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

  • 以下の手順で、表中のセル間を移動して、セルの内容が適切に読み上げられる：

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

    2. 以下のキー操作でセル間を移動：

      • Ctrl+Alt+←：左のセル

      • Ctrl+Alt+→：右のセル

      • Ctrl+Alt+↓：下のセル

      • Ctrl+Alt+↑：上のセル

セル移動時に読み上げられる内容：

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

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

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

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

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

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

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

チェックID：0571

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

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：0581

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：0586

独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

実装方法の例：スクリーン・リーダーに役割を伝える

Web

role属性を適切に指定する。

iOS

  • 適切なaccessibilityTraitsを指定する。

Android

  • jetpack composeを使用している場合：role属性を適切に指定する

  • jetpack composeを使用していない場合：viewのgetAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。

チェックID：0587

複数の状態を持つコンポーネントは、その状態が視覚的にもスクリーン・リーダーでも分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：0591

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェック手順：Web

以下のNVDAによるチェックを見足していることを確認する。

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

以下のすべてを満たしていることを確認する：

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

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

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

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

参考動画：開閉するボタン【NVDAでアクセシビリティー チェック】

チェックID：0592

複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：0611

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

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェックID：0621

スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

チェック手順：Web

以下のaxe DevToolsによるチェックとNVDAによるチェックを見足していることを確認する。

axe DevToolsによるチェック方法の例

「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。

この問題が出た場合は、そのページの<html>要素の記述を<html lang="ja">（主に利用されている言語が日本語の場合）のように修正する必要があります。

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

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

このチェックを正しく実施するためには、多言語処理のための設定を行う必要があります。（スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」および「音声合成エンジンの管理」の項を参照）

参考動画：適切な言語の音声【NVDAでアクセシビリティー チェック】

チェックID：0631

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0651

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0661

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0671

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

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0672

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

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0681

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

以下のいずれかの方法で、本文またはその画面の中心的な機能の開始位置を容易に見つけられることを確認する。

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

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

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

macOS VoiceOverによるチェック方法の例

以下のいずれかの方法で、本文またはその画面の中心的な機能の開始位置を容易に見つけられることを確認する。

  • 次/前の見出しへの移動（VO + Command + H / VO + Command + Shift + Hキー）を用いて、本文直前の見出しに移動できる

  • 以下の手順でmain要素の先頭部分に移動でき、その直後から本文が始まっている

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

    2. 「ランドマーク」を選択

    3. 「本文」を選んでEnterキーを押下

チェックID：0682

ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェック手順：Web

以下のaxe DevToolsによるチェックとLandmark Navigation via Keyboard or Pop-upによるチェックの両方を満たしていることを確認する。

axe DevToolsによるチェック方法の例

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

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

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

チェックID：0711

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

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

macOS VoiceOverによるチェック方法の例

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

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

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

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

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

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

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

チェックID：0721

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0722

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

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

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

チェックID：0751

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0771

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0781

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0801

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のキーボードによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

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

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

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

macOS VoiceOverによるチェック方法の例

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

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを見足していることを確認する。

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

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

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

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

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

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

チェックID：0811

そのページへの到達手段が複数ある。ただし、特定のの操作の結果として表示されるページや、何らかの手順（例：ウィザード）の途中で表示されるようなページは除く。

例：

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

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

チェックID：0841

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0851

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

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

実装方法の例：位置の明示

Web

  • aria-current属性の付与

チェックID：0861

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェック手順：Web

以下のNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

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

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

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

macOS VoiceOverによるチェック方法の例

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

チェックID：0862

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：0891

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

チェックID：0911

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

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

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

チェックID：0912

ロケールの指定が可能なUIコンポーネントにおいては、適切なロケールを指定している。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

チェックID：0921

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

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

チェック手順：Web

以下のNVDAによるチェックを見足していることを確認する。

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

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

参考動画：複数の言語の音声【NVDAでアクセシビリティー チェック】

チェックID：0922

日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン項目

チェック手順：Web

以下のNVDAによるチェックを見足していることを確認する。

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

ブラウズ・モードで上下矢印キーを用いて日付、時刻、数値などを読み上げさせて、以下のすべてを満たしていることを確認する。

  • 当該箇所の読み上げに用いられる音声は、他の箇所を読み上げさせたときの音声と同じ種類の音声である

  • 当該箇所の読み上げが、そのページやアプリケーションで用いられている言語において自然なものになっている（例：日本語が用いられている場合に、「1月1日」を「ジャニュアリーファースト」などと読み上げない）

チェックID：0931

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で明示されている。

Webの場合

  • 画面上に表示されているテキストまたは代替テキストが付加された画像をラベルとして指定する。

  • aria-label属性値として指定すべきテキストを明示する。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：0941

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールにはその役割が分かるラベルが付けられている。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

実装方法の例：フォーム・コントロールのラベル付け

Web

  • label要素、またはaria-labelledby属性を用いて表示されているテキストまたは画像と関連付ける、または

  • aria-label属性でラベルを指定する

iOS

  • accessibilityLabelを用いる。

Android

  • labelForを用いる。

実装方法の例：適切な状態の確認

Web

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

チェックID：0951

エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールは、適切にラベル付けされている。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを見足していることを確認する。

axe DevToolsによるチェック方法の例

以下のいずれの問題も発生しないことを確認する。

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

フォーカス・モードでTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

macOS VoiceOverによるチェック方法の例

VoiceOver有効時にTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。

チェックID：0956

ラジオボタンは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェック手順：Web

以下のキーボードによるチェックを見足していることを確認する。

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

以下のすべてを満たしていることを確認する:

  • 同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab/Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。

  • グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。

  • 矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。

チェックID：0957

チェックボックスは、キーボードで操作できるようになっている。

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェック手順：Web

以下のキーボードによるチェックを見足していることを確認する。

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

以下のすべてを満たしていることを確認する:

  • Tab/Shift+Tabキーでフォーカスを移動した際、到達できないチェックボックスがない。

  • スペースキーを押下することで、フォーカスされているチェックボックスのオン/オフ譜を切り替えられる。

チェックID：0961

フォーム入力に制限時間が設けられていない。または、以下のいずれかを満たしている：

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

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

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

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1021

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1051

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1071

ページ/画面内の、エディット・ボックス、チェックボックス、ラジオボタンなど、フォーム・コントロールを操作して、以下のような挙動がないことを確認する：

  • 表示内容が大幅に変わる

  • 自動的に別のページ/画面に遷移する

  • ユーザーが既に入力したフィールドの内容が自動的に変更される（特に操作したフィールドよりも前にあるフィールドが変更されるのは望ましくない）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1081

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1101

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1111

フォーム入力に関するエラーについて、エラーの修正方法が分かるエラー・メッセージが設計資料で明示されている。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1131

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1141

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1171

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1181

操作の結果などを伝えるステータス・メッセージが自動的に読み上げられるようにする。

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

実装方法の例：自動的に読み上げられるようにする

Web

aria-live属性を用いる。

iOS

UIAccessibility.post(notification:argument:)の引数に .announcementとメッセージを入れる。（参考：https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement）

Android

Toast、SnackBar等にメッセージを入れ、TalkBackで適切に読み上げられるようにする。

チェックID：1191

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェック手順：Web

以下のNVDAによるチェックを見足していることを確認する。

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

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

参考：aria-liveを用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

参考動画：ステータスメッセージ【NVDAでアクセシビリティー チェック】

チェック手順：モバイル

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

チェックID：1201

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1221

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1231

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1251

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

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

  • ユーザーが自動更新を停止できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1261

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1281

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1291

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1292

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、モーダル・ダイアログがない。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1311

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1312

モーダル・ダイアログが表示される場合：

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

  • キーボード操作でモーダル・ダイアログを開きTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動し、モーダル・ダイアログが閉じた際にはフォーカスが元の位置に戻る

  • モーダル・ダイアログ内でTabまたはShift+Tabキーを押してフォーカスを移動した際、フォーカスがモーダル・ダイアログの外に移動しない

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID：1313

モーダル・ダイアログが表示される場合：

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

  • モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

チェックID：1321

ログイン・セッションに有効期限が設定されていない。または、以下のいずれかを満たしている：

  • ログイン時などに、ユーザーが有効期限の設定を解除することができる。又は、

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

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

  • 有効期限が必要不可欠なもので、有効期限を延長することがコンテンツの動作を無効にすることになる。又は、

  • 有効期限が20時間よりも長い。

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1381

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1411

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1421

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1441

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

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

チェックID：1451

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

チェックID：1471

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン項目

チェックID：1481

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1501

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID：1511

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1531

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1541

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

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1542

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1561

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1562

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1571

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1591

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1601

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

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

チェックID：1621

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

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

チェックID：1631

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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

チェックID：1651

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

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