アクセシビリティ・サポーテッド(AS)情報:SCR32

SCR32: クライアントサイドのバリデーションを提供し、DOMを介してエラーテキストを追加する

関連する達成基準の実装方法一覧

7.3.3.1入力エラー箇所の特定に関する達成基準 (等級A)

7.3.3.3入力エラー修正方法の提示に関する達成基準 (等級AA)

テストファイル

SCR32のテストファイル

見解

達成可能

対象

DOM操作でフォームの前に挿入される要素

注意点

スクリーンリーダー(音声ブラウザ)のHPRとNetReader、FocusTalk V3では意図したとおりに読み上げられない

備考

使用することによる悪影響はなく、支援技術の機能向上に期待する(ただし、HPRは開発を中止している)。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 1.[必須]項目に何も入力しないで[登録]ボタンをクリックすると、エラーメッセージと「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された
2.[必須]項目に何も入力しないで[登録]ボタンを押下すると、エラーメッセージと「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された
3.エラーメッセージ「3つの入力項目に入力エラーがあります。」にフォーカスをあて、Tabキーを押下すると該当項目のリストにフォーカスが移動した
4.該当項目のリストの項目「氏名 [必須]」でEnterキーを押下すると、その項目「氏名 [必須]」のテキストフィールドにフォーカスが移動した
Internet Explorer 7.0 1.マウス操作:何も入力せず「登録」をおすと、エラーメッセージが表示され、その下に該当項目のリストが表示される。
2.キーボード操作:何も入力せず「登録」をおすと、エラーメッセージが表示され、その下に該当項目のリストが表示される。
3.エラーメッセージにフォーカスがある状態でtabをおすと、該当個目に移動する。
4.該当項目のリストにフォーカスが移動したあと、enterをおすとその項目のテキストフィールドにフォーカスが移動する。
Internet Explorer 8.0 1.マウス操作:何も入力せず「登録」をおすと、エラーメッセージが表示され、その下に該当項目のリストが表示される。
2.キーボード操作:何も入力せず「登録」をおすと、エラーメッセージが表示され、その下に該当項目のリストが表示される。
3.エラーメッセージにフォーカスがある状態でtabをおすと、該当個目に移動する。
4.該当項目のリストにフォーカスが移動したあと、enterをおすとその項目のテキストフィールドにフォーカスが移動する。
Internet Explorer 9 1:未入力の状態で[登録]又は[送信]ボタンをクリックすると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
2:未入力の状態で[登録]又は[送信]ボタンを押下すると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
3:「3つの入力項目に入力エラーがあります。」にフォーカスがあり、Tabキーを押すと氏名[必須]、年齢[必須]E-mailアドレス[必須]の順にフォーカスされるか確認
4: 該当項目のリストのいずれかの項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動することを確認
1:○
2:○
3:○
4:○
Firefox 3.5 1:なにも入力せずに「登録」をクリックすると、「3つの入力項目に入力エラーがあります。」が表示され、3つのリンクが表示される
2:なにも入力せずに「登録」にフォーカスを合わせてEnterを押すと、「3つの入力項目に入力エラーがあります。」が表示され、3つのリンクが表示される
3:「「3つの入力項目に入力エラーがあります。」がフォーカスされており、Tabを押すと氏名[必須]、年齢[必須]E-mailアドレス[必須]の順にフォーカスされる
4:項目からEnterを押すと、該当する入力フィールドにフォーカスが移動する
Firefox 4.0 1:未入力の状態で[登録]又は[送信]ボタンをクリックすると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
2:未入力の状態で[登録]又は[送信]ボタンを押下すると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
3:「3つの入力項目に入力エラーがあります。」がフォーカスされており、Tabキーを押すと氏名[必須]、年齢[必須]E-mailアドレス[必須]の順にフォーカスされるか確認
4: 該当項目のリストのいずれかの項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動することを確認
Firefox 9.0 1:未入力の状態で[登録]又は[送信]ボタンをクリックすると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
2:未入力の状態で[登録]又は[送信]ボタンを押下すると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
3:「3つの入力項目に入力エラーがあります。」にフォーカスがあり、Tabキーを押すと氏名[必須]、年齢[必須]E-mailアドレス[必須]の順にフォーカスされるか確認
4: 該当項目のリストのいずれかの項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動することを確認
1:○
2:○
3:○
4:○
Safari 3.2 マウスで何も入力しないで送信ボタンを押すと、2つのテキストがデータ入力のテキストの下に表示される。(登録ボタンだと「3つの入力項目に入力エラーがあります」が基本情報の下に表示される)。
キーボードでも同じように表示されるが、「2つの入力項目にエラーがあります」でTabを押すと「提案」の入力フォームにいくが、Option+Tabだとリンク先の「提案[必須]」にいく。
1:○
2:○(ただしOption+Tab)
3:○(ただしTab)
4:○(ただしOption+Tab)
Safari 5.0.3 1:○
2:○(ただしOption+Tab)
3:○(ただしOption+Tab)
4:○(ただしOption+Tab)
JAWS for Windows 9.0 ■操作手順
1.[必須]項目に何も入力しないで[登録]ボタンを押した。
「3つの入力項目に入力エラーがあります。」と「次の入力項目を正しく入力してください。」と該当項目のリストが表示された
2.同時に、エラーメッセージ(例:「3つの入力項目に入力エラーがあります。 ページ内リンク」と読み上げ、フォーカスがあたった。
3.Tabキーを押下すると該当項目のリストにフォーカスが移動して「氏名[必須] ページ内リンク」と読み上げた。
4.氏名[必須] でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動して「プロフィール 氏名[必須] エディット」と読み上げた
■読み上げ
2.「3つの入力項目に入力エラーがあります マル 見出しレベル2 ページ内リンク」
3.「氏名 ダイカッコヒラキ 必須 ダイカッコトジ ページ内リンク」
4.「プロフィール 氏名 ダイカッコヒラキ 必須 ダイカッコトジ エディット」
ホームページ・リーダー 3.04 ■操作手順
1:○エラーメッセージは表示される
2:×フォーカスはボタンから移動していない
3:×フォーカスが移動していないので、次の項目を読み上げる
4:○Enterで該当する入力項目に飛ぶ
■音声読み上げ
「登録実行ボタン 登録実行ボタン(動いていないため)」
フォーカスがエラーメッセージに移動しない
PC-Talker XP 3.06 ■操作手順
1.エラーメッセージの下にリストが表示されていた。
2.表示されると同時に「3つの入力項目に入力エラーがあります。」と読み上げた。
■音声読み上げ
「3つの入力項目に入力エラーがあります。」
3.Tabキーを押下すると該当項目のリストにフォーカスが移動して読み上げた。
「3つの入力項目に入力エラーがあります。氏名 [必須]年齢 [必須]E-mailアドレス [必須]」
4.リスト項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動した。
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
[必須]項目に何も入力しないで[登録]又は[送信]ボタンを押下すると、エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)と「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されるが、表示されると同時に、エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)にフォーカスがあたって読み上げられなかった。
(「登録 のぼるの と」と読み上げ、そこで止まる。)
Tabキーを押下するとグラフィック画面の該当項目のリストにフォーカスするが、読み上げられない。何度かtabキーを押下すると、「提案 カクカッコ 文字入力」というところから読み上げ始めた。
グラフィック画面上でリストにフォーカスしているとき、いずれかの項目でEnterキーを押下しても、画面上も音声も何も変化はなかった。
■音声読み上げ
「SCR サーティーツーを実装したサンプル 以下の項目を入力してください。
基本情報 プロフィール 氏名 カクカッコ 必須 カクカッコトジ 文字入力 年齢 カクカッコ 必須 カクカッコトジ 文字入力 E マイナス メール アドレス カクカッコ 必須 カクカッコトジ 文字入力 登録」
FocusTalk V3 ■操作手順
1:○エラーメッセージは表示される
2:×フォーカスはメッセージに当たる。Enterを押下するとエラーメッセージが読み上げられる。
3:×フォーカスは移動しているが、右矢印または下矢印で次を読み上げると、ボタンの次から読み上げが開始される。
4:○Enterを押下するとテキストボックス入力ダイアログが表示される。
  テキストボックス入力ダイアログに文字列を入力後、Enterを押下すると、
  該当する入力項目に文字列が入力される。
■音声読み上げ
「送信ボタン(Enter押下)(Enter押下)2つの入力項目に入力エラーがあります。」
2:読み上げ中に、マウス操作でボタンを押下すると、表示されると同時に、エラーメッセージにフォーカスがあたって読み上げられる。
3:読み上げがボタンの次から開始されるのは、Focusの仮想カーソルがボタンから移動していないためだと思われる。
4:左記は全文読み上げの結果。
一文ずつ読み上げた場合、Enterを押下するとテキストボックスにカーソルが表示される。
NVDA 2010.1j ■操作手順
1. 必須項目を空欄にしたまま「送信」ボタンを押下すると、「2つの入力項目に入力エラーがあります。」と、「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された。
2. 同時に「2つの入力項目に入力エラーがあります。 リンク」と読み上げられた。
3. Tabキーを押すとリストに移動し、上下の矢印キーを押すことで内容を読み上げた。
4. たとえば「2. 自己評価 必須」と読まれるリンク項目を押下すると、該当項目のテキストフィールドに移動し、「自己評価 必須エディットオートコンプリート付き」と読み上げた。
■音声読み上げ
「2つの入力項目に入力エラーがあります。 リンク
1. 提案 [必須] リンク
2. 自己評価 [必須] リンク
自己評価 必須エディットオートコンプリート付き」
NVDA 2011.1 ■操作手順
1. 必須項目を空欄にしたまま「送信」ボタンを押下すると、「2つの入力項目に入力エラーがあります。」と、「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された。
2. 同時に「2つの入力項目に入力エラーがあります。 リンク」と読み上げられた。
3. Tabキーを押すとリストに移動し、上下の矢印キーを押すことで内容を読み上げた。
4. たとえば「2. 自己評価 必須」と読まれるリンク項目を押下すると、該当項目のテキストフィールドに移動し、「自己評価 必須エディットオートコンプリート」と読み上げた。
■音声読み上げ
「2つの入力項目に入力エラーがあります。 リンク
1. 提案 [必須] リンク
2. 自己評価 [必須] リンク
自己評価 必須エディットオートコンプリート」
Firefox18.0.1 1:未入力の状態で[登録]又は[送信]ボタンをクリックすると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
2:未入力の状態で[登録]又は[送信]ボタンを押下すると、エラーメッセージ「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されることを確認
3:「3つの入力項目に入力エラーがあります。」にフォーカスがあり、Tabキーを押すと氏名[必須]、年齢[必須]E-mailアドレス[必須]の順にフォーカスされるか確認
4: 該当項目のリストのいずれかの項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動することを確認
Google Chrome 25 【1】[必須]項目に何も入力しないで[登録]又は[送信]ボタンをクリックすると、エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)と「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されるかを確認する。
【2】[必須]項目に何も入力しないで[登録]又は[送信]ボタンを押下すると、エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)と「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示されるかを確認する。
【3】エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)にフォーカスがあり、Tabキーを押下すると該当項目のリストにフォーカスが移動するかを確認する。
【4】該当項目のリストにフォーカスが移動した後、いずれかの項目でEnterキーを押下すると、その項目のテキストフィールドにフォーカスが移動するかを確認する。
【1】○
[必須]項目に何も入力しないで[登録]ボタンをクリックすると、エラーメッセージ「3つの入力項目に入力エラーがあります。」と該当項目のリストが表示されることを確認した。
[必須]項目に何も入力しないで[送信]ボタンをクリックすると、エラーメッセージ「2つの入力項目に入力エラーがあります。」と該当項目のリストが表示されることを確認した。
【2】○
[必須]項目に何も入力しないで[登録]ボタンを押下すると、エラーメッセージ「3つの入力項目に入力エラーがあります。」と該当項目のリストが表示されることを確認した。
[必須]項目に何も入力しないで[送信]ボタンを押下すると、エラーメッセージ「2つの入力項目に入力エラーがあります。」と該当項目のリストが表示されることを確認した。
【3】エラーメッセージ(例:「2つの入力項目に入力エラーがあります。」)にフォーカスがあり、Tabキーを押下すると“提案 [必須]”にフォーカスが移動することを確認した。
【4】“提案 [必須]”にフォーカスが移動した後、Enterキーを押下すると、“提案 [必須]”のテキストフィールドにフォーカスが移動することを確認した。
Safari 6.0.5 送信ボタンの押下にはリターンキーを使用
NVDA 2012.3 ■操作手順
[データ入力]見出し内の必須項目を空欄にしたまま「送信」ボタンを押下すると、「2つの入力項目に入力エラーがあります。」と、「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された。
2. 同時に「2つの入力項目に入力エラーがあります。 リンク」と読み上げられた。
3. Tabキーを押すとリストに移動し、上下の矢印キーを押すことで内容を読み上げた。
4. たとえば「2. 自己評価 必須」と読まれるリンク項目を押下すると、該当項目のテキストフィールドに移動し、「自己評価 必須エディットオートコンプリート」と読み上げた。
■音声読み上げ
「2つの入力項目に入力エラーがあります。 リンク
1. 提案 [必須] リンク
2. 自己評価 [必須] リンク
自己評価 必須エディットオートコンプリート」
PC-Talker 7 2.12 ■操作手順
1.[必須]項目に何も入力しないで[登録]ボタンをEnterキーで押下し、エラーメッセージを表示
2.Tabキー押下で「1.氏名 [必須]」に移動
3.「1.氏名 [必須]」でTabキーを押下して、テキストフィールドへ移動
■音声読み上げ
「登録 のプッシュボタン 確認」
Enterキー押下でエラーメッセージを表示
「3つの入力項目に入力エラーがあります。」
Tabキー
「氏名 必須 リンク」
Enterキー
「氏名 必須 のエディット 文字入力」
*他の項目も同様
VoiceOver ■操作手順
必須項目「氏名」「年齢」「E-mailアドレス」を空欄にしたまま「送信」ボタンをダブルタップすると、「3つの入力項目に入力エラーがあります」と、「次の入力項目を正しく入力してください。」で始まる該当項目のリストが表示された。
2. 同時に「3つの入力項目に入力エラーがあります ページ内リンク」と読み上げられた。
3.1本指縦フリックするとリストの先頭に移動し、フリックすることで内容を読み上げた。
4. 「氏名」でダブルタップすると、該当項目のテキストフィールドに移動し、「氏名 必須 テキストフィールド 編集中」と読み上げた。
■音声読み上げ
「3つの入力項目に入力エラーがあります 見出しレベル2 ページ内リンク」
「氏名 必須 ページ内リンク
氏名 必須 テキストフィールド 編集中」