0119-01 / SCR2のテストを追加

waic · Sep 21, 2024 · 15a4b5a · 15a4b5a
1 parent 0dc162a
commit 15a4b5a
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 7 deletions.
diff --git a/WAIC-CODE/WAIC-CODE-0119-01.html b/WAIC-CODE/WAIC-CODE-0119-01.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>WAIC-CODE-0119-01</title>
+  <meta name="copyright" content="This document is licensed under a Creative Commons 4.0">
+  <link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
+  <meta name="author" content="ウェブアクセシビリティ基盤委員会（WAIC）">
+  <script>
+    function updateImage(imgId, isOver) {
+      var theImage = document.getElementById(imgId);
+
+      if (theImage != null) {
+        if (isOver) {
+          theImage.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiNGRjc3MDAiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjRkY3NzAwIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
+        } else {
+          theImage.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
+        }
+      }
+    }
+  </script>
+</head>
+<body>
+  <h1>WAIC-CODE-0119-01</h1>
+  <p>以下のリンクにマウスオーバーするかTabキーでフォーカスし、画像の変化を確認してください</p>
+  <a
+    href="#"
+    onmouseover="updateImage('link1', true);"
+    onfocus="updateImage('link1', true);"
+    onmouseout="updateImage('link1', false);"
+    onblur="updateImage('link1', false);"
+  >
+    <img
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="
+      alt=""
+      id="link1"
+      width="16"
+      height="16"
+    >
+    リンク 1
+  </a>
+  <a
+    href="#"
+    onmouseover="updateImage('link2', true);"
+    onfocus="updateImage('link2',true);"
+    onmouseout="updateImage('link2', false);"
+    onblur="updateImage('link2', false);"
+  >
+    <img
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="
+      alt=""
+      id="link2"
+      width="16"
+      height="16"
+    >
+    リンク 2
+  </a>
+</body>
+</html>
diff --git a/WAIC-TEST/HTML/WAIC-TEST-0119-01.md b/WAIC-TEST/HTML/WAIC-TEST-0119-01.md
@@ -0,0 +1,92 @@
+# テスト ID
+
+WAIC-TEST-0119-01
+
+# テストのタイトル
+
+キーボード及びマウスのイベントハンドラを両方とも使用する
+
+# テストの目的
+
+キーボードとマウスの両方のイベントハンドラを使用して、同等の処理を実行できることを確認する
+
+# テストの対象となる達成基準
+
+2.1.1
+
+# 関連する達成方法 (複数)
+
+SCR2
+
+# テストコード (テストファイルへのリンク)
+
+[WAIC-CODE-0119-01](https://waic.github.io/as_test/WAIC-CODE/WAIC-CODE-0119-01.html)
+
+# テストコードのソース (抜粋)
+
+```javascript
+function updateImage(imgId, isOver) {
+  var theImage = document.getElementById(imgId);
+
+  if (theImage != null) {
+    if (isOver) {
+      theImage.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiNGRjc3MDAiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjRkY3NzAwIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
+    } else {
+      theImage.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
+    }
+  }
+}
+```
+
+```html
+<a
+  href="#"
+  onmouseover="updateImage('link1', true);"
+  onfocus="updateImage('link1', true);"
+  onmouseout="updateImage('link1', false);"
+  onblur="updateImage('link1', false);"
+>
+  <img
+    src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGxpbmUgeDE9IjgiIHkxPSI0IiB4Mj0iOCIgeTI9IjEyIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjEyIiB5Mj0iOCIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="
+    alt=""
+    id="link1"
+    width="16"
+    height="16"
+  >
+  リンク 1
+</a>
+<!-- 「リンク 2」も同様 -->
+```
+
+# テスト手順 (視覚閲覧環境)
+
+1. ページを表示し、「リンク 1」内にグレー色の画像が表示されていることを確認する
+2. キーボードのTabキーを使用して「リンク 1」にフォーカスし、「リンク 1」内の画像の色を確認する（黄色に変化する）
+3. キーボードのTabキーを使用して「リンク 1」以外の要素にフォーカスし、「リンク 1」内の画像の色を確認する（グレー色に変化する）
+4. マウスカーソルを「リンク 1」の中に移動し、「リンク 1」内の画像の色を確認する（黄色に変化する）
+5. マウスカーソルを「リンク 1」の外に移動し、「リンク 1」内の画像の色を確認する（グレー色に変化する）
+
+# 期待される結果 (視覚閲覧環境)
+
+- キーボード操作をしたとき、画像の色の変化が期待通りであること
+- マウス操作をしたとき、画像の色の変化が期待通りであること
+
+# テスト実施時の注意点 (視覚閲覧環境)
+
+- ブラウザのJavaScriptが有効になっていることを確認すること
+
+# テスト手順 (音声閲覧環境)
+
+なし
+
+# 期待される結果 (音声閲覧環境)
+
+なし
+
+# テスト実施時の注意点 (音声閲覧環境)
+
+なし
+
+# 関連する要素や属性
+
+script 要素, a・buttonなどのフォーカス可能な要素, イベントハンドラー属性
diff --git a/WAIC-TEST/HTML_未着手/WAIC-TEST-0119-01.md b/WAIC-TEST/HTML_未着手/WAIC-TEST-0119-01.md