先看這個例子
「顯示名稱」是欄位標籤。下面另有一項說明，暫未用屬性連成程式可讀的描述，方便分清「標籤有關聯」和「文字剛好在旁邊」。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 明確關聯 | 比較 label 的 for 和 input 的 id | 兩者都是 display-name；input.labels 有一個標籤 |
| 按標籤 | 按「顯示名稱」 | 焦點到 display-name 輸入框 |
| 附近說明 | 查看 aria-describedby | 屬性未設；說明尚未成為相關描述 |
瀏覽器怎樣處理
for 會對應同一棵樹內、有相同 id 的可標籤控制項。這個關聯同時提供按標籤到欄位的原生路徑。placeholder 不能取代持續可見的標籤。若要連上說明，在 input 加 aria-describedby="hint"，原有標籤關聯毋須改動。
for 寫錯，旁邊有標籤也連不上
反例的標籤寫 display-name，input 的 id 卻是 display-name-other，因此沒有找到對應控制項。
<label for="display-name">顯示名稱</label><input id="display-name-other" type="text">input.labels 長度為零，按標籤不會令該 input 取得焦點。正例有一個標籤，焦點亦到指定欄位。
試着修正
把 input 的 id 改成 note-name，另一個哪項屬性也要改？說明的關聯怎樣保留？
查看參考答案
label 的 for 也改成 note-name。若加了說明關聯，aria-describedby="hint" 照留；它指向說明的 id，不是 input 的 id。
- 核對 input.labels，以及按標籤後真正的 activeElement。
- 輸入框的名稱與相關描述分開核對。