HTML輸入和標籤：愛情故事

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

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

內容警告：在這篇文章中，是愛與人際關係的主題。

愛情故事從這裡開始！讓我們介紹創建快樂標籤和輸入的基礎知識。

如何配對標籤和輸入

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

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

 <label> 
  姓名：
  
</label>

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

 名稱：

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

 
<label> 
  姓名：
  
</label>

連接到輸入
名稱：

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

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

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

並非所有輸入都需要標籤

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

標籤中有什麼

標籤內部的內容應：

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

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

 
開始日期

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

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

健康關係的最佳實踐

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

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

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

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

考慮一下。如果我們有一些標準的HTML，則標籤在輸入之前出現：

 橙色

那將標籤放在DOM中的輸入之前。但是現在，假設我們的標籤和形式位於一個靈活的容器中，我們使用CSS命令將輸入​​在標籤之前的內容逆轉：

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

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

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

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

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

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

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

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

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

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

做：使標籤可見

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

想像一個想自豪地與意見相關聯的標籤：

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

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

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

Kitty Giraudel在深入解釋瞭如何負責任地隱藏內容。

要避免什麼

為了保持和維持投入和標籤之間的健康關係，配對時有些事情不做。讓我們了解這些是什麼以及如何預防它們。

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

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

不要：用佔位符代替標籤

這就是為什麼不應使用標籤上使用佔位符屬性的原因：

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

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

佔位符就像當一切都完美時出現的朋友一樣，但是當您最需要時會消失。將輸入與漂亮的高對比度標籤配對。標籤不是片狀，並且忠於100％的時間。

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

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

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

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

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

上面的代碼應重新編寫，以確保可訪問性通過用=“ cardNumber”的標籤替換跨度來確保可訪問性。這是迄今為止最簡單，最強大的解決方案，使大多數人受益。

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

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

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

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

現實生活中的例子

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

組件庫：材料

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

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

在撰寫本文時，我發現的一些問題包括：

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

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

網站：HuffPost

HuffPost網站上有包含新聞通訊表格的文章：

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

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

閉幕詞

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

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

我想傳達的消息是，快樂的標籤和輸入對至關重要。如果您的表格不可用，那麼您的表格是否不可用。我敢打賭，幾乎每個人都寧願填寫一種醜陋但易於使用的形式，而不是引起問題的漂亮表格。

謝謝

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

腳註

• ¹ datepicker實際上在iOS 14中得到了很好的支持，而且非常好。可以想像MacOS版本必須在地平線上。 ⮑

以上是HTML輸入和標籤：愛情故事的詳細內容。更多資訊請關注PHP中文網其他相關文章！