多部分標籤：使用 ARIA 為包含嵌入式欄位的標籤新增標籤

問題

您有一個表單，在其中向用戶提問，但答案本身就在問題中提到。我們都從瀏覽器設定中瞭解到的一個經典示例是“在 x 天后刪除歷史記錄”。“在 x 天后刪除歷史記錄”位於文字框左側，“x”是數字，例如 21，“天”緊隨文字框之後，形成一個易於理解的句子。

如果您使用的是螢幕閱讀器，您是否注意到，當您在 Firefox 中訪問此設定時，它會告訴您“在 21 天后刪除歷史記錄”？，隨後會宣佈您位於文字框中，並且其中包含數字 21。這很酷，不是嗎？您無需四處導航即可找出單位。“天”可以輕鬆地改為“月”或“年”，在許多普通的對話方塊中，除了使用螢幕審查命令四處導航之外，沒有其他方法可以找到這一點。

解決方案在於一個名為 aria-labelledby 的 ARIA 屬性。其引數是一個字串，該字串由您想要連線到單個可訪問名稱的 HTML 元素的 ID 組成。

aria-labelledby 和 aria-describedby 都指定在要標記的表單元素上，例如 <input> 在這兩種情況下，可能也存在的標籤/標籤控制元件繫結會被 aria-labelledby 覆蓋。如果您在 HTML 頁面上提供了 aria-labelledby，則還應提供標籤構建，以便也支援尚不支援 ARIA 的舊版瀏覽器。使用 Firefox 3，您的視障使用者將自動從新屬性獲得更好的無障礙訪問，但舊版瀏覽器的使用者也不會因此而陷入困境。

示例

body {
  margin: 1rem;
}

html

<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 文件的文字框獲得的 accessibleName。使用 JAWS 8，我還沒有找到一種方法可以讓它接受上面示例中的標籤。但 NVDA 和 Window-Eyes 可以正常工作，Linux 上的 Orca 也沒有任何問題。

注意： 待定：新增更多相容性資訊

是否可以在不使用 ARIA 的情況下實現？

社群成員 Ben Millard 在一篇博文中指出，可以使用 HTML 4 將控制元件嵌入到標籤中，如上例所示，方法是將輸入嵌入到標籤中。感謝您的資訊，Ben！它非常有用，並表明一些多年來可用的技術有時會讓專家們也忽略。此技術在 Firefox 中有效；但是，它目前在許多其他瀏覽器（包括 IE）中不起作用。對於包含嵌入式表單控制元件的標籤，使用 aria-labelledby 仍然是最佳方法。