複合標籤：使用 ARIA 為包含嵌入欄位的標籤設定值
問題
您有一個表單，向用戶提問，但答案本身就包含在問題中。我們都熟悉的瀏覽器設定中的一個典型例子是“刪除歷史記錄 x 天”的設定。“刪除歷史記錄”在文字框的左側，“x”是數字，例如 21，然後是單詞“天”，這形成了一個易於理解的句子。
如果您使用螢幕閱讀器，您是否注意到，當您在 Firefox 中訪問此設定時，它會告訴您“刪除歷史記錄 21 天”？然後會播報您在一個文字框中，並且其中包含數字 21。這不是很酷嗎？您無需四處導航即可找出單位。“天”很容易變成“月”或“年”，在許多普通對話方塊中，除了使用螢幕閱讀命令四處導航外，沒有其他方法可以找出這一點。
解決方案在於一個名為 aria-labelledby 的 ARIA 屬性。它的引數是一個字串，由您想要連線成單個可訪問名稱的 HTML 元素的 ID 組成。
aria-labelledby 和 aria-describedby 都指定在要進行標籤化的表單元素上，例如 <input>。在這兩種情況下，可能存在的 for/control 標籤繫結都會被 aria-labelledby 覆蓋。如果您在 HTML 頁面上提供了 aria-labelledby，您還應該提供一個 for 構造來支援尚不支援 ARIA 的舊瀏覽器。使用 Firefox 3，您的視障使用者將自動獲得新屬性帶來的更好的可訪問性，而舊瀏覽器使用者也不會因此受到影響。
示例
<input
aria-labelledby="labelShutdown shutdownTime shutdownUnit"
type="checkbox" />
<span id="labelShutdown">Shut down computer after</span>
<input
aria-labelledby="labelShutdown shutdownTime shutdownUnit"
id="shutdownTime"
type="text"
value="10" />
<span id="shutdownUnit"> minutes</span>
JAWS 8 使用者注意事項
JAWS 8.0 有自己的標籤查詢邏輯，導致它總是覆蓋 HTML 文件中文字框的可訪問名稱。在使用 JAWS 8 時，我還沒有找到一種方法讓它接受上述示例中的標籤。但是 NVDA 和 Window-Eyes 可以很好地處理，Linux 上的 Orca 也沒有問題。
注意： 待定：新增更多相容性資訊
不使用 ARIA 可以實現這一點嗎？
社群成員 Ben Millard 在一篇博文中指出，可以使用 HTML 4 將控制元件嵌入標籤中，如上面示例所示，方法是將 input 嵌入到 label 中。感謝 Ben 提供的資訊！這非常有用，並且表明一些已經存在多年的技術有時連專家也會忽略。這種方法在 Firefox 中有效；但是，它目前在包括 IE 在內的許多其他瀏覽器中無效。對於帶有嵌入式表單控制元件的標籤，使用 aria-labelledby 仍然是最佳方法。