一、開篇叨叨

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

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

查看HTML發(fā)現(xiàn)復(fù)選框id和label標(biāo)簽的for屬性值都是空，不解~~

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

我們一般有兩種方法來優(yōu)雅地擴展表單控件的點擊區(qū)域。其一是使用label標(biāo)簽包裹控件元素，另外的方法就是使用label標(biāo)簽的for屬性與控件元素的id相關(guān)聯(lián)。

在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標(biāo)簽代表了用戶界面上的一個標(biāo)題，該標(biāo)題可以與制定的表單控件相關(guān)聯(lián)，即所謂的label元素標(biāo)記控件。可以使用for屬性，或是把表單控件放在label元素的里面實現(xiàn)該關(guān)聯(lián)。

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

使用for和id關(guān)聯(lián)控件

標(biāo)簽

label標(biāo)簽包裹控件

標(biāo)簽

雙管齊下

標(biāo)簽

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

二、HTML5與HTML 4.01 label的不同

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

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

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

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

都對多l(xiāng)abel元素提供了強有力的支持。

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

三、當(dāng)下控件標(biāo)簽化在瀏覽器和輔助技術(shù)下的可用性可訪問性支持

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

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

上圖中框框的結(jié)果就顯示了上面的些結(jié)論：for和id可用性可訪問性好于label標(biāo)簽包裹，非標(biāo)準(zhǔn)可用性可訪問性。

其余的結(jié)果與數(shù)據(jù)您有興趣可以仔細看看比對。

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

給開發(fā)者的建議

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

給瀏覽器和輔助技術(shù)開發(fā)商建議

Chrome: 實現(xiàn)對for/id以及l(fā)abel 元素包裹的可用性可訪問性支持。

Safari:實現(xiàn)label元素包裹的可用性可訪問性支持。

Firefox:修復(fù)當(dāng)for/id合包裹體被使用時候多標(biāo)簽內(nèi)容的問題。

NVDA:修復(fù)控件元素在label之內(nèi)重復(fù)朗讀的的問題

四、結(jié)尾部分

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

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

(本篇完)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。