為什么 HTML 個元素（input、textarea 和 select）應該有關聯的標簽？

Question

任何人都可以闡明為什么（ input ， textarea和select ）應該有一個關聯的 label 嗎？

我找到了一個 stackoverflow 線程（ Should I put input elements inside a label element? ），它解釋了關聯<input>和<label>的所有方式，但我沒有找到任何關於為什么必須關聯 label 的明確解釋。

WebStorm (IDE) 為這段代碼中的輸入生成一個“Missing associated label”警告：

<div>
  <input type="text" id="search" name="search">
  <button id="logout" name="logout">Logout</button>
</div>

應用自動更正會為輸入添加一個 label：

<div>
  <label>
    <input type="text" id="search" name="search">
  </label>
  <button id="logout" name="logout">Logout</button>
</div>

HTML 在沒有 label 的情況下也能正常工作，那么我為什么要添加它呢？

Answer 1

相關標簽用於輔助功能。 因此，例如，當您在網站上運行 lightouse Chrome 檢查時，它會在其報告的“可訪問性”部分指出缺少的標簽。 原因：

“標簽確保表單控件被屏幕閱讀器等輔助技術正確宣布”。

因此，當您的網站可能被無法正確閱讀或查看內容並需要屏幕閱讀器的殘障人士訪問時，擁有它們是一件好事。

Answer 2

如果您想在 JetBrains 的 IDE 中隱藏此警告，則只需將 aria-label="" 屬性添加到標簽（輸入、文本區域或選擇）。