File tree Expand file tree Collapse file tree 2 files changed +95
-0
lines changed Expand file tree Collapse file tree 2 files changed +95
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="ja ">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < title > WAIC-CODE-0142-01</ title >
6
+ < meta name ="copyright " content ="This document is licensed under a Creative Commons 4.0 ">
7
+ < link rel ="license " href ="https://creativecommons.org/licenses/by/4.0/ ">
8
+ < meta name ="author " content ="ウェブアクセシビリティ基盤委員会(WAIC) ">
9
+ < script >
10
+ function findOrange ( ) {
11
+ document . getElementById ( "resultsmsg" ) . textContent = "0 件の結果が返されました"
12
+ }
13
+ </ script >
14
+ </ head >
15
+ < body >
16
+ < main >
17
+ < div role ="search ">
18
+ < label for ="mockinput "> 次の語と一致する単語を検索:
19
+ < input type ="text " name ="mockinput " id ="mockinput " value ="オレンジ ">
20
+ </ label >
21
+ < button id ="btn " onclick ="findOrange() "> 検索</ button >
22
+ </ div >
23
+ < h2 > 結果</ h2 >
24
+ < p role ="status " id ="resultsmsg "> </ p >
25
+ </ main >
26
+ </ body >
27
+ </ html >
Original file line number Diff line number Diff line change
1
+ # テスト ID
2
+
3
+ WAIC-TEST-0142-01
4
+
5
+ # テストのタイトル
6
+
7
+ 検索結果にステータスメッセージを提供するために role="status" を使用する。
8
+
9
+ # テストの目的
10
+
11
+ role="status" を持つ要素の内容が更新された際に、変更が通知されることを確認する。
12
+
13
+ # テストの対象となる達成基準 (複数)
14
+
15
+ 4.1.3
16
+
17
+ # 関連する達成方法 (複数)
18
+
19
+ ARIA22
20
+
21
+ # テストコードのソース (抜粋)
22
+
23
+ ``` html
24
+ <main >
25
+ <div role =" search" >
26
+ <label for =" mockinput" >次の語と一致する単語を検索:
27
+ <input type =" text" name =" mockinput" id =" mockinput" value =" オレンジ" >
28
+ </label >
29
+ <button id =" btn" onclick =" findOrange()" >検索</button >
30
+ </div >
31
+ <h2 >結果</h2 >
32
+ <p role =" status" id =" resultsmsg" ></p >
33
+ </main >
34
+ ```
35
+
36
+ ``` JavaScript
37
+ function findOrange () {
38
+ document .getElementById (" resultsmsg" ).textContent = " 0 件の結果が返されました"
39
+ }
40
+ ```
41
+
42
+ # テスト手順 (視覚閲覧環境)
43
+
44
+ なし
45
+
46
+ # 期待される結果 (視覚閲覧環境)
47
+
48
+ なし
49
+
50
+ # テスト実施時の注意点 (視覚閲覧環境)
51
+
52
+ なし
53
+
54
+ # テスト手順 (音声閲覧環境)
55
+
56
+ テストファイルを開き、検索フィールドに初期値「オレンジ」が入力されている状態で「検索」ボタンをクリックし通知内容を確認する。
57
+
58
+ # 期待される結果 (音声閲覧環境)
59
+
60
+ 「検索」ボタンを実行した後、フォーカス位置の変更に関わらず、「0 件の結果が返されました」と通知される。
61
+
62
+ # テスト実施時の注意点 (音声閲覧環境)
63
+
64
+ なし
65
+
66
+ # 関連する要素や属性
67
+
68
+ role 属性
You can’t perform that action at this time.
0 commit comments