チェック項目
プレーンなHTMLの組み合わせで目的が達成できるか検討する
アクセシビリティが確保された定番のパターンをアクセシブルなデザインパターンから探し、目的が達成できるか検討する
「定番のパターン」とは
レベル1：必ず達成
HTMLにもともと備わっている要素はすべてアクセシブルになるように作られています。HTMLで賄いきれない場合でも、アクセシビリティ確保の方法論が確立されている定番のデザインパターン（タブ・ダイアログなど）を採用するようにしてください。
デザイン フォーム・インタラクション
ウェブページとユーザーのインタラクションに関するガイドラインです。主としてデザイナーが取り組む内容ですが、内容については企画も把握する必要があります。
レベル1 必ず達成
チェック項目
キーボードですべてのコンテンツや機能を利用できるようにする
「キーボード操作」とは
レベル1：必ず達成
ポインター操作やタッチ操作が使えない人のために、キーボード操作ですべてのコンテンツや機能を利用できるようにしてください。項目の選択・右クリック・ダブルクリック・ホバー・ホイール・ドラッグ＆ドロップ・タッチジェスチャーなどに依存している操作を見つけ、キーボード操作のみで完結できるようにデザインしてください。
キーボード操作の必要性
通常、ウェブページはキーボードのTabキーやEnterキー、矢印キーを使って操作することができます。細かい操作を苦手とする上肢障害のユーザーはマウスやタッチのようなポインティング操作が使えません。ユーザーが操作できる機能はすべて、マウスやタッチだけでなく、キーボードのみで操作できる必要があります。
参考情報
チェック項目
妥当なキーボード操作方法についてエキスパートに相談する
「カスタムUIのキーボード操作」とは
レベル1：必ず達成
HTMLや既存のデザインパターンでは賄いきれない独自のUIをデザインする場合であっても、基本的なキーボード操作の慣習に従うようにしてください。
参考情報
レベル2 可能な限り達成
チェック項目
可能なかぎり、ホバーではなく選択でコンテンツを表示する
ユーザーによる明示的な閉じるアクションによって閉じるようにする
「ホバーで表示されるコンテンツ」とは
レベル2：可能な限り達成
拡大鏡を利用している弱視のユーザーにとって、ポインターホバーで表示されるコンテンツは気づきにくかったり、表示されたコンテンツを読もうとポインターを動かしたとき意図せず閉じてしまうことがあります。ホバーによるコンテンツの表示はできれば避け、明示的な開く・閉じるアクションをトリガーにして表示・非表示をしてください。
具体例：ツールチップ
マウスオーバーで表示されるツールチップ
マウスオーバーで表示されるツールチップはタッチ端末からのアクセスが良くない。
拡大鏡に対応していないツールチップ
拡大鏡をつかって画面を大きく拡大しているユーザーは、読みたいテキストが画面外に表示され気づけないことがある。気づけたとしても、ツールチップを読むためにアイコンからマウスカーソルを外すと、ツールチップが閉じてしまうかもしれない。
参考情報
チェック項目
タッチジェスチャー・ドラッグ・マウスホイールで操作する機能は、シンプルなポインター操作だけでも利用できるようにする
「シンプルなポインター操作」とは
レベル2：可能な限り達成
ピンチ操作やスワイプなどのタッチジェスチャー、ドラッグなどのマウス操作は、運動機能に障害があるユーザーには利用できないかもしれません。マウスホイールなどのデバイス依存の操作は、ユーザーのデバイスが対応していないかもしれません。シングルクリックやダブルクリックなどのシンプルなポインター操作だけでも機能を利用できるようにしてください。
参考情報
チェック項目
すべてのフォームコントロールにラベルを設定する
フォームコントロールの付近にラベルを表示する
ラベルを常に表示する
「フォームコントロールのラベル」とは
レベル2：可能な限り達成
ユーザーの入力を受け付ける要素（フォームコントロール）のそばに常に表示されるラベルを配置することは、認知障害や弱視をもつユーザーの助けになります。
具体例：フォームコントロールのラベル
プレースホルダーでラベルを代用する
フォームコントロールとラベルが離れている
※程度の問題であり、左寄せのラベルを禁止するものではありません。
フォームコントロールの付近にラベルを表示する
参考情報
チェック項目
エラーの発生箇所と原因を具体的に記述する
エラーの修正方法を説明する
「エラーメッセージ」とは
レベル2：可能な限り達成
ユーザーの操作によってエラーが発生したとき、エラーについての十分な情報を提示してください。
具体例① エラーの原因を明記する
エラーの原因を明記しない
なぜログインに失敗したかわからず、ユーザーは修正のためのアクションを起こせない。
エラーの原因を明記する
なぜログインに失敗したかわかり、ユーザーは修正のためのアクションを起こせる。
具体例② エラーの修正方法を説明する
あいまいな修正指示
正しい形式とは何かが不明瞭で、どのように修正すればよいのかわからない。
具体的で明快な修正指示
要求されている形式や文脈の情報を提供することで、正しい値に修正しやすくなる。
参考情報
チェック項目
エラーメッセージを誰にでも見つけやすいようにする
エラー箇所に容易にたどり着けるようにする
「エラーメッセージの提示」とは
レベル2：可能な限り達成
視覚障害をもつユーザーは操作箇所から離れた場所に注意喚起が出ても気づかない可能性があります。エラー提示の際にページ遷移を伴う場合、ページの上部に目立つようにエラーメッセージを提示してください。動的にエラーを提示する場合、ポインターやフォーカスの付近にエラーを提示するようにしてください。
気づきやすいエラーメッセージの提示パターン
エラーメッセージを表示するタイミングには大別して2種類があります。エラーを含むHTMLをサーバーサイドから返却するものと、JavaScriptを使用してクライアントサイドで動的に行うものです。晴眼者にとってはあまり違いはありませんが、スクリーンリーダー利用者、拡大鏡利用者にとっての体験は大きく異なります。それぞれでの適切な提示方法について理解することが重要です。
エラーを含むHTMLをサーバーサイドから返却する場合、ページ遷移を伴う点に特徴があります。以下のような点に留意するとよいでしょう。
- エラーはページのできるだけ最初のほうに表示する
- エラー文言から当該箇所にジャンプできるようにする
- ページタイトルに「エラー」の文言を含めることでエラーの存在により気づきやすくなる
クライアントサイドで動的にエラーを表示する場合、ユーザーが注目している場所から離れた場所にエラーを表示しても気づけないことがあります。以下のような点に留意するとよいでしょう。
- 送信ボタンが押されたとき、送信ボタンの付近にエラーを表示する
- または、エラーがあることをアラートダイアログで表示する。OKボタンを押すとエラーのあるフォームコントロールにフォーカスを移動する
- または、エラーが発生した箇所に自動的にフォーカスを移動し、フォームコントロールのすぐそばにエラー文言を表示する
具体例①：エラーを含むHTMLをサーバーサイドから返却する
エラーを含むHTMLをサーバーサイドから返却する
エラーをページ上部に表示する。各箇所にもエラーの内容を表示する。ページ上部のエラーをクリックすると各箇所にジャンプできるようになっていると尚よい。
具体例②：クライアントサイドで動的にエラーを表示する
送信ボタンを押せなくする
送信ボタンのコントラストを落とし押せない状態にしていると、ユーザーは送信ボタンが見つけられなかったり、送信できない理由が理解できないことがある。
ボタンから離れた位置にエラーを表示する
送信ボタンから離れた位置で起きた変化は気づかれないことがある。
送信ボタンの付近にエラーを表示する
送信ボタンを常に表示し、送信ボタンが押されたらボタン付近にエラーを表示すると、多くのユーザーがエラーに気づくことができる。
参考情報
レベル3 できれば考慮
チェック項目
デバイスの向きを制限しない
デバイスの回転なしですべてのコンテンツや機能を利用できるようにする
「デバイスの向き」とは
レベル3：できれば考慮
運動機能障害を持つユーザーはデバイスの向きを固定して利用していることがあり、デバイスの向きが制限されたコンテンツや機能は利用できないかもしれません。
参考情報
チェック項目
リンクやフォーム送信を同じタブで開く
「新しいタブで開くリンク」とは
レベル3：できれば考慮
視覚的なコンテンツを知覚するのに困難を伴うユーザーをはじめとする一部のユーザーにとっては、リンクやフォーム送信を新しいタブで開くことは混乱の原因となりえます。
参考情報
チェック項目
UIがフォーカスを受取ったときや、フォームコントロール等の値を変更したとき、予測しづらいコンテンツの変化を起こさない
コンテンツを変化させるための確定する操作をユーザーにゆだねる
「予測可能なパターン」とは
レベル3：できれば考慮
予測しづらいことが起きると、支援技術のユーザーや認知障害を持つユーザーは混乱したり、操作ができなくなることがあります。
具体例：プルダウンメニューによるナビゲーション
値を変更するとページ遷移する
HTMLのselect要素で実装された並び順選択UIでは、値が変更されるとページ遷移が行われる。値が変更されたタイミングでページ遷移が起きることは予測が難しい。キーボードユーザーは上下キーを使って値をひとつ変えただけでページ遷移してしまうため、目的の項目を選ぶことができない。
参考情報
チェック項目
制限時間を設けない
制限時間が必要な場合、利用者が事前に制限時間を延長・無効化できるようにするか、制限時間を 20 時間以上とする
「時間制限」とは
レベル3：できれば考慮
認知障害をもつユーザーやコンテンツの言語に堪能でないユーザーは、コンテンツを利用するのに時間がかかることがあり、設けられた制限時間では足りないかもしれません。リアルタイムイベント等の制限時間を変更することが不可能な理由がある場合を除いて、制限時間は設けないようにしてください。
参考情報
チェック項目
認知機能テストによるユーザー認証に代替手段を用意する
「ユーザー認証」とは
レベル3：できれば考慮
パズル認証や計算問題、記憶力を試す問題などは、認知障害を持つユーザーには利用できないことがあります。