Skip to content
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

WAIC-TEST-0037-01 / （関連する達成方法なし）: required属性による必須項目の特定 #265

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

WAIC-TEST-0037-01 / （関連する達成方法なし）: required属性による必須項目の特定 #265

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dc3f07
#251 0030-01 のテストファイルを元に、required 属性による必須項目が可能かのテストを作成。
akiyamaa-cnt Feb 5, 2025
f85c7a0
#171 テストID を更新。
akiyamaa-cnt Feb 12, 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
118 changes: 118 additions & 0 deletions WAIC-CODE/WAIC-CODE-0037-01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>WAIC-CODE-0037-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）">
</head>

<body>
<h1>required属性による必須項目の特定</h1>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

0030-01 にはなかったですが、見出し構造を整えるために h1 を追加。


<h2>required属性が設定されている</h2>
<form action="#" method="post" id="login1" onsubmit="return errorCheck1()">
<p>注：[*]は必須項目を示します。</p>
<p>
<label for="usrname1">ログインネーム[*]</label>
<input type="text" name="usrname1" id="usrname1" required />
Comment on lines +19 to +20
Copy link
Contributor Author

Choose a reason for hiding this comment

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

テストには直接関係ないのですが、 id属性値やname属性値を調整しました。

「required属性が設定されている」「required属性が設定されていない」の2つのテストでの属性値の重複回避を、末尾数字が 1 と 2 で分けるようにしています。

</p>
<p>
<label for="pwd1">パスワード[*]</label>
<input type="password" name="pwd1" id="pwd1" size="12" required />
</p>
<p>
<label for="os_pc1">利用しているOS(PC)[*]</label>
<select id="os_pc1" name="os_pc1" required>
<option value="Windows">Windows</option>
<option value="macOS">macOS</option>
</select>
Comment on lines +27 to +31
Copy link
Contributor Author

Choose a reason for hiding this comment

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

select 要素の中に必須項目を示すテキストが含まれていたため、label 要素内の末尾へと移動しました。
あわせて、他の入力項目の必須項目を示すテキストも、同様に label 要素内の末尾に移動しています。

Copy link
Contributor

Choose a reason for hiding this comment

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

必須項目を示すテキスト = [*]

</p>
<p>
<label for="os_mobile1">利用しているOS(モバイル)[*]</label>
<select id="os_mobile1" name="os_mobile1" required>
<option value="">選択してください</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
</select>
</p>
<fieldset>
<legend>スクリーンリーダーの利用状況</legend>
<input type="radio" id="yes1" name="sr1" value="1" required />
<label for="yes1">利用している[*]</label>
<input type="radio" id="no1" name="sr1" value="2" required />
<label for="no1">利用していない[*]</label>
</fieldset>
Comment on lines +41 to +47
Copy link
Contributor Author

Choose a reason for hiding this comment

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

fieldset 要素に aria-required 属性が指定されていたので、input要素への指定へと変更しました。

ラジオボタングループへの required 属性の指定方法について相談したいです。
2つのラジオボタンに required 属性を設定する必要があるか悩んだのですが、MDN では以下のように記載されていたので、2つのラジオボタンに required 属性を設定しています。

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required

同じ名前が付けられた radio ボタンのグループのでは、グループ内の一つのラジオボタンに required 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに required 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。

Copy link
Contributor

Choose a reason for hiding this comment

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

  • 仕様上はどれかが必須になれば、グループ全体が必須になる
  • 「保守性」と言っているが、その要素だけ特別扱いのように見えることの懸念では？
  • このままでいいのでは

<p>利用しているスクリーンリーダー</p>
<div>
<input type="checkbox" id="pctk1" name="pctk1" required />
<label for="pctk1">PC-Talker[*]</label>
</div>
<div>
<input type="checkbox" id="nvda1" name="nvda1" required />
<label for="nvda1">NVDA[*]</label>
</div>
<p>
<label for="other1">その他コメント[*]</label>
<textarea id="other1" name="other1" required></textarea>
</p>
<p>
<input type="submit" value="次へ" id="next_btn1" name="next_btn1" />
</p>
</form>

<h2>required属性が設定されていない</h2>
<form action="#" method="post" id="login2" onsubmit="return errorCheck1()">
<p>注：[*]は必須項目を示します。</p>
<p>
<label for="usrname2">ログインネーム[*]</label>
<input type="text" name="usrname2" id="usrname2">
</p>
<p>
<label for="pwd2">パスワード[*]</label>
<input type="password" name="pwd2" id="pwd2" size="12">
</p>
<p>
<label for="os_pc2">利用しているOS(PC)[*]</label>
<select id="os_pc2" name="os_pc2">
<option value="Windows">Windows</option>
<option value="macOS">macOS</option>
</select>
</p>
<p>
<label for="os_mobile2">利用しているOS(モバイル)[*]</label>
<select id="os_mobile2" name="os_mobile2">
<option value="">選択してください</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
</select>
</p>
<fieldset>
<legend>スクリーンリーダーの利用状況</legend>
<input type="radio" id="yes2" name="sr2" value="1">
<label for="yes2">利用している[*]</label>
<input type="radio" id="no2" name="sr2" value="2">
<label for="no2">利用していない[*]</label>
</fieldset>
<p>利用しているスクリーンリーダー</p>
<div>
<input type="checkbox" id="pctk2" name="pctk2">
<label for="pctk2">PC-Talker[*]</label>
</div>
<div>
<input type="checkbox" id="nvda2" name="nvda2">
<label for="nvda2">NVDA[*]</label>
</div>
<p>
<label for="other2">その他コメント[*]</label>
<textarea id="other2" name="other2"></textarea>
</p>
<p>
<input type="submit" value="次へ" id="next_btn2" name="next_btn2" />
</p>
</form>

</body>
</html>
157 changes: 157 additions & 0 deletions WAIC-TEST/HTML/WAIC-TEST-0037-01.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
# テスト ID

WAIC-TEST-0030-01
Copy link
Contributor

Choose a reason for hiding this comment

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

0037-01 に直す


# テストのタイトル

required 属性による必須項目の特定（input要素、select要素、textarea要素）
Copy link
Contributor Author

Choose a reason for hiding this comment

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

0030-01 では次のようになっていたので、"aria-required" 部分を "required" に置き換え。

aria-required 属性による必須項目の特定（input要素、select要素、textarea要素）


# テストの目的

required属性が設定された要素にフォーカスを移動した際、支援技術に必須であることが伝わることを確認する
Copy link
Contributor Author

Choose a reason for hiding this comment

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

0030-01 では次のようになっていたので、"aria-required" 部分を "required" に置き換え。

required属性が設定された要素にフォーカスを移動した際、支援技術に必須であることが伝わることを確認する


# テストの対象となる達成基準 (複数)

1.3.1, 3.3.3

# 関連する達成方法 (複数)

なし
Copy link
Contributor Author

Choose a reason for hiding this comment

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

「required属性による必須項目の特定」を直接的に言及する達成方法が確認できなかったため「なし」と記載。

過去のテストケースでは、例えば WAIC-TEST-0027-01.md では「今のところなし」と記載。
同様にした方が良いか相談したいです。

Copy link
Contributor

Choose a reason for hiding this comment

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

  • 「今のところなし」と「なし」を積極的に使い分けてこなかった。
  • 「なし」を使うことの方が多い。


# テストコード (テストファイルへのリンク)

[WAIC-CODE-0037-01](https://waic.github.io/as_test/WAIC-CODE/WAIC-CODE-0037-01.html)

# テストコードのソース (抜粋)

```html
<h2>required属性が設定されている</h2>
<form action="#" method="post" id="login1" onsubmit="return errorCheck1()">
<p>注：[*]は必須項目を示します。</p>
<p>
<label for="usrname1">ログインネーム[*]</label>
<input type="text" name="usrname1" id="usrname1" required />
</p>
<p>
<label for="pwd1">パスワード[*]</label>
<input type="password" name="pwd1" id="pwd1" size="12" required />
</p>
<p>
<label for="os_pc1">利用しているOS(PC)[*]</label>
<select id="os_pc1" name="os_pc1" required>
<option value="Windows">Windows</option>
<option value="macOS">macOS</option>
</select>
</p>
<p>
<label for="os_mobile1">利用しているOS(モバイル)[*]</label>
<select id="os_mobile1" name="os_mobile1" required>
<option value="">選択してください</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
</select>
</p>
<fieldset>
<legend>スクリーンリーダーの利用状況</legend>
<input type="radio" id="yes1" name="sr1" value="1" required />
<label for="yes1">利用している[*]</label>
<input type="radio" id="no1" name="sr1" value="2" required />
<label for="no1">利用していない[*]</label>
</fieldset>
<p>利用しているスクリーンリーダー</p>
<div>
<input type="checkbox" id="pctk1" name="pctk1" required />
<label for="pctk1">PC-Talker[*]</label>
</div>
<div>
<input type="checkbox" id="nvda1" name="nvda1" required />
<label for="nvda1">NVDA[*]</label>
</div>
<p>
<label for="other1">その他コメント[*]</label>
<textarea id="other1" name="other1" required></textarea>
</p>
<p>
<input type="submit" value="次へ" id="next_btn1" name="next_btn1" />
</p>
</form>

<h2>required属性が設定されていない</h2>
<form action="#" method="post" id="login2" onsubmit="return errorCheck1()">
<p>注：[*]は必須項目を示します。</p>
<p>
<label for="usrname2">ログインネーム[*]</label>
<input type="text" name="usrname2" id="usrname2">
</p>
<p>
<label for="pwd2">パスワード[*]</label>
<input type="password" name="pwd2" id="pwd2" size="12">
</p>
<p>
<label for="os_pc2">利用しているOS(PC)[*]</label>
<select id="os_pc2" name="os_pc2">
<option value="Windows">Windows</option>
<option value="macOS">macOS</option>
</select>
</p>
<p>
<label for="os_mobile2">利用しているOS(モバイル)[*]</label>
<select id="os_mobile2" name="os_mobile2">
<option value="">選択してください</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
</select>
</p>
<fieldset>
<legend>スクリーンリーダーの利用状況</legend>
<input type="radio" id="yes2" name="sr2" value="1">
<label for="yes2">利用している[*]</label>
<input type="radio" id="no2" name="sr2" value="2">
<label for="no2">利用していない[*]</label>
</fieldset>
<p>利用しているスクリーンリーダー</p>
<div>
<input type="checkbox" id="pctk2" name="pctk2">
<label for="pctk2">PC-Talker[*]</label>
</div>
<div>
<input type="checkbox" id="nvda2" name="nvda2">
<label for="nvda2">NVDA[*]</label>
</div>
<p>
<label for="other2">その他コメント[*]</label>
<textarea id="other2" name="other2"></textarea>
</p>
<p>
<input type="submit" value="次へ" id="next_btn2" name="next_btn2" />
</p>
</form>
```

# テスト手順 (視覚閲覧環境)

テスト不要

# 期待される結果 (視覚閲覧環境)

なし

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

なし

# テスト手順 (音声閲覧環境)

テストファイルを操作し、結果を確認

# 期待される結果 (音声閲覧環境)

required属性が設定された要素にフォーカスを移動した際、支援技術に必須であることが伝わる
Copy link
Contributor Author

Choose a reason for hiding this comment

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

0030-01 では次のようになっていたので、"aria-required" 部分を "required" に置き換え。

aria-required属性が設定された要素にフォーカスを移動した際、支援技術に必須であることが伝わる


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

なし

# 関連する要素や属性

required 属性が指定されているinput 要素、select 要素、textarea 要素
Copy link
Contributor Author

Choose a reason for hiding this comment

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

0030-01 では次のようになっていたので、"aria-required" 部分を "required" に置き換え。

aria-required 属性が指定されているinput 要素、select 要素、textarea 要素