Html多個選擇元素可訪問性

Question

在我們的Web應用程序中，我們有一個搜索表單，其中包含一個字段，用戶可以從可能選項列表中選擇一個或多個答案。 我們目前使用“select”html元素，其中“multiple”屬性設置如下例所示：

 select { width: 150px; } 

 <select multiple> <option value="A">Alice</option> <option value="B">Bob</option> <option value="F">Fred</option> <option value="K">Kevin</option> <option value="M">Mary</option> <option value="S">Susan</option> </select> 

用戶測試的反饋表明，這種解決方案讓用戶感到困惑。 通過按住Ctrl鍵（在窗口上）執行多個選擇/取消選擇，但是許多用戶不知道這一點。

當僅使用鍵盤時，該元素似乎也不容易使用 - 這顯然是一個可訪問性問題。

是否有一種“最佳實踐”，可以通過多種方式向用戶顯示輸入？

Answer 1

請改用復選框。 所有具有相同名稱的復選框都是一個組（在本例中為names ）。

 .row { display:block; } 

 <fieldset> <legend>Select the Names</legend> <div class="row"> <input type="checkbox" id="names_A" name="names[]" value="A" /> <label for="names_A">Alice</label> </div> <div class="row"> <input type="checkbox" id="names_B" name="names[]" value="B" /> <label for="names_B">Bob</label> </div> <div class="row"> <input type="checkbox" id="names_F" name="names[]" value="F" /> <label for="names_F">Fred</label> </div> <div class="row"> <input type="checkbox" id="names_K" name="names[]" value="K" /> <label for="names_K">Kevin</label> </div> <div class="row"> <input type="checkbox" id="names_M" name="names[]" value="M" /> <label for="names_M">Mary</label> </div> <div class="row"> <input type="checkbox" id="names_S" name="names[]" value="S" /> <label for="names_S">Susan</label> </div> </fieldset> 

說明：
每個具有相同名稱的復選框和以下括號（ [] ）都在同一個組中（在示例names[] ）。 如果啟用一個或多個復選框，則會提交每個所選復選框的value 。 你得到的數組包含$names = $_POST['names'];所有值$names = $_POST['names']; 。 如果您選擇Alice和Kevin則會獲得包含以下內容的數組。

Array ( [0] => A [1] => K )

獲取結果數組的代碼（在post目標站點上）：

<?php
$names = $_POST['names']);
print_r($names);

如果未選中組names的任何復選框，則$_POST['names']未定義。

Answer 2

復選框絕對是這里的首選， 但並不是你需要做的全部 。

是的，您需要將標簽與每個項目相關聯，但如果您有一個整體標簽，例如“你和誰是朋友？” 你需要將它與整個復選框組相關聯。 這是通過fieldset和legend 。

 <fieldset> <legend>Who are you friends with?</legend> <input type="checkbox" id="alice"><label for="alice">Alice</label><br/> <input type="checkbox" id="bob"><label for="bob">Bob</label> </fieldset> 

Answer 3

這可能是偏離主題的，但如果您已經在使用jQuery那么您可以使用它的select2插件，並且它向用戶提供了明確的反饋，當前選擇了哪些選項。

如果您正在使用prototype.js那么這個選擇的插件與上面提到的“select2”非常相似，實際上select2是從選擇中分叉的，您也可以使用jQuery選擇。

優點： -

• 在選擇的選項上向用戶提供良好的反饋。
• 對於很長的選項列表，提供搜索/自動完成功能。

缺點： -

• 如果還沒有使用jQuery那么需要/開銷包括一個庫然后它的插件。
• 可能無法與任何其他庫工作/創建沖突。