跳到主要內容
:::|

12.3:H212102 把太長的選單項目群組起來

說明:視覺障礙者是藉由語音瀏覽器瀏覽網頁資訊,網頁開發者必須將過長的選單項目,以自然且適當的方式群組起來,以幫助視覺障礙者了解選單項目所欲顯示的內容。

範例:未在SELECT標籤中設定OPTGROUP屬性分類群組,使用者無法迅速找到所需的選單項目。

不良設計

不良設計:

<>< FORM > < LABEL > 產品 < /LABEL > < SELECT > < OPTION selected > 起司麵包 < /OPTION > < OPTION > 菠蘿麵包 < /OPTION > < OPTION > 草莓麵包 < /OPTION > < OPTION > 布丁麵包 < /OPTION > < OPTION > 奶油布丁蛋糕 < /OPTION > < OPTION > 冰淇淋蛋糕 < /OPTION > < OPTION > 水果蛋糕 < /OPTION > < /SELECT > < /FORM >

正確示範

在SELECT標籤中設定OPTGROUP屬性將選單項目適當地分類群組起來,有助於使用者迅速了解選單項目。

 

正確範例:

< FORM > < LABEL > for="pro"產品 < /LABEL > < SELECT id="pro" > < OPTGROUP label="麵包" > < OPTION selected > 起司麵包 < /OPTION > < OPTION > 菠蘿麵包 < /OPTION > < OPTION > 草莓麵包 < /OPTION > < OPTION > 布丁麵包 < /OPTION > < /OPTGROUP > < OPTGROUP label="蛋糕" > < OPTION > 奶油布丁蛋糕 < /OPTION > < OPTION > 冰淇淋蛋糕 < /OPTION > < OPTION > 水果蛋糕 < /OPTION > < /OPTGROUP > < /SELECT > < /FORM >

上一頁| 回首頁