無障礙網頁檢測培訓課程

第五章 下拉式方塊

下拉式方塊

說明

下拉式方塊可以把同一個主題的選擇項目收合在一起,需要選擇時再讓使用者展開它,這也是一種與使用者互動的常見屬性。

當選擇項目較多時,使用下拉式方塊的設計可以讓出更多畫面空間,讓畫面看起來較簡潔。

下拉式方塊在預設情況下是收合的,需要選擇時可以將其展開,移動焦點並確認選取。

對於 NVDA 導讀軟體而言,下拉式方塊是一個有多種操作方式的屬性。我們從瀏覽、操作、選取等三個層面分析如下。

操作

瀏覽
  1. 使用方向鍵或 tab 鍵可以讓焦點在下拉式方塊上駐點。
  2. 利用 NVDA 的單鍵瀏覽:下拉式方塊是 c 可直接跳至下拉式方塊上。
操作
  1. 方法一:使用 alt + 下方向鍵展開下拉式方塊的項目,此時會自動進入焦點模式 (標準作法)
  2. 方法二:按下 enter 或空白鍵此時會自動進入焦點模式,但下拉式方塊的項目不會被展開
  3. 方法三:使用 NVDA + 空白鍵切換成焦點模式,下拉式方塊的項目也不會被展開
  4. 方法四:使用物件瀏覽的 NVDA + 九宮格 enter 點擊此下拉方塊,項目也不會被展開 (當前述三種操作方式都沒辦法操作時才會使用)
選取
  1. 無論使用何種方式操作,皆使用上或下方向鍵進行項目選擇
  2. 按 enter 確定選取,或者直接按 tab 鍵離開下拉式方塊,移到下一個元件,但建議使用 enter 較為標準
注意
  1. 網頁裡的下拉式方塊無法放棄選擇,一旦開始選取後,就算按 esc 鍵收合下拉式方塊,也無法回到之前選取的項目,結果相當於按 enter 選取。
  2. 當我們按 enter 鍵確定選取後,NVDA 並不會被自動切換回瀏覽模式。
  3. 若不把下拉式方塊的選單展開,就直接移動上或下方向鍵進行選擇,每按一次方向鍵就相當於按 enter 直接選定該項目。 因此,當此下拉式方塊使用動態屬性觸發時,在我們按方向鍵時就會自動觸發功能,因此會建議使用展開下拉式方塊的項目方式進行操作。 但就算是使用展開的方式進行選取,只要一離開該下拉方塊後一樣會執行自動觸發的功能。

模式

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

設定

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

雖然自動切換成焦點模式可以方便直接在下拉式方塊選擇項目,這樣的預設值也許比較適合新手,但也帶來了一些副作用。

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

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

態樣

  1. 不論導讀軟體處於何種模式,只要使用 tab 鍵移入下拉式方塊時,皆能讓導讀軟體朗讀標題提示文字。
  2. 若有特殊操作時,需要讓導讀軟體朗讀相關提示文字。
  3. 導讀軟體可朗讀「下拉式方塊」屬性,點顯器能摸讀到「cbo」縮寫。
  4. 使用方法一的標準操作,能順利完成操作且過程中不會觸發任何事件。
  5. 在未選定前自動觸發事件進行脈絡變更時,不能讓焦點失焦。

原碼範例

編號 1 原始(只有 value)
原碼
<select id="fruit" name="fruit">
    <option value=""></option> 
    <option value="bala"></option> 
    <option value="banana"></option> 
    <option value="berry"></option> 
</select>
範例 1 原始(只有 value)
補充
  1. 不能沒有選項提示文字
  2. value 的值一樣是給程式抓取的
編號 2 原始(沒有 value 但有選項文字)
原碼
<select id="fruit" name="fruit">
    <option value="">請選擇</option> 
    <option value="">芭樂</option> 
    <option>香蕉</option> 
    <option>草莓</option> 
</select>
範例 2 原始(沒有 value 但有選項文字)
補充

選項提示文字才是重點

編號 3 原始(沒有 label 提示文字)
原碼
<select id="fruit" name="fruit">
    <option value="">請選擇</option> 
    <option value="bala">芭樂</option> 
    <option value="banana">香蕉</option> 
    <option value="berry">草莓</option> 
</select>
範例 3 原始(沒有 label 提示文字)
補充

用任何方式都可以,但就是不能在 tab 移過去時沒有朗讀標題提示文字

編號 4 加上標題提示文字,完整範例
原碼
<label for="fruit">你喜歡的水果</label>
<select id="fruit" name="fruit">
    <option value="">請選擇</option> 
    <option value="bala">芭樂</option> 
    <option value="banana">香蕉</option> 
    <option value="berry">草莓</option> 
</select>
範例 4 加上標題提示文字,完整範例)
補充

如同編輯區,若改成使用 label 包住整個下拉式方塊也可以有相同效果

編號 5 使用 label 標籤與 title 屬性來放置提示文字
原碼
<label for="shi">住家地址</label>
<select id="shi" name="shi">
    <option value="">請選擇</option> 
    <option value="taipei">台北</option> 
    <option value="tainan">台南</option> 
</select>
<select id="area" name="area" title="選擇區域">
    <option value="">請選擇</option> 
    <option value="east">東區</option> 
    <option value="west">西區</option> 
</select>
範例 5 使用 label 標籤與 title 屬性來放置提示文字
補充

有時使用多個 label 在畫面上會不好排版,重點在於只要有提示文字效果就可以接受

編號 6 將提示文字放在選擇項中
原碼
<label for="shi">住家地址</label>
<select id="shi" name="shi">
    <option value="">請選擇縣市</option> 
    <option value="taipei">台北</option> 
    <option value="tainan">台南</option> 
</select>
<select id="area" name="area">
    <option value="">請選擇區域</option> 
    <option value="east">東區</option> 
    <option value="west">西區</option> 
</select>
範例 6 將提示文字放在選擇項中
補充

使用這種方式加入提示文字,當選擇完項目後提示文字就會消失,因此不符合無障礙規範

編號 7 使用按鈕來進行脈絡變更
原碼
<label for="url">選擇最愛的網站</label>
<select id="url" name="url">
    <option value="">請選擇</option> 
    <option value="google">google</option> 
    <option value="accessibility">無障礙空間服務網</option> 
    <option value="nvda">NVDA台灣平臺</option> 
</select>
<button id="btn">送出</button>
範例 7 使用按鈕來進行脈絡變更
補充

使用表單元素來進行脈絡變更的注意事項:

  1. 進行脈絡變更最穩妥之設計方式為使用按鈕,需要使用者自行按確定後才進行脈絡變更
  2. 脈絡變更需要使用者可預期,若無法預期則需要事先以相關提示文字告知
  3. 正在進行移動選項選擇時,若進行脈絡變更則不能讓焦點失焦
編號 8 有提示將會進行脈絡變更
原碼
<label for="url">選擇最愛的網站</label>
<select title="選取後將跳轉至該頁面" id="url" name="url">
    <option value="">請選擇</option> 
    <option value="google">google</option> 
    <option value="accessibility">無障礙空間服務網</option> 
    <option value="nvda">NVDA台灣平臺</option> 
</select>
範例 8 有提示將會進行脈絡變更
補充

使用表單元素來進行脈絡變更的注意事項:

  1. 進行脈絡變更最穩妥之設計方式為使用按鈕,需要使用者自行按確定後才進行脈絡變更
  2. 脈絡變更需要使用者可預期,若無法預期則需要事先以相關提示文字告知
  3. 正在進行移動選項選擇時,若進行脈絡變更則不能讓焦點失焦
編號 9 可預期會進行脈絡變更
原碼
<label for="page">跳至第</label>
<select id="page" name="page">
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select>
<span>頁</span>
範例 9 可預期會進行脈絡變更
補充

使用表單元素來進行脈絡變更的注意事項:

  1. 進行脈絡變更最穩妥之設計方式為使用按鈕,需要使用者自行按確定後才進行脈絡變更
  2. 脈絡變更需要使用者可預期,若無法預期則需要事先以相關提示文字告知
  3. 正在進行移動選項選擇時,若進行脈絡變更則不能讓焦點失焦
編號 10 還在選擇時就進行脈絡變更(不符合規範)
原碼
<label for="url">選擇最愛的網站</label>
<select id="url" name="url">
    <option value="">請選擇</option> 
    <option value="google">google</option> 
    <option value="accessibility">無障礙空間服務網</option> 
    <option value="nvda">NVDA台灣平臺</option> 
</select>
範例 10 還在選擇時就進行脈絡變更(不符合規範)
補充

使用表單元素來進行脈絡變更的注意事項:

  1. 進行脈絡變更最穩妥之設計方式為使用按鈕,需要使用者自行按確定後才進行脈絡變更
  2. 脈絡變更需要使用者可預期,若無法預期則需要事先以相關提示文字告知
  3. 正在進行移動選項選擇時,若進行脈絡變更則不能讓焦點失焦

規範

  1. HM1130112E 使用標籤組件將文字標籤與表單控制元件建立關連
  2. HM1130113E 無法使用標籤組件的情況下,用標題屬性來指明表單控制元件
  3. GN1140102E 對有顏色的表單控制標題,提供文字線索提示
  4. GN1330201E 提供文字描述以指明需填寫的必填欄位
  5. GN1330100E 提供文字描述以指明未完成的必填欄位
  6. GN1330102E 資料成功送出後,提供成功的回饋
  7. GN1330200E 在使用者送出資料前,先描述會發生什麼事
  8. GN2330300E 提供文字描述以指明未完成的必填欄位,並建立可以讓使用者跳到出錯之處的機制
  9. GN1320201E 使用按鈕來做出行動並啟動脈絡變更

實測

  1. 雲林縣戶政 分類項目欄位可正常操作並使用按鈕進行脈絡變更
  2. 高鐵訂票 單程與出發站等欄位的提示文字
  3. 檔案下載分享首頁 請選擇欲下載的檔案種類欄位會自動導頁
  4. 行政院環境保護署 選擇地址的連動下拉式方塊
  5. 下拉選單外掛 縣市與鄉鎮市區沒有提示文字
  6. 桃園區衛生所 每頁顯示第幾頁與幾筆資料的下拉會自動導頁