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

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

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

  • チェックID

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

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

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

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

  • チェック内容

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

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

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

チェックID：0001

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

  • アイコンと背景色

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

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

参考情報

チェックID：0002

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

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

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

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

参考情報

チェックID：0021

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

  • 文字サイズが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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

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

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

参考情報

チェックID：0032

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

例：

避けるべき表現

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

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

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

問題のない表現

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

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

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

参考情報

チェックID：0051

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

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

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

参考情報

チェックID：0071

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0081

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0091

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

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

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

参考情報

チェックID：0092

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0111

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

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

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

参考情報

チェックID：0112

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0141

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

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

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

参考情報

チェックID：0151

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：0152

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン

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

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

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

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

参考情報

チェックID：0171

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン

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

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

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

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

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

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

参考情報

チェックID：0172

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

  • リンクとボタン

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

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

参考情報

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

TabキーとShift+Tabキーでフォーカスを移動して確認する。

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

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

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

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

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

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

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

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

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

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

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

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

チェックID：0201

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

例：

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

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

参考情報

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

Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、フォーカスを移動できることを確認する。

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

1本指による右および左方向へのフリックの後、フリックする前に選択されていたオブジェクトに選択状態が戻らないことを確認する。

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

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

1本指による右および左方向へのフリックの後、フリックする前に選択されていたオブジェクトに選択状態が戻らないことを確認する。

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

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

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0321

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0322

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン

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

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

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

参考情報

チェックID：0323

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0324

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン

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

参考情報

チェックID：0325

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MINOR]

関連ガイドライン

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

参考情報

チェックID：0331

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

ボタンなどのサイズが、充分な大きさになっていることを確認している。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

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

Androidの場合

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

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

参考情報

チェックID：0351

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

ボタンなどのサイズが、充分な大きさになっている。

Webの場合

デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上。

iOSの場合

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

Androidの場合

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

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

参考情報

チェックID：0361

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

特定の入力ディバイスで発生するイベントのみをトリガーにした機能が、設計資料に存在しない。

参考情報

チェックID：0371

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0391

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

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

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

関連ガイドライン

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

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

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

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

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

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

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

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

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

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

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

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

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

チェックID：0412

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

チェックID：0413

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

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]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

    • ブラウズ・モードで次/前の画像への移動（G/Shift+Gキー）を実行して当該の画像を読み上げさせたときに、詳細な説明が読み上げられる

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

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

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

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]

関連ガイドライン

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

参考情報

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

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

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]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

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

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

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

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

チェックID：0541

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0542

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0551

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

見出しが、設計資料に従って適切に実装されている。

参考情報

実装方法の例：見出しの実装

web

h1～h6でマークアップする。

ios

UIAccessibilityTraits.headerをセットする。

チェックID：0552

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

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

web

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

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

チェックID：0561

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

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

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

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

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

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

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

チェックID：0562

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

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

      • Ctrl+Alt+←：左のセル

      • Ctrl+Alt+→：右のセル

      • Ctrl+Alt+↓：下のセル

      • Ctrl+Alt+↑：上のセル

読み上げられる内容：

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

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

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

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

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

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

チェックID：0571

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0581

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：0586

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

すべてのUIコンポーネントがキーボードによる操作、スクリーン・リーダー利用時の操作が可能になっている。

Webの場合

  • 適切なHTMLのマークアップをする。

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

  • 独自実装のUIコンポーネントをアクセシブルにする。

モバイルの場合

  • 可能な限り適切な標準コンポーネントを用いる。

  • 独自実装のUIコンポーネントをアクセシブルにする。

参考情報

チェックID：0587

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：0591

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

チェックID：0592

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：0611

対象

コード

対象プラットフォーム

Web

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：0621

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

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

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

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

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

多言語読み上げが可能な設定を行った上で読み上げを実行した際、日本語の内容が適切に読み上げられることを確認する。

チェックID：0631

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0651

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

Webの場合

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

モバイルの場合

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

参考情報

チェックID：0661

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0671

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

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

参考情報

チェックID：0672

対象

コード

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

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

参考情報

チェックID：0681

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

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

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

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

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

チェックID：0711

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

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

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

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

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

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

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

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

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

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

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

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

チェックID：0721

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0722

対象

デザイン

対象プラットフォーム

モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0751

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0771

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：0781

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

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

参考情報

チェックID：0801

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

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

参考情報

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

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

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

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

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

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

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

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

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

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

チェックID：0811

対象

デザイン

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン

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

例：

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

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

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

参考情報

チェックID：0841

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0851

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

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

web

  • aria-current属性の付与

ios

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

android

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

チェックID：0861

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

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

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

チェックID：0862

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0891

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：0911

対象

コード

対象プラットフォーム

Web

重篤度

[MINOR]

関連ガイドライン

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

参考情報

チェックID：0921

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MINOR]

関連ガイドライン

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

参考情報

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

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

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

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

多言語読み上げが可能な設定を行った上で読み上げを実行した際、コンテンツの原語に応じて適切に音声合成エンジンが切り替わることを確認する。

チェックID：0931

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

フォーム・コントロールの役割が分かるように、付加するべきラベルが設計資料で定義されている。

Webの場合

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

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

参考情報

チェックID：0941

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

フォーム・コントロールにはその役割が分かるラベルが付けられている。

参考情報

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

web

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

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

ios

  • accessibilityLabelを用いる。

android

  • labelForを用いる。

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

web

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

チェックID：0951

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

注：デスクトップWebの場合、ラベルをクリックするとそのラベルが関連付けられているフォーム・コントロールにフォーカスが移動する。

参考情報

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

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

チェックID：0961

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

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

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

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

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

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

参考情報

チェックID：0991

対象

デザイン

対象プラットフォーム

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]

関連ガイドライン

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

参考情報

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

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

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

チェックID：1201

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：1221

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：1231

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

参考情報

チェックID：1251

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

参考情報

チェックID：1261

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：1281

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：1291

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：1311

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：1321

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

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

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

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

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

参考情報

チェックID：1351

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

参考情報

チェックID：1381

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：1411

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

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

参考情報

チェックID：1421

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：1441

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

関連ガイドライン

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

参考情報

チェックID：1451

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

チェックID：1471

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

関連ガイドライン

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

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

チェック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、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：1621

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：1631

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報

チェックID：1651

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

関連ガイドライン

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

参考情報