アクセシビリティー・チェック全項目一覧¶
書くガイドラインの「チェック内容」に示したものを、チェックID順に掲載しています。
それぞれ、以下の項目を記しています。
チェックID
チェック内容
対象:デザイン、コード、またはプロダクト
関連ガイドライン:そのチェックによって対応状況を確認することができるガイドライン
参考情報:そのチェックの意図や実施方法に関する情報が記されているものもあります(各関連ガイドラインで掲載しているものと同じです。)
チェック実施方法の例を記しているものもあります(チェック実施方法の例からリンクされているページにある内容と同じものです)
チェックID: 0001¶
充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
アイコンと背景色
画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
画像および画像化されたテキストとその隣接領域
テキストと背景色
- 対象
デザイン
- 関連ガイドライン
アイコン:[MUST] コントラスト比の確保
画像化されたテキスト:[MUST] 隣接領域とのコントラスト比の確保
画像化されたテキスト:[MUST] 画像内のテキストのコントラスト比
テキスト:[MUST] コントラスト比の確保
- 参考情報
チェックID: 0021¶
充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。
アイコンと背景色
画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色
画像および画像化されたテキストとその隣接領域
テキストと背景色
- 対象
プロダクト
- 関連ガイドライン
アイコン:[MUST] コントラスト比の確保
画像化されたテキスト:[MUST] 隣接領域とのコントラスト比の確保
画像化されたテキスト:[MUST] 画像内のテキストのコントラスト比
テキスト:[MUST] コントラスト比の確保
- 参考情報
axeを用いたチェック実施方法の例¶
「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。
ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。
マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px(22pt)以上または22px(18pt)以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合
チェックID: 0031¶
グレイスケール表示でも利用に支障が出ない:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 0032¶
形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。
例:
- 避けるべき表現
赤字の項目は必須項目です
右の表を参照してください
青いボタンを押してください
- 問題のない表現
赤い※印のついた項目は必須項目です
右の表(表3)を参照してください
青い「保存」ボタンを押してください
- 対象
デザイン
- 関連ガイドライン
テキスト:[MUST] 特定の感覚に依存しない表現
- 参考情報
チェックID: 0051¶
グレイスケール表示でも利用に支障が出ない:
リンク箇所を判別できる
画像、テキストの意図が伝わる
入力フォームの必須項目、エラーを認知できる
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
チェックID: 0081¶
マウス・クリックを受け付けるリンクやボタンなどは、マウス・ボタンを押下した状態でマウス・ポインターを外し、マウス・ボタンを放した場合、その機能が実行されない。(ドラッグ&ドロップは対象外)
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] ダウン・イベントをトリガーにしない
- 参考情報
チェックID: 0091¶
ホバーで表示されるすべてのコンテンツは、以下のすべてを満たす設計になっている:
ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。(ESCキーで消える、など)
ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。
ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。
- 対象
デザイン
- 関連ガイドライン
動的コンテンツ:[SHOULD] ホバーで表示されるコンテンツ
- 参考情報
チェックID: 0111¶
ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている:
ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。(ESCキーで消える、など)
ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。
ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。
- 対象
プロダクト
- 関連ガイドライン
動的コンテンツ:[SHOULD] ホバーで表示されるコンテンツ
- 参考情報
チェックID: 0141¶
ショートカットキーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている:
ユーザーがショートカットキーを無効にできる
ユーザーがショートカットキーの割当を変更できる
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] ショートカット・キーを提供する場合
- 参考情報
チェックID: 0151¶
デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターを設計資料で明示している。
- 対象
デザイン
- 関連ガイドライン
入力ディバイス:[MUST] フォーカス箇所の可視化
- 参考情報
チェックID: 0152¶
Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない:
フォームの送信
レイアウトの変更
ページの遷移
モーダル・ダイアログの表示
表示内容の大幅な変更、など
- 対象
デザイン
- 関連ガイドライン
フォーム:[MUST] フォーカス時の挙動
動的コンテンツ:[MUST] OnFocus/OffFocus時の挙動
- 参考情報
チェックID: 0171¶
Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている:
フォーカス・インジケーターまたはそれを代替する表示がある
自動的に次のような挙動が発生しない:
フォームの送信
レイアウトの変更
ページの遷移
モーダル・ダイアログの表示
表示内容の大幅な変更など
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] フォーカス箇所の可視化
フォーム:[MUST] フォーカス時の挙動
動的コンテンツ:[MUST] OnFocus/OffFocus時の挙動
- 参考情報
チェックID: 0172¶
Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。
リンクとボタン
フォーム・コントロール
その他、マウスやキーボードによる操作を受け付けるすべてのもの
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] 適切なフォーカス順序
入力ディバイス:[MUST] キーボード操作を可能にする
フォーム:[MUST] 適切なフォーカス順序
- 参考情報
チェックID: 0201¶
動画プレイヤーのような、何らかの機能を提供するためにページ中に埋め込まれているプログラムなどにフォーカスがある状態のとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] キーボード・トラップの回避
音声・映像コンテンツ:[MUST] キーボード・トラップの回避
- 参考情報
チェックID: 0211¶
クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。
- 対象
デザイン
- 関連ガイドライン
入力ディバイス:[MUST] キーボード操作を可能にする
- 参考情報
チェックID: 0231¶
クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。
- 対象
プロダクト
- 関連ガイドライン
入力ディバイス:[MUST] キーボード操作を可能にする
- 参考情報
チェックID: 0242¶
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
デザイン
- 関連ガイドライン
アイコン:[MUST] アイコンの一貫性
チェックID: 0261¶
「○○はこちら」の「こちら」の部分だけがリンクになっていない。(この場合は「○○はこちら」全体をリンクにする。)、または
リンク・テキストの意図がマークアップで明確になっている。
- 対象
プロダクト
- 関連ガイドライン
チェックID: 0262¶
同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。
- 対象
プロダクト
- 関連ガイドライン
アイコン:[MUST] アイコンの一貫性
チェックID: 0311¶
文字サイズの指定において、絶対値指定(例:px)と相対値指定(例:rem)が混在していない。
- 対象
コード
- 関連ガイドライン
テキスト:[MUST] 文字サイズ変更機能の使用
- 参考情報
チェックID: 0322¶
1280x1024のサイズのウィンドウにおいて400パーセントの拡大表示をしたときに適切にリフローされ
縦書きのコンテンツでは縦スクロールが、横書きのコンテンツでは横スクロールが発声しない、かつ
読み取れない内容や利用できない機能がない
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
チェックID: 0323¶
ブラウザーの文字サイズ変更機能で200パーセントの拡大表示をする設定をしても、テキストの理解を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 関連ガイドライン
テキスト:[MUST] 文字サイズ変更機能の使用
- 参考情報
チェックID: 0324¶
ブラウザーの文字サイズ変更機能で200パーセントまで拡大することができ、その際テキストの理解を妨げるようなレイアウト崩れが起こらない。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
チェックID: 0331¶
ボタンなどのサイズが、デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上になっていることを確認している。
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 0351¶
ボタンなどのサイズが、デスクトップWebでは少なくとも24 x 24、なるべく44 x 44 CSS px、モバイルでは44 x 44 CSS px以上になっていることを確認している。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
チェックID: 0361¶
以下のような機能が設計資料に存在しない:
特定の入力ディバイスで発生するイベントのみをトリガーにした機能
使用できる入力ディバイスを、特定の時点で検出されたものに限定している機能
- 対象
デザイン
- 関連ガイドライン
入力ディバイス:[MUST] 特定の入力ディバイスを前提としない
- 参考情報
チェックID: 0391¶
アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または
テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状(モチーフ)やサイズでも違いを示している。かつ
役割や意味がわかるalt属性の値を設計資料で明示している。
- 対象
デザイン
- 関連ガイドライン
アイコン:[MUST] テキスト情報の付与
チェックID: 0401¶
アイコンの役割や示している状態を表すテキストが表示されていて、
aria-labelledby
属性で関連付けられている。またはalt
属性またはaria-label
属性で、そのようなテキストが指定されている。開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。
- 対象
コード
- 関連ガイドライン
アイコン:[MUST] テキスト情報の付与
チェックID: 0411¶
アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
アイコン:[MUST] テキスト情報の付与
NVDAを用いたチェック実施方法の例¶
以下の操作をしたとき、アイコンの示す状態や機能が分かる読み上げがされることを確認する。
ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき
そのアイコンがボタンやリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
チェックID: 0412¶
テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。(例:異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。)
- 対象
プロダクト
- 関連ガイドライン
チェックID: 0421¶
画像に関する簡潔で過不足ない説明(
alt
属性値)が、設計資料で明示されている。かつ短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 0431¶
画像に関する簡潔で過不足ない説明が
alt
属性やaria-label
属性で付加されている。かつ詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または
aria-describedby
属性で関連付けられている。
- 対象
コード
- 関連ガイドライン
- 参考情報
チェックID: 0441¶
画像の説明が適切に読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
NVDAを用いたチェック実施方法の例¶
以下の操作をしたとき、画像に関する完結な読み上げがされることを確認する。- ブラウズ・モードでカーソルキー操作をして当該箇所を読み上げさせたとき- その画像がリンクなど、フォーカスを受け取るものの場合、Tab/Shift+Tabキーの操作でフォーカスされたとき
詳細な説明が必要な画像の場合、以下のいずれかを満たしている- 当該画像の直前または直後に詳細な説明があり、ブラウズ・モードでのカーソルキー操作で読み上げさせることができる- ブラウズ・モードで次/前の画像への移動(G/Shift+Gキー)を実行して当該の画像を読み上げさせたときに、詳細な説明が読み上げられる
axeを用いたチェック実施方法の例¶
「画像には代替テキストがなければなりません」という問題が出ないことを確認する。
ただし、画像に何かしらの代替テキストが入っていれば問題として検知されないため、適切ではない代替テキストの検出をすることはできません。
チェックID: 0461¶
情報や機能性を一切持たない画像には、空のalt
属性(alt=""
)やrole="presentation"
が付与されていて、スクリーン・リーダーで読み上げられない。
- 対象
コード
- 関連ガイドライン
- 参考情報
チェックID: 0471¶
情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
NVDAを用いたチェック実施方法の例¶
ブラウズ・モードでのカーソルキー操作で当該の画像がある箇所を通過したとき、画像の存在が分かるような読み上げがされない
チェックID: 0481¶
画像化されたテキストを用いて実装する対象として、自社および他者のロゴ、バナー、図や写真の中の文字列以外のものが設計資料中に存在しない。
- 対象
デザイン
- 関連ガイドライン
画像化されたテキスト:[SHOULD] 画像化されたテキストを使用しない
- 参考情報
チェックID: 0501¶
自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。
- 対象
プロダクト
- 関連ガイドライン
画像化されたテキスト:[SHOULD] 画像化されたテキストを使用しない
- 参考情報
チェックID: 0521¶
画像化されているテキストと同じ内容がalt
属性またはaria-label
属性で示されていて、スクリーン・リーダーなとで確認できる。
- 対象
コード
- 関連ガイドライン
画像化されたテキスト:[MUST] テキスト情報の提供
- 参考情報
チェックID: 0531¶
画像化されているテキストと同じ内容がスクリーン・リーダーなとで確認できる。
- 対象
プロダクト
- 関連ガイドライン
画像化されたテキスト:[MUST] テキスト情報の提供
- 参考情報
NVDAを用いたチェック実施方法の例¶
ブラウズ・モードでのカーソルキー操作で当該の画像を読み上げさせたとき、画像に含まれるテキストと同じ内容が読み上げられる
チェックID: 0541¶
見出し(h1
~h6
)、箇条書き(ul
, ol
, dl
)、表(table
)など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。
- 対象
デザイン
- 関連ガイドライン
マークアップ全般:[MUST] 文書構造を適切にマークアップする
チェックID: 0551¶
見出し(h1
~h6
)、箇条書き(ul
, ol
, dl
)、表(table
)などを用いてセマンティクスが適切にマークアップされている。
- 対象
コード
- 関連ガイドライン
マークアップ全般:[MUST] 文書構造を適切にマークアップする
チェックID: 0591¶
静的なテキストではない部分(例:開閉するメニュー、タブ・パネル、日付選択UI)も、スクリーン・リーダーで問題なく操作できる。
- 対象
プロダクト
- 関連ガイドライン
マークアップ全般:[MUST] コンポーネントをアクセシブルにする
- 参考情報
NVDAを用いたチェック実施方法の例¶
以下のすべてを満たしている:
ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる
その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる
操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる
操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる
チェックID: 0621¶
多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
テキスト:[MUST] ページの主たる言語の指定
- 参考情報
NVDAを用いたチェック実施方法の例¶
NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。(スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照)
ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、表示されているテキストが問題なく読み上げられることを確認する。
チェックID: 0631¶
そのページの目的を示し、かつ他のページとは異なるページ・タイトル(title
要素)が設計資料で定義されている。
- 対象
デザイン
- 関連ガイドライン
ページ全体:[MUST] タイトルの指定
- 参考情報
チェックID: 0651¶
そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。(ブラウザーのタイトルバー/タブバーに表示されている。)
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[MUST] タイトルの指定
- 参考情報
チェックID: 0661¶
ページのどの部分がそれぞれheader
, nav
, main
, footer
要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。
- 対象
デザイン
- 関連ガイドライン
ページ全体:[MUST] ページを構成する領域の明示
ページ全体:[MUST] コンポーネントの一貫した出現順序
- 参考情報
チェックID: 0671¶
header
,main
,nav
,footer
の各要素が適切に用いられている。またはこれらが
role
属性で明示されている。
- 対象
コード
- 関連ガイドライン
ページ全体:[MUST] ページを構成する領域の明示
- 参考情報
チェックID: 0672¶
main
要素が本文の開始位置を反映している。または本文の先頭部分に
h1
要素やh2
要素でマークアップされた見出しがある。
- 対象
コード
- 関連ガイドライン
ページ全体:[MUST] 本文の開始位置の明示
- 参考情報
チェックID: 0681¶
スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[MUST] 本文の開始位置の明示
- 参考情報
NVDAを用いたチェック実施方法の例¶
以下のいずれかの方法で、本文やその画面の中心的な機能の開始位置に移動することができる。
ブラウズ・モードで、次/前の見出しへの移動(H/Shift+Hキー)を実行して、容易に本文直前の見出しに移動できる
ブラウズ・モードで、次のランドマークへの移動(Dキー)でmain要素の先頭部分に容易に移動でき、その直後から本文が始まっている
チェックID: 0711¶
ページの状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[MUST] 適切な記述順序
動的コンテンツ:[MUST] 適切なDOMツリーを維持する
- 参考情報
NVDAを用いたチェック実施方法の例¶
ブラウズ・モードでページ先頭からカーソルキー操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる
チェックID: 0741¶
スクリーン・リーダーが見出しを適切に見出しとして認識している。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
NVDAを用いたチェック実施方法の例¶
以下の手順で見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する
ブラウズ・モードで要素リストを表示(NVDA+F7)
「種別」を「見出し」に設定(Alt+H)
チェックID: 0781¶
グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで共通に用いられているページの構成要素は、すべてのページで同じ出現順序になっている。かつ
これらの構成要素の中でのリンクやボタンの出現順序はすべてのページで同じになっている。
- 対象
デザイン
- 関連ガイドライン
ページ全体:[MUST] コンポーネントの一貫した出現順序
- 参考情報
チェックID: 0801¶
グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで共通に用いられているページの構成要素は、すべてのページで同じ出現順序になっている。かつ
これらの構成要素の中でのリンクやボタンの出現順序はすべてのページで同じになっている。
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[MUST] コンポーネントの一貫した出現順序
- 参考情報
チェックID: 0811¶
そのページへの到達手段が複数ある。
例:
ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。
特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。
ヘルプ・ページ中のリンクからも遷移できる。
- 対象
デザイン
- 関連ガイドライン
ページ全体:[SHOULD] 複数の到達手段
- 参考情報
チェックID: 0841¶
グローバル・ナビゲーション内の表示やいわゆるパンくずリストで、そのページのサイト内での位置が明示されている。
- 対象
デザイン
- 関連ガイドライン
ページ全体:[SHOULD] 現在地の明示
- 参考情報
チェックID: 0851¶
aria-current
属性を用いて、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が明示されている。
- 対象
コード
- 関連ガイドライン
ページ全体:[SHOULD] 現在地の明示
- 参考情報
チェックID: 0861¶
スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[SHOULD] 現在地の明示
- 参考情報
NVDAを用いたチェック実施方法の例¶
ブラウズ・モードでのカーソルキー操作による読み上げで、パンくずリストやグローバル・ナビゲーションの中で現在表示中のページを表す箇所を読み上げたとき、「現在のページ」というような発声がある
チェックID: 0862¶
グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような表示がされている。
- 対象
プロダクト
- 関連ガイドライン
ページ全体:[SHOULD] 現在地の明示
- 参考情報
チェックID: 0891¶
line-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。
- 対象
プロダクト
- 関連ガイドライン
テキスト:[MUST] テキスト表示のカスタマイズ
- 参考情報
チェックID: 0921¶
複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
NVDAを用いたチェック実施方法の例¶
NVDAの音声設定で、「サポートされている場合自動的に言語を切り替える」と「サポートされている場合自動的に方言を切り替える」がチェックされている状態にする。(スクリーン・リーダーを用いたチェックの実施方法の「その他の初期設定」、「音声」の項を参照)
ブラウズ・モードで上下矢印キーを用いて読み上げさせたとき、使用されている言語に応じて読み上げに用いられる音声が切り替わることを確認する。
チェックID: 0931¶
フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または
aria-label
属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 0941¶
フォーム・コントロールは、ラベルとなるテキストまたは画像と
label
要素またはaria-labelledby
属性で関連付けられている。またはaria-label
属性で適切なラベルが付けられている。開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。
- 対象
コード
- 関連ガイドライン
- 参考情報
チェックID: 0951¶
フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または
スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。
- 対象
プロダクト
- 関連ガイドライン
- 参考情報
axeを用いたチェック実施方法の例¶
「フォーム要素にはラベルがなければなりません」という問題が出ないことを確認する。
チェックID: 0961¶
フォームの入力に制限時間を設ける場合:
事前にユーザーがその制限時間を解除することができる。又は、
事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、
時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、
リアルタイムのイベント(例えば、オークション)において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、
制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、
制限時間が20時間よりも長い。
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 1021¶
制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。
- 対象
デザイン
- 関連ガイドライン
- 参考情報
チェックID: 1051¶
フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こるような機能が設計資料に存在しない。
- 対象
デザイン
- 関連ガイドライン
フォーム:[MUST] フォームの値の変更時の挙動
- 参考情報
チェックID: 1071¶
フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。
- 対象
プロダクト
- 関連ガイドライン
フォーム:[MUST] フォームの値の変更時の挙動
- 参考情報
チェックID: 1131¶
フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。
- 対象
プロダクト
- 関連ガイドライン
フォーム:[SHOULD] エラーの修正方法の提示
- 参考情報
チェックID: 1141¶
法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能になっている。
- 対象
デザイン
- 関連ガイドライン
フォーム:[SHOULD] 誤操作の防止
- 参考情報
チェックID: 1171¶
ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時に自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。
- 対象
デザイン
- 関連ガイドライン
動的コンテンツ:[MUST] ステータス・メッセージの適切なマークアップ
- 参考情報
チェックID: 1181¶
操作の結果などを伝えるステータス・メッセージには適切にaria-live
属性が付与されている。
- 対象
コード
- 関連ガイドライン
動的コンテンツ:[MUST] ステータス・メッセージの適切なマークアップ
- 参考情報
チェックID: 1191¶
操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。
- 対象
プロダクト
- 関連ガイドライン
動的コンテンツ:[MUST] ステータス・メッセージの適切なマークアップ
- 参考情報
NVDAを用いたチェック実施方法の例¶
設計資料に従ってステータス・メッセージが表示される操作を行い、ステータス・メッセージが自動的に読み上げられることを確認する。
参考:期待される挙動を確認する場合は、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照
チェックID: 1231¶
自動更新されるコンテンツがない。または
ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。
- 対象
デザイン
- 関連ガイドライン
動的コンテンツ:[MUST] 自動更新されるコンテンツ
- 参考情報
チェックID: 1251¶
自動更新されるコンテンツがない。または
ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。
- 対象
プロダクト
- 関連ガイドライン
動的コンテンツ:[MUST] 自動更新されるコンテンツ
- 参考情報
チェックID: 1291¶
ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。
- 対象
デザイン
- 関連ガイドライン
動的コンテンツ:[SHOULD] 割り込み表示
- 参考情報
チェックID: 1311¶
ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。
- 対象
プロダクト
- 関連ガイドライン
動的コンテンツ:[SHOULD] 割り込み表示
- 参考情報
チェックID: 1321¶
ログイン・セッションにタイムアウトを設ける場合:
ログイン時などに、ユーザーがセッション・タイムアウトの設定を解除することができる。又は、
ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、大幅なタイムアウト設定値の調整をすることができる。又は、
時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーがタイムアウトを10回以上延長することができる。又は、
タイムアウトが必要不可欠なもので、タイムアウトを延長することがコンテンツの動作を無効にすることになる。又は、
タイムアウトが20時間よりも長い。
- 対象
デザイン
- 関連ガイドライン
ログイン・セッション:[MUST] ログイン・セッションにタイムアウトを設ける場合
- 参考情報
チェックID: 1381¶
ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。
- 対象
デザイン
- 関連ガイドライン
ログイン・セッション:[SHOULD] 制限時間超過後の操作の継続
- 参考情報
チェックID: 1411¶
ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または
前後のテキストから、そこにプレイヤーがあることが推測できる。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[MUST] 音声・映像コンテンツの存在を明示する
- 参考情報
チェックID: 1451¶
自動的に開始し5秒以上続く動画、アニメーションがない。または
動画やアニメーションを呈し、一時停止、または非表示にすることができる。
- 対象
デザイン
- 関連ガイドライン
音声・映像コンテンツ:[MUST] 動きを伴うコンテンツ
チェックID: 1471¶
自動的に開始し5秒以上続く動画、アニメーションがない。または
動画やアニメーションを呈し、一時停止、または非表示にすることができる。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[MUST] 動きを伴うコンテンツ
チェックID: 1481¶
音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。
- 対象
デザイン
- 関連ガイドライン
音声・映像コンテンツ:[MUST] テキスト情報と同等の内容にする
- 参考情報
チェックID: 1501¶
音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[MUST] テキスト情報と同等の内容にする
- 参考情報
チェックID: 1561¶
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または
動画には音声解説が含まれている。または
映像に関するテキストによる説明が提供されている。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[MUST] テキスト情報または音声解説の提供
- 参考情報
チェックID: 1562¶
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または
動画には音声解説が含まれている。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[SHOULD] 音声解説の提供
- 参考情報
チェックID: 1591¶
映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。
- 対象
プロダクト
- 関連ガイドライン
音声・映像コンテンツ:[MUST] 書き起こしテキストの提供
- 参考情報