大多數(shù)輸入都有一些共同點(diǎn) - 他們最快樂(lè)的是帶有同伴標(biāo)籤！幸福並不止於此。具有適當(dāng)輸入和標(biāo)籤的表格對(duì)於人們來(lái)說(shuō)更容易使用，這也使人們感到高興。

在這篇文章中，我想專注於缺乏語(yǔ)義標(biāo)籤和輸入組合的情況，使各種各樣的人更難完成表格。由於數(shù)百萬(wàn)人的生計(jì)依賴??於形式，讓我進(jìn)入我所知道的最好的技巧，以在輸入和標(biāo)籤之間建立充實(shí)而和諧的關(guān)係。

內(nèi)容警告：在這篇文章中，是愛(ài)與人際關(guān)係的主題。

愛(ài)情故事從這裡開(kāi)始！讓我們介紹創(chuàng)建快樂(lè)標(biāo)籤和輸入的基礎(chǔ)知識(shí)。

如何配對(duì)標(biāo)籤和輸入

有兩種方法可以配對(duì)標(biāo)籤和輸入。一個(gè)是將輸入包裹在標(biāo)籤中（隱式），另一個(gè)是將for屬性添加到標(biāo)籤中，並在輸入中添加ID（explicit）。

將隱性標(biāo)籤視為擁抱輸入，而明確的標(biāo)籤則是站在輸入旁邊並握住手的標(biāo)籤。

 <label> 
  姓名：
  
</label>

屬性值的明確標(biāo)籤必須與其輸入的ID值匹配。例如，如果為具有名稱的值，則ID也應(yīng)具有名稱值。

 名稱：

不幸的是，即使使用和使用ID屬性，所有輔助技術(shù)也無(wú)法正確處理隱式標(biāo)籤。因此，使用顯式標(biāo)籤而不是隱式標(biāo)籤始終是最好的主意。

 
<label> 
  姓名：
  
</label>

連接到輸入
名稱：

每個(gè)單獨(dú)的輸入元素僅應(yīng)與一個(gè)標(biāo)籤配對(duì)。並且標(biāo)籤僅應(yīng)與一個(gè)輸入配對(duì)。是的，輸入和標(biāo)籤是一夫一妻制的。 ?謝

注意：此規(guī)則有一種例外：當(dāng)我們使用一組輸入時(shí)，例如幾個(gè)無(wú)線電按鈕或複選框。在這些情況下，A

元素用於分組某些輸入元素，例如無(wú)線電按鈕，並用作整個(gè)組的可訪問(wèn)標(biāo)籤。

並非所有輸入都需要標(biāo)籤

帶有類型=“ crist”或type =“ button”的輸入不需要標(biāo)籤 - 值屬性代替了可訪問(wèn)的標(biāo)籤文本。帶有類型=“隱藏”的輸入也可以沒(méi)有標(biāo)籤。但是，所有其他輸入，包括和<select>元素，都是標(biāo)籤伴侶最快樂(lè)的。</select>

標(biāo)籤中有什麼

標(biāo)籤內(nèi)部的內(nèi)容應(yīng)：

• 描述其伴侶輸入。標(biāo)籤想向所有人展示其與輸入合作夥伴屬於的。
• 可見(jiàn)。可以單擊或敲擊標(biāo)籤以集中其輸入。與輸入相互作用的額外空間是有益的，因?yàn)樗黾恿它c(diǎn)擊或單擊目標(biāo)。我們將稍微介紹一下。
• 僅包含純文本。不要添加標(biāo)題或鏈接等元素。同樣，我們將進(jìn)一步介紹“為什麼”。

您可以使用標(biāo)籤中的內(nèi)容來(lái)做的一件有用的事情是添加格式提示。例如，的標(biāo)籤將為，如我們所期望的。但是，我們可以為用戶提供一個(gè)提示，即需要以特定格式輸入日期，例如DD-MM-yyyy，以標(biāo)籤和指定要求的輸入之間的A 的形式。該提示不僅指定日期格式，而且具有與輸入上的ARIA描述相對(duì)應(yīng)的ID值。

 
開(kāi)始日期

<span>（dd-mm-yyyy）：</span>
<input type="“" date aria-descripedby="“" date-format min="“" max="“">

這樣，我們獲得了一個(gè)清晰標(biāo)籤的好處，該標(biāo)籤描述了輸入的目的，並且向用戶提示的獎(jiǎng)勵(lì)提示需要以特定的格式輸入輸入。

健康關(guān)係的最佳實(shí)踐

以下技巧超出了基礎(chǔ)知識(shí)，以解釋如何確保標(biāo)籤和輸入盡可能快樂(lè)。

做：在正確的位置添加標(biāo)籤

有一個(gè)WCAG成功標(biāo)準(zhǔn)，指出頁(yè)面的視覺(jué)順序應(yīng)遵循DOM中元素出現(xiàn)的順序。那是因?yàn)椋?/p>

當(dāng)閱讀順序似乎在屏幕上跳過(guò)時(shí)，使用屏幕放大器與屏幕讀取器結(jié)合使用的較低視力的用戶可能會(huì)感到困惑。當(dāng)源順序與視覺(jué)順序不符時(shí)，鍵盤(pán)用戶可能難以預(yù)測(cè)焦點(diǎn)下一步。

考慮一下。如果我們有一些標(biāo)準(zhǔn)的HTML，則標(biāo)籤在輸入之前出現(xiàn)：

 橙色

那將標(biāo)籤放在DOM中的輸入之前。但是現(xiàn)在，假設(shè)我們的標(biāo)籤和形式位於一個(gè)靈活的容器中，我們使用CSS命令將輸入??在標(biāo)籤之前的內(nèi)容逆轉(zhuǎn)：

標(biāo)籤{order：2; }
輸入{順序：1; }

在元素之間導(dǎo)航的屏幕讀取器用戶可能會(huì)期望輸入在標(biāo)籤之前獲得焦點(diǎn)，因?yàn)檩斎胧窃谝曈X(jué)上首次出現(xiàn)的。但是真正發(fā)生的是標(biāo)籤焦點(diǎn)。有關(guān)使用屏幕讀取器和鍵盤(pán)導(dǎo)航之間的區(qū)別，請(qǐng)參見(jiàn)此處。

因此，我們應(yīng)該注意這一點(diǎn)。通常，將標(biāo)籤放在復(fù)選框和無(wú)線電按鈕的輸入的右側(cè)。這可以通過(guò)將標(biāo)籤放在HTML中的輸入之後，確保DOM和視覺(jué)順序匹配。

 
  
  <span>
    
    橙色
  </span>
  
  <span>
    
    香蕉
  </span>
  
  <span>
    您喜歡它們的蘋(píng)果嗎？ 
    
  </span>

做：使用屏幕讀取器檢查輸入

無(wú)論是從頭開(kāi)始寫(xiě)入還是用庫(kù)生成的輸入，最好使用屏幕讀取器檢查工作。這是為了確保：

• 所有相關(guān)屬性都存在 - 尤其是for和id屬性的匹配值。
• DOM與視覺(jué)順序匹配。
• 標(biāo)籤文字聽(tīng)起來(lái)很清楚。例如，“ dd-mm-yyyy”的讀數(shù)與其大寫(xiě)等效物（DD-MM-yyyy）不同。

在過(guò)去的幾年中，我使用JavaScript庫(kù)（例如Disshift）來(lái)構(gòu)建複雜的形式元素，例如在本機(jī)HTML的元素（例如輸入或選擇）上構(gòu)建自動(dòng)完整或組合元素。大多數(shù)庫(kù)使這些複雜元素通過(guò)使用JavaScript添加ARIA屬性來(lái)訪問(wèn)。

但是，如果JavaScript破裂或禁用，使用JavaScript增強(qiáng)的本機(jī)HTML元素的好處將完全丟失，從而使其無(wú)法訪問(wèn)。因此，請(qǐng)檢查一下，並提供服務(wù)器渲染的無(wú)javaScript替代方案作為安全的後備。

查看這些基本表單測(cè)試，以確定如何由不同的屏幕讀取器編寫(xiě)和宣布其輸入標(biāo)籤或傳說(shuō)。

做：使標(biāo)籤可見(jiàn)

連接標(biāo)籤和輸入很重要，但同樣重要的是保持標(biāo)籤可見(jiàn)。單擊或敲擊可見(jiàn)標(biāo)籤會(huì)將其輸入合作夥伴聚焦。這是一種本地的HTML行為，使大量人受益。

想像一個(gè)想自豪地與意見(jiàn)相關(guān)聯(lián)的標(biāo)籤：

也就是說(shuō)，有時(shí)候設(shè)計(jì)需要隱藏的標(biāo)籤。因此，如果必須隱藏標(biāo)籤，則以可訪問(wèn)的方式進(jìn)行操作至關(guān)重要。一個(gè)常見(jiàn)的錯(cuò)誤是使用顯示：無(wú)或可見(jiàn)性：隱藏以隱藏標(biāo)籤。這些CSS顯示屬性完全隱藏了一個(gè)元素 - 不僅在視覺(jué)上，而且從屏幕讀取器中。

考慮使用以下代碼視覺(jué)隱藏標(biāo)籤：

 /*用於非本地元素。對(duì)於本質(zhì)上可集中的元素 */
/ *使用。視覺(jué)隱藏：不（：focus）：not（：active） */
。
  邊緣寬度：0！重要；
  剪輯：rect（1px，1px，1px，1px）！
  身高：1px！重要；
  溢出：隱藏！重要；
  填充：0！重要；
  位置：絕對(duì)！重要；
  白空間：Nowrap！重要；
  寬度：1px！重要；
}

Kitty Giraudel在深入解釋瞭如何負(fù)責(zé)任地隱藏內(nèi)容。

要避免什麼

為了保持和維持投入和標(biāo)籤之間的健康關(guān)係，配對(duì)時(shí)有些事情不做。讓我們了解這些是什麼以及如何預(yù)防它們。

不要：期望您的輸入在每個(gè)瀏覽器中相同

在某些較舊的桌面瀏覽器中，某些類型的輸入不支持。例如，Internet Explorer（IE）11甚至Safari 14 ¹ （2020年9月發(fā)布）中不支持類型=“日期”的輸入。這樣的輸入落後於type =“ text”。如果日期輸入沒(méi)有明確的標(biāo)籤，並且它會(huì)自動(dòng)落到較舊瀏覽器中的文本輸入中，那麼人們可能會(huì)感到困惑。

不要：用佔(zhàn)位符代替標(biāo)籤

這就是為什麼不應(yīng)使用標(biāo)籤上使用佔(zhàn)位符屬性的原因：

• 並非所有屏幕讀者都宣布佔(zhàn)位符。
• 佔(zhàn)位符的價(jià)值有可能在較小的設(shè)備上切斷，或者在瀏覽器中翻譯頁(yè)面時(shí)。相比之下，標(biāo)籤的文本內(nèi)容可以輕鬆地包裹在新系列上。
• 僅僅因?yàn)殚_(kāi)發(fā)人員可以在小視網(wǎng)膜屏幕上看到淡灰色的佔(zhàn)位符文字，在光線充足的房間中，在無(wú)注意的環(huán)境中，並不意味著其他所有人都可以。一個(gè)佔(zhàn)位符也可以使那些視力良好的人抬起眼睛，並最終放棄形式。

• 一旦將字符輸入輸入，其占位符將變得不可見(jiàn) - 無(wú)論是視覺(jué)上還是篩選讀者。如果某人必須迴路以審查他們以表格輸入的信息，則必須刪除輸入的內(nèi)容，以再次查看佔(zhàn)位符。
• IE 9及以下不支持佔(zhàn)位符的屬性，並且在IE 11中集中輸入時(shí)消失。要注意的另一件事：佔(zhàn)位符顏色無(wú)法使用IE 11中的CSS自定義。

佔(zhàn)位符就像當(dāng)一切都完美時(shí)出現(xiàn)的朋友一樣，但是當(dāng)您最需要時(shí)會(huì)消失。將輸入與漂亮的高對(duì)比度標(biāo)籤配對(duì)。標(biāo)籤不是片狀，並且忠於100％的時(shí)間。

尼爾森·諾曼集團(tuán)（Nielsen Norman Group）有一篇深入的文章，解釋了為什麼形式領(lǐng)域中的佔(zhàn)位符為何有害。

不要：用另一個(gè)屬性或元素代替標(biāo)籤

當(dāng)不存在標(biāo)籤時(shí)，一些屏幕閱讀器會(huì)尋找相鄰的文本並宣布這一點(diǎn)。這是一種打擊的方法，因?yàn)槠聊婚喿x器可能找不到任何文字要宣布。

以下代碼示例來(lái)自真實(shí)的網(wǎng)站。該標(biāo)籤已被非語(yǔ)義連接到輸入的元素取代。

 <div>
  <span>卡號(hào)??</span>
  <div>
    <input type="“" text value="“”" name="“" cardnumber maxlength="“">
  </div>
</div>

上面的代碼應(yīng)重新編寫(xiě)，以確?？稍L問(wèn)性通過(guò)用=“ cardNumber”的標(biāo)籤替換跨度來(lái)確?？稍L問(wèn)性。這是迄今為止最簡(jiǎn)單，最強(qiáng)大的解決方案，使大多數(shù)人受益。

儘管標(biāo)籤可以用具有與輸入的aria-labelled屬性相匹配的ID的跨度替換，但人們將無(wú)法單擊跨度以按照標(biāo)籤允許的方式來(lái)聚焦輸入。最好利用本地HTML元素的力量而不是重新發(fā)明它們。本地輸入和標(biāo)籤元素之間的愛(ài)情故事無(wú)需重寫(xiě)！真是太好了。

不要：將互動(dòng)元素放入標(biāo)籤中

標(biāo)籤中只能包含純文本。避免插入諸如標(biāo)題或互動(dòng)元素之類的內(nèi)容，例如鍊接。並非所有的屏幕讀取器都會(huì)正確宣布標(biāo)籤，如果包含純文本以外的其他標(biāo)籤。另外，如果有人想通過(guò)單擊其標(biāo)籤來(lái)集中輸入，但是該標(biāo)籤包含鏈接，則他們可能會(huì)錯(cuò)誤地單擊鏈接。

 
  <div>
    
    
    我接受<a href="%E2%80%9C" https:>條款和條件</a> 
  </div>
  <div>
    
    
    我接受條款和條件。 
    <span>閱讀<a href="%E2%80%9C" https:>條款和條件</a> </span>
  </div>

現(xiàn)實(shí)生活中的例子

我總是發(fā)現(xiàn)現(xiàn)實(shí)生活中的例子可以幫助我正確理解一些東西。我搜索了網(wǎng)絡(luò)，並從流行的組件庫(kù)和網(wǎng)站找到了標(biāo)籤和輸入的示例。在下面，我解釋了元素不足的位置以及如何改進(jìn)它們以確保配對(duì)更好。

組件庫(kù)：材料

物料圖是基於Google設(shè)計(jì)系統(tǒng)的React組件庫(kù)。它包括帶有浮動(dòng)標(biāo)籤模式的文本輸入組件，該模式已成為許多設(shè)計(jì)師和開(kāi)發(fā)人員的流行：

單擊輸入感覺(jué)很光滑，看起來(lái)很棒。但這就是問(wèn)題。它的素質(zhì)大多是皮膚深處。

在撰寫(xiě)本文時(shí)，我發(fā)現(xiàn)的一些問(wèn)題包括：

• 為了提供更多的交互式區(qū)域，可以將標(biāo)籤放在輸入之外。
• 可以選擇添加一個(gè)提示，就像我們之前看到的那樣。不幸的是，提示僅通過(guò)接近度與輸入相關(guān)聯(lián)，而不是通過(guò)匹配的ID和ARIA描述的。這意味著並非所有屏幕讀取器都可以將助手消息與輸入相關(guān)聯(lián)。
• 標(biāo)籤位於DOM的輸入後面，使視覺(jué)順序不正確。
• 至少只要不活躍，空的輸入看起來(lái)似乎已經(jīng)填充了，至少它已經(jīng)填寫(xiě)。
• 單擊輸入時(shí)，標(biāo)籤向上滑動(dòng)，這使得它不適合那些喜歡減少運(yùn)動(dòng)的人。

亞當(dāng)·西爾弗（Adam Silver）還解釋了為什麼浮子標(biāo)籤有問(wèn)題，並詳細(xì)批評(píng)了材料的文本輸入設(shè)計(jì)。

網(wǎng)站：HuffPost

HuffPost網(wǎng)站上有包含新聞通訊表格的文章：

在撰寫(xiě)此博客文章時(shí)，HuffPost使用的電子郵件輸入可以從許多改進(jìn)中受益：

• 缺乏標(biāo)籤意味著較小的點(diǎn)擊或點(diǎn)擊目標(biāo)。代替標(biāo)籤，輸入上有一個(gè)ARIA-LABEL屬性。
• 佔(zhàn)位符和輸入值的字體大小是一個(gè)小的11px，很難讀取。
• 沒(méi)有JavaScript的整個(gè)輸入消失，這意味著如果JavaScript被禁用或損壞，人們就無(wú)法註冊(cè)新聞通訊。

閉幕詞

令人驚訝的人數(shù)很難將信息輸入構(gòu)建不良的投入。該清單包括具有認(rèn)知，運(yùn)動(dòng)和身體殘疾的人，自閉癥譜系障礙，腦損傷和視力差。其他掙扎的人包括急著，連接差，在小型設(shè)備，舊設(shè)備上，不熟悉數(shù)字形式的人。

此外，有很多原因是JavaScript可能會(huì)在瀏覽器中斷開(kāi)或關(guān)閉，這意味著輸入變得功能失調(diào)或完全無(wú)法訪問(wèn)。也有一些人完全有能力查看網(wǎng)頁(yè)，但可以選擇與屏幕閱讀器一起使用鍵盤(pán)。

我想傳達(dá)的消息是，快樂(lè)的標(biāo)籤和輸入對(duì)至關(guān)重要。如果您的表格不可用，那麼您的表格是否不可用。我敢打賭，幾乎每個(gè)人都寧願(yuàn)填寫(xiě)一種醜陋但易於使用的形式，而不是引起問(wèn)題的漂亮表格。

謝謝

我要熱烈地感謝以下人員為我提供這篇文章的幫助：Eric Eggert，Adam Silver，Dion Dajka和Kitty Giraudel。他們合併的可訪問(wèn)性知識(shí)是不可忽視的力量！

腳註

• ¹ datepicker實(shí)際上在iOS 14中得到了很好的支持，而且非常好?？梢韵胂馦acOS版本必須在地平線上。 ?

以上是HTML輸入和標(biāo)籤：愛(ài)情故事的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！