Using `label` as `legend` of `fieldset`

[IK-Ngoo]

Root cause

未處理前使用 label 模擬一組輸入元素的名稱，而非使用 legend標示，將造成：

• 輸入元素與群組名稱之間關連性，缺乏語意資訊。例如：選項表單中，以下為兩種標示輸入元素群組名稱的方式，使用 NVDA 語音瀏覽所報讀的資訊：

/* 使用 label 標示 */
標題    第 3 級  選項欄位
識別證件
選擇鈕  勾選    健保卡
選擇鈕  沒勾選    自然人憑證
選擇鈕  沒勾選    手機門號
補辦項目
核取方塊  沒勾選    健保卡

/* 使用 legend 標示 */
標題    第 3 級  選項欄位
群組    識別證件
選擇鈕  勾選    健保卡
選擇鈕  沒勾選    自然人憑證
選擇鈕  沒勾選    手機門號
離開群組
群組    補辦項目
核取方塊  沒勾選    健保卡

• label[for=ID] 會指向不存在的 id。

References

html

guide/_includes/form/form-checkable.html

Lines 3 to 19 in c864a32

	<label for="id" class="field-label">識別證件</label>
	<div class="checkable-wrapper-v">
	<div class="checkable-item">
	<input type="radio" name="identification" id="v-healthid" value="healthid">
	<label for="v-healthid">健保卡</label>
	</div>
	<div class="checkable-item">
	<input type="radio" name="identification" id="v-moica" value="moica">
	<label for="v-moica">自然人憑證</label>
	</div>
	<div class="checkable-item">
	<input type="radio" name="identification" id="v-phone" value="phone">
	<label for="v-phone">手機門號</label>
	</div>
	</div>
	</fieldset>
	<fieldset class="fieldset">

Possible solutions

改使用 legend 標示

<fieldset class="fieldset">
    <legend class="field-label">識別證件</legend>
    <div class="checkable-wrapper-v">
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-healthid" value="healthid">
        <label for="v-healthid">健保卡</label>
      </div>
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-moica" value="moica">
        <label for="v-moica">自然人憑證</label>
      </div>
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-phone" value="phone">
        <label for="v-phone">手機門號</label>
      </div>
    </div>
  </fieldset>

TODO

• 改為 legend 標示輸入元件群組
• 確認是否有使用到 label, label[for] 等條件的 selector
• 測試