大多數(shù)輸入都有一些共同點 - 他們最快樂的是帶有同伴標簽！幸福并不止于此。具有適當輸入和標簽的表格對于人們來說更容易使用，這也使人們感到高興。

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

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

愛情故事從這里開始！讓我們介紹創(chuàng)建快樂標簽和輸入的基礎知識。

如何配對標簽和輸入

有兩種方法可以配對標簽和輸入。一個是將輸入包裹在標簽中（隱式），另一個是將for屬性添加到標簽中，并在輸入中添加ID（explicit）。

將隱性標簽視為擁抱輸入，而明確的標簽則是站在輸入旁邊并握住手的標簽。

 <label> 
  姓名：
  
</label>

屬性值的明確標簽必須與其輸入的ID值匹配。例如，如果為具有名稱的值，則ID也應具有名稱值。

 名稱：

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

 
<label> 
  姓名：
  
</label>

連接到輸入
名稱：

每個單獨的輸入元素僅應與一個標簽配對。并且標簽僅應與一個輸入配對。是的，輸入和標簽是一夫一妻制的。 ?謝

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

元素用于分組某些輸入元素，例如無線電按鈕，并用作整個組的可訪問標簽。

并非所有輸入都需要標簽

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

標簽中有什么

標簽內(nèi)部的內(nèi)容應：

• 描述其伴侶輸入。標簽想向所有人展示其與輸入合作伙伴屬于的。
• 可見。可以單擊或敲擊標簽以集中其輸入。與輸入相互作用的額外空間是有益的，因為它增加了點擊或單擊目標。我們將稍微介紹一下。
• 僅包含純文本。不要添加標題或鏈接等元素。同樣，我們將進一步介紹“為什么”。

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

 
開始日期

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

這樣，我們獲得了一個清晰標簽的好處，該標簽描述了輸入的目的，并且向用戶提示的獎勵提示需要以特定的格式輸入輸入。

健康關(guān)系的最佳實踐

以下技巧超出了基礎知識，以解釋如何確保標簽和輸入盡可能快樂。

做：在正確的位置添加標簽

有一個WCAG成功標準，指出頁面的視覺順序應遵循DOM中元素出現(xiàn)的順序。那是因為：

當閱讀順序似乎在屏幕上跳過時，使用屏幕放大器與屏幕讀取器結(jié)合使用的較低視力的用戶可能會感到困惑。當源順序與視覺順序不符時，鍵盤用戶可能難以預測焦點下一步。

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

 橙色

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

標簽{order：2; }
輸入{順序：1; }

在元素之間導航的屏幕讀取器用戶可能會期望輸入在標簽之前獲得焦點，因為輸入是在視覺上首次出現(xiàn)的。但是真正發(fā)生的是標簽焦點。有關(guān)使用屏幕讀取器和鍵盤導航之間的區(qū)別，請參見此處。

因此，我們應該注意這一點。通常，將標簽放在復選框和無線電按鈕的輸入的右側(cè)。這可以通過將標簽放在HTML中的輸入之后，確保DOM和視覺順序匹配。

 
  
  <span>
    
    橙色
  </span>
  
  <span>
    
    香蕉
  </span>
  
  <span>
    您喜歡它們的蘋果嗎？
    
  </span>

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

無論是從頭開始寫入還是用庫生成的輸入，最好使用屏幕讀取器檢查工作。這是為了確保：

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

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

但是，如果JavaScript破裂或禁用，使用JavaScript增強的本機HTML元素的好處將完全丟失，從而使其無法訪問。因此，請檢查一下，并提供服務器渲染的無javaScript替代方案作為安全的后備。

查看這些基本表單測試，以確定如何由不同的屏幕讀取器編寫和宣布其輸入標簽或傳說。

做：使標簽可見

連接標簽和輸入很重要，但同樣重要的是保持標簽可見。單擊或敲擊可見標簽會將其輸入合作伙伴聚焦。這是一種本地的HTML行為，使大量人受益。

想象一個想自豪地與意見相關(guān)聯(lián)的標簽：

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

考慮使用以下代碼視覺隱藏標簽：

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

Kitty Giraudel在深入解釋了如何負責任地隱藏內(nèi)容。

要避免什么

為了保持和維持投入和標簽之間的健康關(guān)系，配對時有些事情不做。讓我們了解這些是什么以及如何預防它們。

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

在某些較舊的桌面瀏覽器中，某些類型的輸入不支持。例如，Internet Explorer（IE）11甚至Safari 14 ¹ （2020年9月發(fā)布）中不支持類型=“日期”的輸入。這樣的輸入落后于type =“ text”。如果日期輸入沒有明確的標簽，并且它會自動落到較舊瀏覽器中的文本輸入中，那么人們可能會感到困惑。

不要：用占位符代替標簽

這就是為什么不應使用標簽上使用占位符屬性的原因：

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

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

占位符就像當一切都完美時出現(xiàn)的朋友一樣，但是當您最需要時會消失。將輸入與漂亮的高對比度標簽配對。標簽不是片狀，并且忠于100％的時間。

尼爾森·諾曼集團（Nielsen Norman Group）有一篇深入的文章，解釋了為什么形式領域中的占位符為何有害。

不要：用另一個屬性或元素代替標簽

當不存在標簽時，一些屏幕閱讀器會尋找相鄰的文本并宣布這一點。這是一種打擊的方法，因為屏幕閱讀器可能找不到任何文字要宣布。

以下代碼示例來自真實的網(wǎng)站。該標簽已被非語義連接到輸入的元素取代。

 <div>
  <span>卡號??</span>
  <div>
    <input type="“" text value="“”" name="“" cardnumber maxlength="“">
  </div>
</div>

上面的代碼應重新編寫，以確?？稍L問性通過用=“ cardNumber”的標簽替換跨度來確?？稍L問性。這是迄今為止最簡單，最強大的解決方案，使大多數(shù)人受益。

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

不要：將互動元素放入標簽中

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

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

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

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

組件庫：材料

物料圖是基于Google設計系統(tǒng)的React組件庫。它包括帶有浮動標簽模式的文本輸入組件，該模式已成為許多設計師和開發(fā)人員的流行：

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

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

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

亞當·西爾弗（Adam Silver）還解釋了為什么浮子標簽有問題，并詳細批評了材料的文本輸入設計。

網(wǎng)站：HuffPost

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

在撰寫此博客文章時，HuffPost使用的電子郵件輸入可以從許多改進中受益：

• 缺乏標簽意味著較小的點擊或點擊目標。代替標簽，輸入上有一個ARIA-LABEL屬性。
• 占位符和輸入值的字體大小是一個小的11px，很難讀取。
• 沒有JavaScript的整個輸入消失，這意味著如果JavaScript被禁用或損壞，人們就無法注冊新聞通訊。

閉幕詞

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

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

我想傳達的消息是，快樂的標簽和輸入對至關(guān)重要。如果您的表格不可用，那么您的表格是否不可用。我敢打賭，幾乎每個人都寧愿填寫一種丑陋但易于使用的形式，而不是引起問題的漂亮表格。

謝謝

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

腳注

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

以上是HTML輸入和標簽：愛情故事的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！