一、開篇叨叨

一般稍微有些經驗的頁面制作人員都知道label標簽可以優雅地擴大表單控件元素的點擊區域，例如，單純的單選框點擊區域就鼻屎那么大的地方，經常會點不到位置。因此，label標簽的使用對于提高頁面的可用性可訪問性是很有幫助的。

我們看看點評網的注冊頁面那個同意條款的復選框，非要點在復選框上才能選中：

查看HTML發現復選框id和label標簽的for屬性值都是空，不解~~

像其他網站的登錄或是注冊處的控件的點擊區域就做得蠻不錯的，像是豆瓣網， 新浪微博等：

我們一般有兩種方法來優雅地擴展表單控件的點擊區域。其一是使用label標簽包裹控件元素，另外的方法就是使用label標簽的for屬性與控件元素的id相關聯。

在HTML5草案中有如果段文字：

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

中文意思就是：label標簽代表了用戶界面上的一個標題，該標題可以與制定的表單控件相關聯，即所謂的label元素標記控件。可以使用for屬性，或是把表單控件放在label元素的里面實現該關聯。

這就意味著，我們可以有如下些做法：

使用for和id關聯控件

標簽

label標簽包裹控件

標簽

雙管齊下

標簽

基本上，在大部分瀏覽器下(IE6下label標簽包裹控件的方法是不頂用的)，三個方法都是可以擴大單行文本框控件的點擊區域的(點擊“標簽”二字，文本框即focus)。

二、HTML5與HTML 4.01 label的不同

其實，上面提及的幾個方法并不是HTML5中的新生事物，早在HTML4.0的時候，跟上面一模一樣的東東就出現滴說。不過其中有個不一樣的就是，在HTML4中，偶們可以給控件元素分配多個label元素。這種感覺就像是古時候支持一夫多妻制一樣。

More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

上面原文引用的中文意思是：可以使用超過1個label通過for屬性關聯同一個控件。

上面這段話在HTML5中玩起了躲貓貓，沒看到——沒有明確地說禁止使用，也沒有明文說允許使用。我們應當注意到，無論是瀏覽器還是輔助技術

都對多label元素提供了強有力的支持。

如果您看到下面的文字，可能是由于在其他網站或是RSS中閱讀本文，本文原地址：http://www.zhangxinxu.com/wordpress/?p=1809，本文作者：張鑫旭，來自張鑫旭-鑫空間-鑫生活，訪問原出處更多精彩內容。

三、當下控件標簽化在瀏覽器和輔助技術下的可用性可訪問性支持

根據Steve Faulkner(高級web可用性可訪問性顧問)的測試，使用for和id找到控件元素的方法要比將控件放在label標簽內的健壯性好很多。同時他還發現使用label標簽下的方法強。

例如，在主流瀏覽器其上的測試結果：

上圖中框框的結果就顯示了上面的些結論：for和id可用性可訪問性好于label標簽包裹，非標準可用性可訪問性。

其余的結果與數據您有興趣可以仔細看看比對。

對于我們前端而言，沒有必要了解很深入，這里就不一一分析各個結果。不過，一些建議或是看法還是很值得分享下的。

給開發者的建議

在瀏覽器修復他們的些可用性可訪問性問題之前，如果你希望你的控件可以被輔助技術理解，建議使用for + id方法，而不要因為懶得蛋疼乳酸，直接把控件元素套在label標簽之下。也不要使用看上去更保險的“雙管齊下”的方法。

給瀏覽器和輔助技術開發商建議

Chrome: 實現對for/id以及label 元素包裹的可用性可訪問性支持。

Safari:實現label元素包裹的可用性可訪問性支持。

Firefox:修復當for/id合包裹體被使用時候多標簽內容的問題。

NVDA:修復控件元素在label之內重復朗讀的的問題

四、結尾部分

可用性可訪問性問題，怎么講呢？很多時候，很多前端er們，做出個結構良好，功能完善的頁面就已經算是不錯了，再要求其考慮可能性的問題，就有點趕鴨子上架的感覺。

說句招口水的話，可訪問性問題就像是有錢人手中的LV寶寶，我們對大多數的前端er們，對大多數的中小網站們，沒有必要花過多的精力在這個上面，畢竟人力財力有限。但是，不管你們信不信，有一點我是很相信的，知道了解web中各個可用性問題無論是對自己的成長，還是今后的工作還是很有幫助的。

(本篇完)

總結

以上是生活随笔為你收集整理的html label标签 ie6,说说HTML5中label标签的可访问性问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。