有沒有辦法在<option value="tags, so the description is read after the option?">標簽，所以在選項之后讀取描述？</option>

Question

考慮以下 HTML 代碼：

<select>
  <option aria-describedby="paragraph-a">Option A</option>
  <option aria-describedby="paragraph-b">Option B</option>
  <option aria-describedby="paragraph-c">Option C</option>
</select>

<p id="paragraph-a">This is a description for option A</p>
<p id="paragraph-b">This is a description for option B</p>
<p id="paragraph-c">This is a description for option C</p>

直觀地說，這應該工作的方式是像 chromevox 或 Windows Narrator 這樣的屏幕閱讀器應該閱讀選項，然后是描述（例如“選項 A，這是選項 A 的描述）。但是，這似乎不起作用帶有<option>標簽，或一般的<select>標簽。

aria-labelledby 似乎也不適用於<option> ，除非您打開下拉菜單並 select 從那里選擇選項（某些屏幕閱讀器，例如 chromevox，不允許您這樣做，因為您應該更改使用向上和向下箭頭選擇的選項）。

是否有可行的方法來實現所需的行為？

Answer 1

雖然根據標准演示的方式是有效的，但實際輔助技術的支持可能會有所不同。

實現這一點的唯一方法是使用可訪問的自定義 combobox確保所有元素都被實際渲染而不是替換元素。

但即使它有效，它似乎也不是很用戶友好：

• 有視力的用戶需要額外的努力將選項與其描述進行映射，擴展的選項列表可能會涵蓋這些內容，尤其是在小手機屏幕上
• 屏幕放大鏡的用戶將很難在選項和描述之間跳轉

因此，為了以更普遍的方式實現這一目標，我建議在每個人的選項中包含描述：

<label for="the-select">You have options</label>
<select id="the-select">
  <option>Option A (This is a description for option A)</option>
  <option>Option B (This is a description for option B)</option>
  <option>Option C (This is a description for option C)</option>
</select>

您還可以考慮設置自定義 combobox 的樣式，並在展開的選項列表中顯示兩行 - 如果描述在折疊的 state 中也不相關。

使用 CSS、偽元素和data-屬性可能會為折疊的 select 顯示不同的文本。

在使用 Chromevox 和講述人進行測試時

ChromeVox 相對較新，因此它對輔助功能的支持沒有得到很好的記錄或測試，並且它顯示了一些奇怪的行為，例如禁止擴展 combobox。

屏幕閱讀器的用戶通常在瀏覽器之外也需要它，因此只有 0.3% 的這些用戶使用 ChromeVox 作為他們的主要閱讀器。 Narrator 也不是很受歡迎，只有 0.5%。

根據使用數據和您的目標受眾，您可能會決定針對更流行的屏幕閱讀器進行優化，而 ChromeVox 會迎頭趕上。 常見的選擇是 JAWS、NVDA（免費）和 VoiceOver。

aria-describedby是將錯誤消息與輸入字段相關聯的常用方法，ChromeVox 甚至不支持此屬性。

使用 Orca、NVDA 和講述人的測試結果

以上所有內容都為<select>元素讀取aria-describedby 。

以上所有都允許擴展選項列表。

以上所有尊重<option aria-label="…

Orca 和 NVDA 也會閱讀<option>元素的描述，但僅在 select 折疊時。