對於WCAG AA標準，當在<select>元素附近標記<label>元素時，<label>元素是否需要可見？

Question

研究WCAG AA元素的可訪問性標準。

我使用下面的頁面作爲參考

http://achecker.ca/checker/suggestion.php?id=91

http://achecker.ca/checker/suggestion.php?id=208

http://achecker.ca/checker/suggestion.php?id=209

我們的目的是要麼包裹<label>周圍<select>或把它當作一個兄弟。

雙重問題，標籤是否必須可見？如果是的話，是否有像素推薦來補充元素？我們打算在可見時保持關閉，但我想反饋給設計團隊

Answer 1

是的，label元素需要可見。關於它的放置沒有像素推薦，但它與控件的視覺關聯至關重要（如此處的select元素）。畢竟，大概有超過99％的訪問者會使用通用圖形瀏覽器，並且許多訪問者在理解表單結構時會有認知或其他困難。

您應該使用WCAG 2.0建議和相關文檔，而不是一些可訪問性檢查程序作爲基本參考。特別是，「瞭解WCAG 2.0」文檔在H44: Using label elements to associate text labels with form controls上說：「無論標籤元素是否可見，該技術對於成功標準1.1.1,1.3.1和4.1.2都是足夠的。也就是說，它可能使用CSS隱藏。但是，對於成功標準3.3.2，標籤元素必須可見，因爲它爲需要幫助的所有用戶提供幫助，幫助他們瞭解該字段的用途。「

Criterion 3.3.2說：」標籤或說明是在內容要求用戶輸入「。顯然，如果使用基於視覺的瀏覽（即我們大多數人）無法看到它們，則不會」提供「它們。

的WCAG 2.0文檔也說是，由於在一些瀏覽器，「顯式」 label元件的問題（即，具有for屬性的label元件）優選的「隱式」（label包含它是控制元件與之相關）。這也更符合邏輯：控件不是其標籤的一部分。