無障礙網頁檢測培訓課程

第六章 選擇鈕與核取方塊

選擇鈕

說明

選擇鈕在舊版的 NVDA 是翻譯成單選鈕。它也是提供一種讓使用者做出選擇的介面，和下拉式方塊有些不同。

下拉式方塊在一開始時是把所有選項收合成一個選單；選擇鈕則是列出所有選項讓使用者勾選，並且只能勾選一個，也就是和下拉式方塊一樣都是單選狀態。

因為一次列出了所有可選項目，所以可以分組的話，對使用導讀軟體的使用者來說會更清楚可以選定的範圍。

尤其是連續兩組以上的不同選擇鈕出現時，在沒有設計好分組的情況下，僅使用 tab 來移動選擇項時可能會選錯，或者不容易確認哪些項目屬於哪一個群組。

對於 NVDA 導讀軟體而言，選擇鈕在瀏覽或焦點模式下，操作方式有所不同，從瀏覽與選取兩個角度分析操作如下。

操作

瀏覽

1. 瀏覽模式：在 firefox 使用 tab 鍵可以讓焦點在選擇鈕的每個選擇項上面駐點，若同一組選擇鈕已經有一個項目被勾選，則 tab 鍵只會停在被勾選的項目上
2. 瀏覽模式：在 chrome 使用 tab 鍵，無論選擇項是否有被勾選，焦點只會在同組第一個選擇項駐點
3. 瀏覽模式：使用方向鍵皆能到達每個選擇項
4. 利用 NVDA 的單鍵瀏覽：選擇鈕是 r 可直接跳至選擇項上。

選取

1. 瀏覽模式：使用空白鍵進行勾選
   • 若有脈絡變更，按下空白鍵勾選後才會觸發相關事件
2. 焦點模式：使用方向鍵選到的就是直接被勾選的項目
   • 若有脈絡變更，在我們按方向鍵選擇時就會自動觸發相關事件

注意

1. 已經被勾選的選擇項無法直接取消勾選，除非選擇其他項目
2. 無論選擇鈕預設是否有勾選，都與障礙無關

模式

1. NVDA + 空白鍵：瀏覽模式與焦點模式輪流切換。
2. enter：切換為焦點模式。
3. esc：切換為瀏覽模式。

設定

建議將 NVDA 功能表 -> 偏好 -> 設定 -> 瀏覽模式，設定為非自動啟動焦點模式，設定項目如下：

• 勾選：頁面載入時啟用瀏覽模式
• 不勾選：焦點改變時自動切換焦點模式
• 不勾選：游標移動時自動切換焦點模式

雖然自動切換成焦點模式可以方便按 tab 鍵到達選擇鈕時，可以直接使用方向鍵在項目進行勾選，這樣的預設值也許比較適合新手，但也帶來了一些副作用。

例如在瀏覽網頁時使用 tab 鍵與方向鍵會容易造成不小心改變某些元件的選項或卡在某個元件當中的情況，同時，在焦點模式下亦無法使用單鍵瀏覽功能。

因此會建議還是手動切換模式會比較理想，至少自己能完全掌握導讀軟體的模式，而不是讓它自動變來變去造成困擾或誤判。

態樣

1. 不論導讀軟體處於何種模式，只要使用 tab 鍵移入選擇鈕時，皆能讓導讀軟體朗讀標題提示文字與選擇項文字。
2. 若有特殊操作時，需要讓導讀軟體朗讀相關補充提示文字。
3. 導讀軟體可朗讀「選擇鈕」屬性，點顯器能摸讀到「rbtn」縮寫。
4. 在瀏覽模式下尚未按空白鍵進行選擇項的勾選時，不能產生脈絡變更。

原碼範例

編號 1 先放項目說明再放勾選框框

原碼

<label for="bala">芭樂</label> 
<input type="radio" id="bala" name="fruit" value="1234"> 
<label for="xiangjiao">香蕉</label> 
<input type="radio" id="xiangjiao" name="fruit" value="5678">

範例 1 先放項目說明再放勾選框框

補充

1. 不能沒有標題提示文字
2. value 的值一樣是給程式抓取的

編號 2 先放勾選框框再放項目說明

原碼

<input type="radio" id="bala" name="fruit" value="1234"> 
<label for="bala">芭樂</label> 
<input type="radio" id="xiangjiao" name="fruit" value="5678">
<label for="xiangjiao">香蕉</label> 

範例 2 先放勾選框框再放項目說明

補充

1. 不能沒有標題提示文字
2. value 的值一樣是給程式抓取的
3. 注意不同模式間的朗讀順序

編號 3 label包住版的選擇鈕

原碼

<label><input type="radio" name="fruit" value="1234">芭樂</label> 
<label>香蕉<input type="radio" name="fruit" value="5678"></label> 

範例 3 label包住版的選擇鈕

補充

1. 不能沒有標題提示文字
2. value 的值一樣是給程式抓取的
3. 注意不同模式間的朗讀順序

編號 4 有 label 標籤但還是沒有標題提示文字的選擇鈕

原碼

<label>你喜歡什麼水果</label>
<label><input type="radio" name="fruit" value="1234">芭樂</label> 
<label><input type="radio" name="fruit" value="5678">香蕉</label> 

範例 4 有 label 標籤但還是沒有標題提示文字的選擇鈕

補充

1. 不能沒有標題提示文字
2. value 的值一樣是給程式抓取的
3. 注意不同模式間的朗讀順序

編號 5 使用 label for input id 可以朗讀標題提示文字的選擇鈕

原碼

<label for="first">你喜歡什麼水果</label>
<label><input id="first" type="radio" name="fruit" value="1234">芭樂</label> 
<label><input type="radio" name="fruit" value="5678">香蕉</label> 

範例 5 使用 label for input id 可以朗讀標題提示文字的選擇鈕

補充

雖然符合規範，但實務上這種做法比較少，效果也不是很全面

編號 6 使用 label 包住，並不會朗讀標題提示文字

原碼

<label>你喜歡什麼水果
    <label><input type="radio" name="fruit" value="1234">芭樂</label>
    <label><input type="radio" name="fruit" value="5678">香蕉</label>
</label>

範例 6 使用 label 包住，並不會朗讀標題提示文字

補充

與編輯區不同的地方在於，使用 label 包住的選擇鈕是選擇項，另外還有一個標題要想辦法跟選擇鈕進行關聯才會朗讀

編號 7 良好提示文字設計的選擇鈕(使用無障礙屬性分群)

原碼

<div aria-labelledby="fruitLabel" role="group">
    <label id="fruitLabel">你喜歡什麼水果</label>
    <label><input type="radio" name="fruit" value="1234">芭樂</label>
    <label><input type="radio" name="fruit" value="5678">香蕉</label>
</div>

範例 7 良好提示文字設計的選擇鈕(使用無障礙屬性分群)

補充

1. 在焦點模式使用方向鍵選擇時不會有標題提示文字干擾
2. 無論什麼模式或勾選了哪一個項目，進入該組選擇鈕的選擇項時都會朗讀標題提示文字，並且有群組提示文字，(反向進入也可以)
3. 在瀏覽模式使用下方向鍵離開群組時會朗讀相關提示文字
4. 美中不足的地方是使用 tab 鍵離開群組時無法朗讀相關提示文字，有待導讀軟體實做

編號 8 良好提示文字設計的選擇鈕(使用 fieldset 分群)

原碼

<fieldset>
    <legend>你喜歡什麼水果</legend>
    <label><input type="radio" name="fruit" value="1234">芭樂</label>
    <label><input type="radio" name="fruit" value="5678">香蕉</label>
</fieldset>

範例 8 良好提示文字設計的選擇鈕(使用 fieldset 分群)

補充

1. 在焦點模式使用方向鍵選擇時不會有標題提示文字干擾
2. 無論什麼模式或勾選了哪一個項目，進入該組選擇鈕的選擇項時都會朗讀標題提示文字，並且有群組提示文字，(反向進入也可以)
3. 在瀏覽模式使用下方向鍵離開群組時會朗讀相關提示文字
4. 美中不足的地方是使用 tab 鍵離開群組時無法朗讀相關提示文字，有待導讀軟體實做

編號 9 使用 title 屬性來補充提示文字

原碼

<label><input title="你喜歡什麼水果" type="radio" name="fruit" value="1234">芭樂</label>
<label><input title="你喜歡什麼水果" type="radio" name="fruit" value="5678">香蕉</label>

範例 9 使用 title 屬性來補充提示文字

補充

1. firefox 使用 tab 鍵會朗讀 title 屬性兩次
2. chrome 只會朗讀一次 title 屬性，而且朗讀順序是會先朗讀選項再朗讀 title 屬性

編號 10 可以朗讀標題提示文字，但換成選擇項文字無法朗讀

原碼

<div aria-labelledby="fruitLabel" role="group">
    <label id="fruitLabel">你喜歡什麼水果</label>
    <span><input type="radio" name="fruit" value="1234">芭樂</span>
    <span><input type="radio" name="fruit" value="5678">香蕉</span>
</div>

範例 10 可以朗讀標題提示文字，但換成選擇項文字無法朗讀

補充

1. 用非 label 標籤來包住 input 就沒辦法正常朗讀選擇項文字
2. 不使用標籤包住 input 的方式也無法朗讀選擇項文字，因為沒有建立關聯

編號 11 可以朗讀標題提示文字，選擇項文字使用 title 來補充

原碼

<div aria-labelledby="fruitLabel" role="group">
    <label id="fruitLabel">你喜歡什麼水果</label>
    <input type="radio" name="fruit" value="1234" title="芭樂">芭樂
    <input type="radio" name="fruit" value="5678" title="香蕉">香蕉
</div>

範例 11 可以朗讀標題提示文字，，選擇項文字使用 title 來補充

補充

1. 可以朗讀標題提示文字，亦可朗讀選擇項文字，符合規範。
2. 需要特別注意的是，當 input 標籤沒有使用 label 關聯時，直接使用方向鍵就能朗讀 title 屬性的文字，所以在瀏覽模式下會朗讀兩次相同文字

規範

1. HM1130111E 將表單控制元件及表單內的選項予以適當地分群並提供相關的描述
   • 表單未使用fieldset或相類方式來群組元素
2. HM1130112E 使用標籤組件將文字標籤與表單控制元件建立關聯
   • 表單欄位沒有 label for 建立關聯
3. HM1130113E 無法使用標籤組件的情況下，用標題屬性來指明表單控制元件
   • 沒有 label for 建立關聯，亦不使用 title 屬性補充文字
4. GN1140102E 對有顏色的表單控制標題，提供文字線索提示
5. GN1330201E 提供文字描述以指明需填寫的必填欄位
   • 沒有直接使用文字標明必填欄位
   • 只使用符號標明必填欄位
   • 若所有表單項目皆為必填，可不標明必填欄位，若其中有些項目為非必填，則需要標明必填欄位
6. GN1330100E 提供文字描述以指明未完成的必填欄位
   • 必填欄位未選擇時，沒有文字提示(送出表單後)
7. GN1330102E 資料成功送出後，提供成功的回饋
   • 送出表單後，沒有結果提示
8. GN1330200E 在使用者送出資料前，先描述會發生什麼事
   • 表單用途不明確
9. GN2330300E 提供文字描述以指明未完成的必填欄位，並建立可以讓使用者跳到出錯之處的機制
   • 未勾選必填選擇鈕，沒有將鍵盤焦點拉至錯誤欄位(送出表單後)
10. GN1320201E 使用按鈕來做出行動並啟動脈絡變更
    • 使用按鈕進行脈絡變更為最穩妥方式，若沒有則需要確認脈絡變更的時機

實測

1. 高鐵訂票 搜尋方式未朗讀標題提示文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，標題提示文字未與元件關聯
2. 臺鐵訂票 身分證字號選擇鈕沒有標題提示文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，沒有標題提示文字
3. 台北市視障者家長協會 捐款方式與捐款收據的選擇鈕
   • 從網頁最上方按 r 跳至該欄位
   • 捐款方式通過，有分組，也有朗讀標題提示文字與選擇項文字
   • 捐款收據不通過：沒有朗讀標題提示文字
4. 幸福基金會 先生小姐選擇鈕的樣式有問題
   • 從網頁最上方按 e 到姓名編輯區
   • 方向鍵往下即可移到相關欄位
   • 不通過，無法朗讀選擇鈕屬性，沒有標題提示文字，雖可操作但無法得知勾選狀態
5. 台北市立圖書館 全部、圖書選擇鈕沒有標題提示文字且使用 tab 鍵或焦點模式方向鍵操作時無法朗讀選擇項文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，沒有標題提示文字且操作時無法朗讀選擇項文字
6. 中華鯨豚協會 【捐款期數】 選擇鈕無法朗讀標題提示文字且使用 tab 鍵或焦點模式方向鍵操作時無法朗讀選擇項文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，無法朗讀標題提示文字且操作時無法朗讀選擇項文字
7. 幸福基金會 選擇付款方式與是否需要收據選擇鈕皆無法朗讀標題提示文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，無法朗讀標題提示文字
8. 素易食 性別選擇鈕無法朗讀標題提示文字且使用 tab 鍵或焦點模式方向鍵操作時無法朗讀選擇項文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，無法朗讀標題提示文字且操作時無法朗讀選擇項文字
9. 素易食 葷素類型選擇鈕無法朗讀標題提示文字
   • 從網頁最上方按 r 跳至該欄位
   • 不通過，無法朗讀標題提示文字

核取方塊

說明

核取方塊也是用來讓使用者做出選擇的一種元素。

第一種比較單純，基本上每個項目都是獨立的，不像選擇鈕是有分群的。

同一個核取方塊勾選時就是肯定的回答，不勾選時就是否定的回答。

第二種設計方式就是也可能跟選擇鈕一樣需要分組，例如列出5種水果，讓你可以一次選擇多個，此時的無障礙設計與選擇鈕就很類似了。

操作

1. 使用方向鍵或 tab 鍵可以讓焦點在核取方塊上面駐點，無論是否勾選，都要能夠順利走訪每個項目。
2. 利用 NVDA 的單鍵瀏覽：核取方塊是 x 可直接跳至核取方塊上。

態樣

1. 不論導讀軟體處於何種模式，只要使用 tab 鍵移入核取方塊時，皆能讓導讀軟體朗讀標題提示文字與選擇項文字。
2. 若有特殊操作時，需要讓導讀軟體朗讀相關補充提示文字。
3. 導讀軟體可朗讀「核取方塊」屬性，點顯器能摸讀到「chk」縮寫。
4. 無論使用瀏覽或焦點模式，皆能使用空白鍵進行勾選與取消勾選
5. 在尚未按空白鍵進行勾選時，不能產生脈絡變更。
6. 分組多選一的核取方塊態樣與選擇鈕相同。

注意

1. 無論核取方塊預設是否有勾選，都與障礙無關

原碼範例

編號 12 先放勾選框框再放說明

原碼

<input type="checkbox" id="bala" name="fruit" value="bala">
<label for="bala">芭樂</label> 

範例 12 先放勾選框框再放說明

補充

除非選項本身的文字夠清楚，否則不能沒有標題提示文字

編號 13 先放說明再放勾選框框

原碼

<label for="bala">芭樂</label> 
<input type="checkbox" id="bala" name="fruit" value="bala">

範例 13 先放說明再放勾選框框

補充

除非選項本身的文字夠清楚，否則不能沒有標題提示文字

編號 14 用 label 包住元素

原碼

<label>芭樂<input type="checkbox" id="bala" name="fruit" value="bala"></label> 

範例 14 用 label 包住元素

補充

除非選項本身的文字夠清楚，否則不能沒有標題提示文字

編號 15 選項本身的說明已經很完整

原碼

<label><input type="checkbox" name="fruit" value="bala">是否要訂閱電子報</label> 

範例 15 選項本身的說明已經很完整

補充

當選擇項本身的說明已經很完整時，可以不需要額外的標題提示文字

編號 16 良好提示文字設計的分組核取方塊(使用無障礙屬性分群)

原碼

<div aria-labelledby="fruitLabel" role="group">
    <label id="fruitLabel">你喜歡哪些水果</label>
    <label><input type="checkbox" name="fruit[]" value="1234">芭樂</label>
    <label><input type="checkbox" name="fruit[]" value="5678">香蕉</label>
    <label><input type="checkbox" name="fruit[]" value="1122">柳丁</label>
</div>

範例 16 良好提示文字設計的分組核取方塊(使用無障礙屬性分群)

補充

1. 需要注意一下，核取方塊的每個元素是獨立的，所以就算是同一群組也無法像選擇鈕那樣，在焦點模式下直接使用方向鍵來做選擇
2. 無論什麼模式或勾選了哪一個項目，進入該組核取方塊的選擇項時都要朗讀標題提示文字
3. 以此類推，需要標題提示文字或選擇項文字時若沒有朗讀，就是不符合規範

編號 17 良好提示文字設計的分組核取方塊(使用 fieldset 分群)

原碼

<fieldset>
    <legend>你喜歡哪些水果</legend>
    <label><input type="checkbox" name="fruit[]" value="1234">芭樂</label>
    <label><input type="checkbox" name="fruit[]" value="5678">香蕉</label>
    <label><input type="checkbox" name="fruit[]" value="1122">柳丁</label>
</fieldset>

範例 17 良好提示文字設計的分組核取方塊(使用 fieldset 分群)

補充

1. 需要注意一下，核取方塊的每個元素是獨立的，所以就算是同一群組也無法像選擇鈕那樣，在焦點模式下直接使用方向鍵來做選擇
2. 無論什麼模式或勾選了哪一個項目，進入該組核取方塊的選擇項時都要朗讀標題提示文字
3. 以此類推，需要標題提示文字或選擇項文字時若沒有朗讀，就是不符合規範

規範

1. HM1130111E 將表單控制元件及表單內的選項予以適當地分群並提供相關的描述
   • 表單未使用fieldset或相類方式來群組元素
2. HM1130112E 使用標籤組件將文字標籤與表單控制元件建立關聯
   • 表單欄位沒有 label for 建立關聯
3. HM1130113E 無法使用標籤組件的情況下，用標題屬性來指明表單控制元件
   • 沒有 label for 建立關聯，亦不使用 title 屬性補充文字
4. GN1140102E 對有顏色的表單控制標題，提供文字線索提示
5. GN1330201E 提供文字描述以指明需填寫的必填欄位
   • 沒有直接使用文字標明必填欄位
   • 只使用符號標明必填欄位
   • 若所有表單項目皆為必填，可不標明必填欄位，若其中有些項目為非必填，則需要標明必填欄位
6. GN1330100E 提供文字描述以指明未完成的必填欄位
   • 必填欄位未選擇時，沒有文字提示(送出表單後)
7. GN1330102E 資料成功送出後，提供成功的回饋
   • 送出表單後，沒有結果提示
8. GN1330200E 在使用者送出資料前，先描述會發生什麼事
   • 表單用途不明確
9. GN2330300E 提供文字描述以指明未完成的必填欄位，並建立可以讓使用者跳到出錯之處的機制
   • 未選擇必填核取方塊，沒有將鍵盤焦點拉至錯誤欄位(送出表單後)
10. GN1320201E 使用按鈕來做出行動並啟動脈絡變更
    • 使用按鈕進行脈絡變更為最穩妥方式，若沒有則需要確認脈絡變更的時機

實測

1. 金融監督管理委員會 同意個資核取方塊無法朗讀選擇項文字
   • 點擊中央區塊「寫信給我們」連結
   • 點擊中央區塊「我要寫信」連結
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀選擇項文字
2. 高鐵訂票 僅顯示尚有早鳥優惠之車次
   • 從網頁最上方按 x 跳至該欄位
   • 假設該欄位不是無法使用的狀態(將 disabled 屬性刪除)
   • 通過，本身的說明文字已經夠明確
3. 臺鐵訂票 輪椅座訂票注意事項
   • 從網頁最上方按 x 跳至該欄位
   • 通過，本身的說明文字已經夠明確，且按下空白鍵勾選後才會觸發相關說明
4. 中華鯨豚協會 捐款核取方塊沒有朗讀標題提示文字，亦無法朗讀選擇項文字
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀標題提示文字，亦無法朗讀選擇項文字
5. 幸福基金會 收據抬頭無法朗讀標題提示文字
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀標題提示文字
6. 素易食 訂閱電子報無法朗讀標題提示文字，亦無法朗讀選擇項文字(多選多)
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀標題提示文字，亦無法朗讀選擇項文字
7. 素易食 移動地圖後，即時更新蒐尋資料 無法朗讀選擇項文字
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀選擇項文字
8. 《數位時代》《經理人》課程學院電子報 訂閱學院無法朗讀標題提示文字
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀標題提示文字
9. 財團法人均一平台教育基金會 請勾選你擅長的科目 無法朗讀標題提示文字
   • 從網頁最上方按 x 跳至該欄位
   • 不通過，無法朗讀標題提示文字
10. HiSKIO 平台講師申請表單 從哪裡得知 HiSKIO 的講師申請表單/活動* 樣式有問題
    • 從網頁最上方多按幾下大鍵盤 5 即可移至相關標題
    • 方向鍵往下即可移到相關欄位
    • 不通過，無法朗讀核取方塊屬性，沒有標題提示文字，雖可操作但無法得知勾選狀態