アクセシビリティー・チェック全項目一覧
書くガイドライン項目の「チェック内容」に示したものを、チェックID順に掲載しています。
それぞれ、以下の項目を記しています。各項目については、チェック内容に詳述しています。
チェックID
チェック内容
対象:デザイン、コード、またはプロダクト
対象プラットフォーム:Web、モバイルのいずれかまたは両方
重篤度:[CRITICAL]/[MAJOR]/[NORMAL]/[MINOR]
関連ガイドライン項目:そのチェックによって対応状況を確認することができるガイドライン項目
参考情報:そのチェックの意図や実施方法に関する情報が記されているものもあります(各関連ガイドライン項目で掲載しているものと同じです。)
関連FAQ:よくある質問と回答(FAQ)に掲載しているFAQのうち、そのチェックに関連するものへのリンク
「対象」が「コード」のものの中には、実装方法例を記しているものもあります
「対象」が「プロダクト」のものの中には、チェック実施方法の例を記しているものもあります
チェック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]
- 関連ガイドライン項目
テキスト:モバイルOSでのコントラスト比の確保
画像化されたテキスト:モバイルOSでの画像内のテキストのコントラスト比
- 参考情報
チェックID:0021
テキストの表示色と背景色には、充分なコントラスト比が確保されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
テキスト:コントラスト比の確保
テキスト:モバイルOSでのコントラスト比の確保
- 参考情報
チェック手順:Web
以下の0021-axe-01または0021-webaim-01がOKであることを確認する。
0021-axe-01:axe DevToolsによるチェック方法の例
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はコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
アイコン、画像、画像化されたテキスト、ボタンや入力フィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合
0021-webaim-01:WebAIM Contrast Checkerによるチェック方法の例
WebAIM Contrast Checkerで、以下の基準を満たしていることを確認する:
文字サイズが29px(22pt)以上の場合:3:1以上
文字サイズが24px(18pt)以上で太字の場合:3:1以上
その他の場合:4.5:1以上
チェックID:0031
グレイスケール表示でも利用に支障が出ない配色になっている:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
テキスト:複数の視覚的要素を用いた表現
リンク:複数の視覚的要素を用いた表現
フォーム:複数の視覚的要素を用いた表現
- 関連FAQ
- 参考情報
チェックID:0032
形状、色、大きさ、視覚的な位置、方向、音などのうち、1つだけを用いた説明ではなく、複数の要素を用いた説明をしている。
例:
- 避けるべき表現
赤字の項目は必須項目です
右の表を参照してください
青いボタンを押してください
画面右下のボタンを押してください
- 問題のない表現
赤い※印のついた項目は必須項目です
右の表(表3)を参照してください
青い「保存」ボタンを押してください
画面右下の「新規作成」ボタンを押してください
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
テキスト:特定の感覚に依存しない表現
- 参考情報
チェックID:0051
グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
テキスト:複数の視覚的要素を用いた表現
リンク:複数の視覚的要素を用いた表現
フォーム:複数の視覚的要素を用いた表現
- 関連FAQ
- 参考情報
チェックID:0071
マウス・ボタンのdownイベントをトリガーにしていない。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
入力ディバイス:ダウン・イベントをトリガーにしない
- 参考情報
チェックID:0081
リンクやボタンなど、マウス・クリックを受け付けるオブジェクトにおいて、マウス・ボタン押下後にもその操作を中止することができる。
注:ドラッグ&ドロップのためのオブジェクトはこのチェックの対象外
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
入力ディバイス:ダウン・イベントをトリガーにしない
- 参考情報
チェック手順:Web
以下の0081-mouse-01がOKであることを確認する。
0081-mouse-01:mouseによるチェック方法の例
マウスで以下の操作をして、何も実行されないことを確認する:
マウス・ポインターをオブジェクト上に移動
マウス・ボタンを押下
マウス・ボタンを押下したままの状態でオブジェクト外にマウス・ポインターを移動
マウス・ボタンを放す
チェック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]
- 関連ガイドライン項目
フォーム:フォーカス時の挙動
動的コンテンツ:OnFocus/OffFocus時の挙動
- 参考情報
チェックID:0153
スクリーン・リーダーのフォーカス箇所を示す表示が視認できる配色になっている
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
入力ディバイス:モバイルの支援技術のサポート
- 参考情報
チェックID:0154
アプリケーション固有の独自ジェスチャーを用いなければ利用できないような機能が設計資料に存在しない。
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
入力ディバイス:モバイルOS標準のジェスチャーによる操作
- 参考情報
チェックID:0171
Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている:
フォーカス・インジケーターまたはそれを代替する表示がある
自動的に次のような挙動が発生しない:
フォームの送信
レイアウトの変更
ページの遷移
モーダル・ダイアログの表示
表示内容の大幅な変更
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
入力ディバイス:フォーカス箇所の可視化
フォーム:フォーカス時の挙動
動的コンテンツ:OnFocus/OffFocus時の挙動
- 参考情報
チェックID:0172
フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。
リンクとボタン
フォーム・コントロール(エディット・ボックス、チェックボックス、ラジオボタンなど)
その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
入力ディバイス:キーボード操作を可能にする
入力ディバイス:モバイルの支援技術のサポート
入力ディバイス:適切なフォーカス順序
リンク:適切なフォーカス順序
フォーム:キーボード操作を可能にする
フォーム:適切なフォーカス順序
- 参考情報
チェック手順:Web
以下の0172-keyboard-01がOKであることを確認する。
0172-keyboard-01:キーボード操作によるチェック方法の例
Tabキー、またはShift+Tabキーでフォーカスを移動して、以下を確認する:
すべてのリンク、ボタン、フォーム・コントロールおよび操作を受け付けるコンポーネントにフォーカスを移動できる
フォーカスの移動順序は、文脈、レイアウト、操作手順に即した自然な順序になっている
チェック手順:iOS
以下の0172-iosvo-01がOKであることを確認する。
0172-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOver有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。
選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない
画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない
画面上に表示されているもので読み上げられないものがない
チェック手順:Android
以下の0172-androidtb-01がOKであることを確認する。
0172-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBack有効時に1本指による左フリックおよび右フリックの操作でフォーカスを移動して、以下の点を確認する。
選択状態の移動が、画面表示や表示内容の意味合いから考えて不自然な順序になっていない
画面上に表示されているテキスト、表示されている画像の代替テキスト以外のものが読み上げられることがない
画面上に表示されているもので読み上げられないものがない
チェックID:0201
Tab/Shift+Tabキーによるフォーカスの移動時、特定の箇所からフォーカスが抜け出せないような状況が発生しない、または
特定の箇所からフォーカスが抜け出せない状態では、矢印キーやEscキーの押下といった簡単な操作でその状態を抜け出すことができる
特に注意が必要なコンポーネントの例:
動画や音声コンテンツのプレイヤー
ポップアップ・メニュー
モーダル・ダイアログ
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
入力ディバイス:キーボード・トラップの回避
音声・映像コンテンツ:キーボード・トラップの回避
- 参考情報
チェック手順:Web
以下の0201-keyboard-01がOKであることを確認する。
0201-keyboard-01:キーボード操作によるチェック方法の例
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]
- 関連ガイドライン項目
テキスト:適切な文言の見出し
- 関連FAQ
- 参考情報
チェック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]
- 関連ガイドライン項目
テキスト:モバイルOSの文字サイズ設定の変更
チェックID:0326
OSの設定で最大の文字サイズを指定しても、コンテンツの理解や利用を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
テキスト:モバイルOSの文字サイズ設定の変更
チェックID:0331
画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。
デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上
モバイルWebでは44 x 44 CSS px以上
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
- 関連FAQ
- 参考情報
チェックID:0332
チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールの見た目をブラウザーのデフォルトのものから変更する場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。
デスクトップWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上
モバイルWebでは44 x 44 CSS px以上
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
- 参考情報
チェックID:0333
画像をリンクやボタンにする場合、クリックやタッチに反応する領域が充分な大きさになっていて、その領域が設計資料で明示されている。
- iOSの場合
44 x 44 px(OSのUIガイドラインで示されている条件)
- Androidの場合
タップサイズは48 x 48 pxのサイズで表示上は8pxのスペースを設ける(OSのUIガイドラインで示されている条件)
見た目上横長の領域については縦方向に36px、正方形の領域については40pxを確保する
- 対象
デザイン
- 対象プラットフォーム
モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
- 参考情報
チェックID:0334
チェックボックス、ラジオボタン、ボタンなどのフォーム・コントロールやその他の操作を受け付けるものは、クリックやタッチに反応する領域のサイズが充分な大きさになっていて、その領域が設計資料で明示されている。
- iOSの場合
44 x 44 px(OSのUIガイドラインで示されている条件)
- Androidの場合
タップサイズは48 x 48 pxのサイズで表示上は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]
- 関連ガイドライン項目
- 関連FAQ
- 参考情報
チェックID:0352
チェックボックス、ラジオボタン、ボタンなど、フォーム・コントロールの見た目がブラウザーのデフォルト表示から変更されている場合、クリックやタッチに反応するサイズが、充分な大きさになっている。
デスクトップ向けWebでは最低24 x 24 CSS px、なるべく44 x 44 CSS px以上
モバイル向けWebでは44 x 44 CSS px以上
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
- 参考情報
チェックID:0361
マウスオーバー時に表示される情報や実行できる機能は、キーボードだけで操作している場合やタッチUIで操作している場合にも表示・実行できるような設計になっている。
- 対象
デザイン
- 対象プラットフォーム
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]
- 関連ガイドライン項目
アイコン:テキスト情報の付与
- 関連FAQ
実装方法の例:スクリーン・リーダーに読み上げられないようにする
- Web
img
要素の場合、空のalt
属性(alt=""
)を指定img
要素以外の要素の場合、aria-label
属性やaria-labelledby
属性を指定しない
- iOS
isAccessibilityElement
をfalse
にする。- Android
importantForAccessibility
をno
にする。
チェックID:0411
アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
アイコン:テキスト情報の付与
チェック手順:Web
以下の0411-axe-01と0411-content-01がOK、かつ0411-nvda-01または0411-macvo-01がOKであることを確認する。
0411-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで「ボタンには認識可能なテキストが存在しなければなりません (Buttons must have discernible text)」という問題が出ないことを確認する。
0411-content-01:その他の手段によるチェック方法の例
スクリーン・リーダーによって読み上げられる内容がアイコンの役割や状態を適切に表していることを確認する。
0411-nvda-01:NVDAによるチェック方法の例
NVDAで以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。
ブラウズ・モードで矢印キーを操作してアイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
0411-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverで以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。
VOキーと左右矢印キーでVoiceOverカーソルを操作し、アイコンがある箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
チェック手順:iOS
以下の0411-iosvo-01がOKであることを確認する。
0411-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverが有効な状態で、以下を確認する:
1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
(フリックではなく)アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
チェック手順:Android
以下の0411-androidtb-01がOKであることを確認する。
0411-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBackが有効な状態で、以下を確認する:
1本指による右および左方向のフリックでアイコンに到達した際、そのアイコンの役割が分かるようなテキストが読み上げられることを確認する。
(フリックではなく)アイコンに触れたとき、そのアイコンの役割が分かるテキストが読み上げられることを確認する。
チェックID:0412
テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。(例:異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。)
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
アイコン:複数の視覚的要素を用いた表現
チェックID:0413
アイコンがテキストのラベルと併せて表示されている場合、同じ内容が重複してスクリーン・リーダーに読み上げられない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
アイコン:テキスト情報の付与
- 関連FAQ
チェック手順:Web
以下の0413-nvda-01または0413-macvo-01がOKであることを確認する。
0413-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードでの矢印キーの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
0413-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で、当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
チェック手順:iOS
以下の0413-iosvo-01がOKであることを確認する。
0413-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
チェック手順:Android
以下の0413-androidtb-01がOKであることを確認する。
0413-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動して当該のアイコンとテキスト・ラベルがある箇所を通過したとき、アイコンとそのアイコンに併記されているテキストの両方が読み上げられるなど、結果として同じ内容が2度読まれるような状態になっていないことを確認する。
チェック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
以下の0441-axe-01と0441-content-01がOK、かつ0441-nvda-01または0441-macvo-01がOKであることを確認する。
0441-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで「画像には代替テキストがなければなりません (Images must have alternate text)」という問題が出ないことを確認する。
ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。
0441-content-01:その他の手段によるチェック方法の例
スクリーン・リーダーによって読み上げられる簡潔な説明および詳細な説明が画像の内容を適切に表していることを確認する。
0441-nvda-01:NVDAによるチェック方法の例
NVDAで以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。
ブラウズ・モードで矢印キーを操作して当該箇所を読み上げさせたとき
その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift + Tabキーの操作でフォーカスされたとき
詳細な説明が必要な画像の場合、以下のいずれかを満たしていることを確認する。
当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでの矢印キーの操作で読み上げさせることができる
ブラウズ・モードで矢印キーを操作して当該画像を読み上げさせたとき、詳細な説明が読み上げられる
0441-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverで以下の操作をしたとき、画像に関する簡潔な読み上げがされることを確認する。
VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該箇所を読み上げさせたとき
その画像がリンクなど、フォーカスを受け取るものの場合、Tab / Shift + Tabキーの操作でフォーカスされたとき
詳細な説明が必要な画像の場合、以下のいずれかを満たしていることを確認する。
当該画像の直前または直後に詳細な説明があり、VOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせることができる
VOキーと左右矢印キーによるVoiceOverカーソルの操作で当該画像を読み上げさせたとき、詳細な説明が読み上げられる
チェック手順:iOS
以下の0441-iosvo-01がOKであることを確認する。
0441-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverが有効な状態で、以下を確認する:
1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。
(フリックではなく)画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認するる。
読み上げられる説明が画像の内容を適切に表していることを確認する。
チェック手順:Android
以下の0441-androidtb-01がOKであることを確認する。
0441-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBackが有効な状態で、以下を確認する:
1本指による右および左方向のフリックで画像に到達した際、その画像の意味が分かるようなテキストが読み上げられることを確認する。
(フリックではなく)画像に触れたとき、その画像の意味が分かるテキストが読み上げられることを確認する。
読み上げられる説明が画像の内容を適切に表していることを確認する。
チェックID:0451
情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
画像:装飾目的の画像の無視
- 関連FAQ
- 参考情報
チェックID:0461
情報や機能性を一切持たない画像は、スクリーン・リーダーで無視されるようになっている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
画像:装飾目的の画像の無視
- 関連FAQ
- 参考情報
実装方法の例:スクリーン・リーダーに無視させる
- Web
空の
alt
属性(alt=""
)を指定、またはrole="presentation"
を指定。
- iOS
isAccessibilityElement
をfalse
にする。
- Android
importantForAccessibility
をno
にする。
チェックID:0471
情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
画像:装飾目的の画像の無視
- 関連FAQ
- 参考情報
チェック手順:Web
以下の0471-nvda-01または0471-macvo-01がOKであることを確認する。
0471-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードでの矢印キーの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされないことを確認する。
0471-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされないことを確認する。
チェック手順:iOS
以下の0471-iosvo-01がOKであることを確認する。
0471-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際、当該の画像が無視されて読み上げられないことを確認する。
チェック手順:Android
以下の0471-androidtb-01がOKであることを確認する。
0471-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBack有効時に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
以下の0531-nvda-01または0531-macvo-01がOKであることを確認する。
0531-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードでの矢印キーの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
0531-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
チェック手順:iOS
以下の0531-iosvo-01がOKであることを確認する。
0531-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverが有効な状態で、以下を確認する:
1本指による右および左方向のフリックで画像に到達した際、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
(フリックではなく)画像に触れたとき、画像に含まれるテキストと同じ内容が読み上げられることを確認する。
チェック手順:Android
以下の0531-androidtb-01がOKであることを確認する。
0531-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBackが有効な状態で、以下を確認する:
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]
- 関連ガイドライン項目
マークアップと実装:対話的なUIコンポーネントの実装
- 参考情報
チェックID:0554
UIコンポーネントは、OSや開発フレームワークの標準コンポーネントを用いて実装されている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
マークアップと実装:対話的なUIコンポーネントの実装
- 参考情報
チェックID:0561
見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
マークアップと実装:文書構造を適切に示すマークアップ、実装を行う
ページ全体:適切なセクション分けと見出しの付与
- 参考情報
チェック手順:Web
以下の0561-axe-01がOK、かつ0561-nvda-01または0561-macvo-01がOKであることを確認する。
0561-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで以下のいずれの問題も出ないことを確認する。
0561-nvda-01:NVDAによるチェック方法の例
NVDAで以下の操作をして見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。
ブラウズ・モードで要素リストを表示(NVDA+F7)
「種別」を「見出し」に設定(Alt+H)
0561-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverで以下の操作をして見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。
VO + Uを押下してローターのメニューを表示
「見出し」を選択
チェック手順:iOS
以下の0561-iosvo-01がOKであることを確認する。
0561-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverのローター・ジェスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。
チェック手順:Android
以下の0561-androidtb-01がOKであることを確認する。
0561-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBackの読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。
チェックID:0562
スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
マークアップと実装:文書構造を適切に示すマークアップ、実装を行う
- 参考情報
チェック手順:Web
以下の0562-nvda-01がOKであることを確認する。
0562-nvda-01:NVDAによるチェック方法の例
以下のすべてを満たしていることをNVDAで確認する。
以下の手順で表を発見できる:
ブラウズ・モードでページの先頭に移動(Ctrl+Home)
前後の表への移動(TまたはShift+Tキー)で、表に移動
以下の手順で、表中のセル間を移動して、セルの内容が適切に読み上げられる:
ブラウズ・モードで表の先頭部分を探す
以下のキー操作でセル間を移動:
Ctrl+Alt+←:左のセル
Ctrl+Alt+→:右のセル
Ctrl+Alt+↓:下のセル
Ctrl+Alt+↑:上のセル
セル移動時に読み上げられる内容:
上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。
左右の移動:移動先のセルの列見出し、列の番号、セルの内容
上下の移動:移動先のセルの行見出し、行の番号、セルの内容
ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。
上下矢印:前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。
左右矢印:1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。
チェック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
以下の0591-nvda-01がOKであることを確認する。
0591-nvda-01:NVDAによるチェック方法の例
以下のすべてを満たしていることをNVDAで確認する:
ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる
その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる
操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる
操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる
チェックID:0592
複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。(例:タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど)
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
マークアップと実装:コンポーネントをアクセシブルにする
- 参考情報
チェックID:0611
日本語のページには、<html lang="ja">
の記述がある。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
テキスト:ページの主たる言語の指定
- 参考情報
チェックID:0621
スクリーン・リーダーで読み上げたとき、適切な言語の音声エンジンで読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
- 関連ガイドライン項目
テキスト:ページの主たる言語の指定
- 参考情報
チェック手順:Web
以下の0621-axe-01と0621-nvda-01がOKであることを確認する。
0621-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで「<html>要素にはlang属性がなければなりません (<html> element must have a lang attribute)」という問題が出ないことを確認する。
この問題が出た場合は、そのページの<html>
要素の記述を<html lang="ja">
(主に利用されている言語が日本語の場合)のように修正する必要があります。
0621-nvda-01: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
以下の0681-axe-01がOK、かつ0681-nvda-01または0681-nvda-02または0681-macosvo-01または0681-macosvo-02がOKであることを確認する。
0681-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで以下のいずれの問題も出ないことを確認する。
0681-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードで、次/前の見出しへの移動(H / Shift + Hキー)を用いて、本文直前の見出しに移動できることを確認する。
0681-nvda-02:NVDAによるチェック方法の例
NVDAのブラウズ・モードで、次のランドマークへの移動(Dキー)でmain要素の先頭部分に移動でき、その直後から本文が始まっていることを確認巣る。
0681-macosvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverの次/前の見出しへの移動(VO + Command + H / VO + Command + Shift + Hキー)を用いて、本文直前の見出しに移動できることを確認する。
0681-macosvo-02:macOS VoiceOverによるチェック方法の例
macOS VoiceOverで以下の以下の操作を行ってmain要素の先頭部分に移動でき、その直後から本文が始まっていることを確認する。
VO + Uキーを押下してローターのメニューを表示
「ランドマーク」を選択
「本文」を選んでEnterキーを押下
チェックID:0682
ページ上のすべてのコンテンツが、ARIAランドマークによって示される適切な領域に配置されている。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
ページ全体:ページを構成する領域の明示
- 参考情報
チェック手順:Web
以下の0682-axe-01と0682-misc-01がOKであることを確認する。
0682-axe-01:axe DevToolsによるチェック方法の例
画面上に表示されているコンテンツに対して、axe DevToolsで以下のいずれの問題も発生しないことを確認する。(非表示箇所に対して以下の問題が発生しても、通常は問題ない。)
bannerランドマークは他のランドマークに含まれるべきではありません (Banner landmark should not be contained in another landmark)
asideは他の要素に含まれるべきではありません (Aside should not be contained in another landmark)
mainランドマークは他のランドマークに含まれるべきではありません (Main landmark should not be contained in another landmark)
ドキュメントに複数のbannerランドマークが存在してはなりません (Document should not have more than one banner landmark)
ドキュメントに複数のcontentinfoランドマークが存在してはなりません (Document should not have more than one contentinfo landmark)
ドキュメントに複数のmainランドマークが存在してはなりません (Document should not have more than one main landmark)
ドキュメントにはmainランドマークが1つ含まれていなければなりません (Document should have one main landmark)
ページのすべてのコンテンツはlandmarkに含まれていなければなりません (All page content should be contained by landmarks)
チェックID:0711
ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
- 関連ガイドライン項目
ページ全体:適切な記述順序
動的コンテンツ:支援技術への適切な情報提供の維持
- 参考情報
チェック手順:Web
以下の0711-nvda-01または0711-macvo-01がOKであることを確認する。
0711-nvda-01:NVDAによるチェック方法の例
NVDAが起動している状態で、以下を確認する:
ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。
0711-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverが有効な状態で、以下を確認する:
VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。
チェック手順:iOS
以下の0711-iosvo-01がOKであることを確認する。
0711-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverが有効な状態で、以下を確認する:
1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。
チェック手順:Android
以下の0711-androidtb-01がOKであることを確認する。
0711-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBackが有効な状態で、以下を確認する:
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
以下の0801-keyboard-01がOK、かつ0801-nvda-01または0801-macvo-01がOKであることを確認する。
0801-keyboard-01:キーボード操作によるチェック方法の例
TabキーおよびShift+Tabキーでフォーカスを移動した際、複数のページで移動順序が一貫していることを確認する。
0801-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードで上下矢印キーで読み上げさせたとき、複数のページで読み上げ順序が一貫していることを確認する。
0801-macvo-01:macOS VoiceOverによるチェック方法の例
macOS VoiceOverのVOキーと左右矢印キーによるVoiceOverカーソルの操作で読み上げさせたとき、複数のページで読み上げ順序が一貫していることを確認する。
チェック手順:iOS
以下の0801-iosvo-01がOKであることを確認する。
0801-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOver有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。
チェック手順:Android
以下の0801-androidtb-01がOKであることを確認する。
0801-androidtb-01:Android TalkBackによるチェック方法の例
Android TalkBack有効時に1本指による右および左方向のフリックでフォーカスを移動した際の読み上げ順序が、複数の画面で一貫していることを確認する。
チェックID:0811
そのページへの到達手段が複数ある。ただし、特定のの操作の結果として表示されるページや、何らかの手順(例:ウィザード)の途中で表示されるようなページは除く。
例:
ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。
特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。
ヘルプ・ページ中のリンクからも遷移できる。
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[MINOR]
- 関連ガイドライン項目
ページ全体:複数の到達手段
- 参考情報
チェックID:0841
グローバル・ナビゲーションやいわゆるパンくずリストがある場合、そのページ/画面のサイトやアプリケーション内での位置がグローバル・ナビゲーションやパンくずリスト内で示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
ページ全体:現在地の明示
- 参考情報
チェックID:0851
グローバル・ナビゲーションやパンくずリスト内でそのページ/画面の位置が明示されている。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
- 関連ガイドライン項目
ページ全体:現在地の明示
- 参考情報
実装方法の例:位置の明示
- Web
aria-current
属性の付与
チェックID:0861
スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
- 関連ガイドライン項目
ページ全体:現在地の明示
- 参考情報
チェック手順:Web
以下の0861-nvda-01または0861-macvo-01がOKであることを確認する。
0861-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードでの矢印キーの操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声があることを確認する。
0861-macvo-01:macOS VoiceOverによるチェック方法の例
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
以下の0921-nvda-01がOKであることを確認する。
0921-nvda-01:NVDAによるチェック方法の例
NVDAのブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。
チェックID:0922
日付、時刻、数値などは、ページやアプリケーションで利用されている自然言語において自然な形で読み上げられる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
- 関連ガイドライン項目
チェック手順:Web
以下の0922-nvda-01がOKであることを確認する。
0922-nvda-01: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
以下の0951-axe-01がOK、かつ0951-nvda-01または0951-macvo-01がOKであることを確認する。
0951-axe-01:axe DevToolsによるチェック方法の例
axe DevToolsで以下のいずれの問題も発生しないことを確認する。
0951-nvda-01:NVDAによるチェック方法の例
NVDAのフォーカス・モードでTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。
0951-macvo-01:macOS VoiceOverによるチェック方法の例
VoiceOver有効時にTab / Shift + Tabキーを用いてフォーカスをそのフォーム・コントロールに移動した際、対応した適切なテキストが読み上げられることを確認する。
チェックID:0956
ラジオボタンは、キーボードで操作できるようになっている。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
- 関連ガイドライン項目
フォーム:キーボード操作を可能にする
- 参考情報
チェック手順:Web
以下の0956-keyboard-01がOKであることを確認する。
0956-keyboard-01:キーボード操作によるチェック方法の例
キーボード操作を行って、以下のすべてを満たしていることを確認する:
同じ質問に対する選択肢など、適切な単位でラジオボタンがグループ化されていて、Tab/Shift+Tabキーでフォーカスを移動した際、グループごとに1つのラジオボタンにしかフォーカスが移動しない。
グループ内のラジオボタンにフォーカスがある状態で、矢印キーでラジオボタンのグループ内の選択状態を変更でき、選択状態になったラジオボタンにフォーカスが移動する。
矢印キーでラジオボタンの選択状態を変更した際、そのグループに属さないラジオボタンへのフォーカスの移動や状態の変更が発生しない。
チェックID:0957
チェックボックスは、キーボードで操作できるようになっている。
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
- 関連ガイドライン項目
フォーム:キーボード操作を可能にする
- 参考情報
チェック手順:Web
以下の0957-keyboard-01がOKであることを確認する。
0957-keyboard-01:キーボード操作によるチェック方法の例
キーボード操作を行って、以下のすべてを満たしていることを確認する:
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
法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能な設計になっている。
チェック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
以下の1191-nvda-01がOKであることを確認する。
1191-nvda-01:NVDAによるチェック方法の例
NVDAを起動した状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。
参考:aria-live
を用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照
チェック手順:iOS
以下の1191-iosvo-01がOKであることを確認する。
1191-iosvo-01:iOS VoiceOverによるチェック方法の例
iOS VoiceOverが起動している状態で設計資料に従ってステータス・メッセージが表示される操作を行い、表示されたステータス・メッセージが自動的に読み上げられることを確認する。
チェック手順:Android
以下の1191-androidtb-01がOKであることを確認する。
1191-androidtb-01:Android TalkBackによるチェック方法の例
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]
- 関連ガイドライン項目
音声・映像コンテンツ:充分に小さい背景音
- 参考情報