下拉式方塊可以把同一個主題的選擇項目收合在一起,需要選擇時再讓使用者展開它,這也是一種與使用者互動的常見屬性。
當選擇項目較多時,使用下拉式方塊的設計可以讓出更多畫面空間,讓畫面看起來較簡潔。
下拉式方塊在預設情況下是收合的,需要選擇時可以將其展開,移動焦點並確認選取。
對於 NVDA 導讀軟體而言,下拉式方塊是一個有多種操作方式的屬性。我們從瀏覽、操作、選取等三個層面分析如下。
建議將 NVDA 功能表 -> 偏好 -> 設定 -> 瀏覽模式,設定為非自動啟動焦點模式,設定項目如下:
雖然自動切換成焦點模式可以方便直接在下拉式方塊選擇項目,這樣的預設值也許比較適合新手,但也帶來了一些副作用。
例如在瀏覽網頁時使用 tab 鍵或方向鍵會容易造成不小心改變某些元件的選項或卡在某個元件當中的情況,同時,在焦點模式下亦無法使用單鍵瀏覽功能。
因此會建議還是手動切換模式會比較理想,至少自己能完全掌握導讀軟體的模式,而不是讓它自動變來變去造成困擾或誤判。
<select id="fruit" name="fruit">
<option value=""></option>
<option value="bala"></option>
<option value="banana"></option>
<option value="berry"></option>
</select>
<select id="fruit" name="fruit">
<option value="">請選擇</option>
<option value="">芭樂</option>
<option>香蕉</option>
<option>草莓</option>
</select>
選項提示文字才是重點
<select id="fruit" name="fruit">
<option value="">請選擇</option>
<option value="bala">芭樂</option>
<option value="banana">香蕉</option>
<option value="berry">草莓</option>
</select>
用任何方式都可以,但就是不能在 tab 移過去時沒有朗讀標題提示文字
<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>
如同編輯區,若改成使用 label 包住整個下拉式方塊也可以有相同效果
<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>
有時使用多個 label 在畫面上會不好排版,重點在於只要有提示文字效果就可以接受
<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>
使用這種方式加入提示文字,當選擇完項目後提示文字就會消失,因此不符合無障礙規範
<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>
使用表單元素來進行脈絡變更的注意事項:
<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>
使用表單元素來進行脈絡變更的注意事項:
<label for="page">跳至第</label>
<select id="page" name="page">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span>頁</span>
使用表單元素來進行脈絡變更的注意事項:
<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>
使用表單元素來進行脈絡變更的注意事項: