Skip to content

0143-01 / ARIA23のテストを追加（事例1） #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nishimotz merged 4 commits into from
Aug 13, 2025
Merged

0143-01 / ARIA23のテストを追加（事例1） #276

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6698b18
テストケース、テストコードの作成。#275
akiyamaa-cnt Jun 11, 2025
b1e32a2
誤って変更したテストケースの復帰。#275
akiyamaa-cnt Jun 11, 2025
c5e53eb
テストコードの追加。#275
akiyamaa-cnt Jun 11, 2025
a1debb5
テスト手順、テストコードの調整。 #275
akiyamaa-cnt Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions WAIC-CODE/WAIC-CODE-0143-01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,17 @@
<body>
<div role="main">
<h1>チャット</h1>
<p>メッセージを送信すると、「会話のログ」見出しの後にメッセージが表示されます。<br>その後、3秒おきに2回、自動返信のメッセージが追加で表示されます。</p>
<p>メッセージを送信すると、「会話のログ」見出しの後にメッセージが表示されます。<br>その後、チャットの終了を知らせるメッセージが表示されるまで、自動返信が2秒間隔で続きます。</p>
<div role="group" aria-labelledby="messageHeading">
<h2 id="messageHeading">メッセージ入力</h2>
<p id="messageDescription">（メッセージの入力内容は変更できません）</p>
<input type="text" name="fakeinput" readonly value="こんにちわ" aria-describedby="messageDescription">
<button id="messageButton" onclick="initiateChat()">メッセージを送る</button>
</div>
<div><a href="#chatHeading">ダミーコンテンツです。自動返信を待つ間に閲覧するメッセージで、リンク先に移動する必要はありません。ダミーコンテンツ終わり。</a></div>
<div>
<h2 id="chatHeading">会話のログ</h2>
<div id="chatLog" role="log" aria-labelledby="chatHeading">
<div id="chatLog" role="log">
<ul id="chatMessage"></ul>
</div>
</div>
Expand All @@ -37,21 +38,21 @@ <h2 id="chatHeading">会話のログ</h2>
var myVar;
var onetime = 0;
function makeChat () {
var chatText = ["自動返信：こんにちわ！", "自動返信：返信はこれで終了です"];
var chatText = ["自動返信：こんにちわ！", "自動返信：5つカウントした後、返信を終了します", "自動返信：1", "自動返信：2", "自動返信：3", "自動返信：4", "自動返信：5", "自動返信：返信はこれで終了です"];
var chatContent = document.getElementById("chatMessage");
var list = document.createElement("li")
var item = document.createTextNode(chatText[counter]);
list.appendChild(item);
chatContent.appendChild(list);
counter++;
if (counter > 1) {
if (counter > 7) {
clearInterval(myVar);
}
}
function initiateChat () {
if (onetime < 1) {
document.getElementById("chatMessage").innerHTML += "<li>あなた：こんにちわ</li>";
myVar = setInterval(makeChat, 3000);
myVar = setInterval(makeChat, 2000);
document.getElementById("messageButton").disabled = true;
onetime++;
} else {
Expand Down
36 changes: 11 additions & 25 deletions WAIC-TEST/HTML/WAIC-TEST-0143-01.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,49 +22,35 @@ ARIA23

```html
<h2 id="chatHeading">会話のログ</h2>
<div id="chatLog" role="log" aria-labelledby="chatHeading">
<div id="chatLog" role="log">
<ul id="chatMessage"></ul>
</div>
Copy link
Contributor Author

@akiyamaa-cnt akiyamaa-cnt Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

log role への aria-labelledby 指定を削除。

```

```JavaScript
function makeChat () {
var chatText = ["自動返信：こんにちわ！", "自動返信：返信はこれで終了です"];
var chatText = ["自動返信：こんにちわ！", "自動返信：5つカウントした後、返信を終了します", "自動返信：1", "自動返信：2", "自動返信：3", "自動返信：4", "自動返信：5", "自動返信：返信はこれで終了です"];
var chatContent = document.getElementById("chatMessage");
var list = document.createElement("li")
var item = document.createTextNode(chatText[counter]);
list.appendChild(item);
chatContent.appendChild(list);
counter++;
if (counter > 1) {
if (counter > 7) {
clearInterval(myVar);
}
}
```

# テスト手順 (視覚閲覧環境)
# テスト手順と期待される結果 (視覚閲覧環境)

## テスト手順 1

「メッセージを送る」ボタンを押下する

## 期待される結果 1

「会話のログ」見出しの後に、「あなた：こんにちわ」と表示される

## テスト手順 2

「メッセージを送る」の押下後、何もしないまま6秒程度待つ

## 期待される結果 2

3秒後に「自動返信：こんにちわ！」と通知され、さらに3秒後に「自動返信：返信はこれで終了です」と表示される
テスト不要
Copy link
Contributor Author

@akiyamaa-cnt akiyamaa-cnt Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

視覚閲覧環境でのテストを削除。


# テスト実施時の注意点 (視覚閲覧環境)

- ブラウザのJavaScriptが有効になっていることを確認すること
なし

# テスト手順 (音声閲覧環境)
# テスト手順と期待される結果 (音声閲覧環境)

## テスト手順 1

Expand All @@ -76,17 +62,17 @@ function makeChat () {

## テスト手順 2

「メッセージを送る」の押下後、何もしないまま6秒程度待つ
「メッセージを送る」ボタンのすぐ後に続く「ダミーコンテンツです」から始まるリンクへと移動する

## 期待される結果 2

3秒後に「自動返信：こんにちわ！」と通知され、さらに3秒後に「自動返信：返信はこれで終了です」と通知される
リンク内容の通知の後、「自動返信」から始まるメッセージが通知される（リンク内容の通知は、自動返信の通知に遮られないこと）
Copy link
Contributor Author

@akiyamaa-cnt akiyamaa-cnt Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ボタン押下後（チャット通知の開始後）、ユーザー操作中に log が通知される手順へと変更。


# テスト実施時の注意点 (音声閲覧環境)

- ブラウザのJavaScriptが有効になっていることを確認すること
- テストの通知を待つ間に他の通知が生じた場合、他の通知の完了後にテストによるメッセージが通知される。そのため、必ずしも3秒後にメッセージが通知されるとは限らない
- 自動返信メッセージの通知中に次の自動返信が生じた場合、それまでの自動返信は中断される場合がある
Copy link
Contributor Author

@akiyamaa-cnt akiyamaa-cnt Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「log role の更新内容の通知中」に log role の更新が発生した場合、NVDA と VoiceOver とでの振る舞いの違いがありました。

  • NVDA : log role の通知内容は中断されることなく、古いものから順番に通知される。
  • VoiceOver : log role の通知内容は中断され、最新の log role の更新内容のみが通知される。

NVDA の方がイメージするものに近い（log の通知として丁寧）のですが、VoiceOver の振る舞いも「古いものから開始する」が成立しているため NG とは言い切りにくいように思えました。
そのため、いずれも許容可能とする意図で注意点を記載しています。

Copy link
Contributor

@nishimotz nishimotz Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


# 関連する要素や属性

role属性、aria-labelledby属性
role属性