考虑以下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"讲述人"这样的屏幕阅读器应该读取选项，然后读取描述(例如"选项a"，这是选项a的描述(。然而，这似乎不适用于<option>标签，或者一般的<select>标签。
aria labeledby似乎也不适用于<option>，除非你打开下拉菜单并从中选择选项(有些屏幕阅读器，如chromevox，不允许你这样做，因为你应该用上下箭头更改所选的选项(。
有没有可行的方法来实现期望的行为？
虽然根据标准，演示的方法是有效的，但实际辅助技术中的支持可能会有所不同。
实现这一点的唯一方法是通过使用可访问的自定义组合框，确保所有元素都被实际渲染，而不是被替换。
但即使它有效，它似乎也不太友好：
- 视力正常的用户需要额外的努力来映射选项及其描述，这可能会被扩展的选项列表所覆盖，尤其是在小型手机屏幕上
- 屏幕放大镜的用户将很难在选项和描述之间切换
因此，为了获得一种更普遍的方法来实现这一点，我建议在每个人的选项中包括描述：
<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>
如果描述在折叠状态下也不相关，您也可以考虑将自定义组合框设置为在展开的选项列表中显示两行。
使用CSS、伪元素和data-属性可以为折叠的选择显示不同的文本。
关于Chromevox和讲述人的测试
ChromeBox相对较新，因此它对可访问性功能的支持没有得到很好的记录或测试，并且它显示了一些奇怪的行为，比如禁止扩展组合框。
屏幕阅读器的用户通常也需要在浏览器之外使用，因此只有0.3%的用户使用ChromeBox作为主要阅读器。讲述人也不太受欢迎，只有0.5%。
根据使用数据和您的目标受众，您可能会决定优化更受欢迎的屏幕阅读器，而ChromeBox会迎头赶上。常见的选择有JAWS、NVDA(免费(和VoiceOver。
aria-describedby是将错误消息与输入字段关联的常用方法，而ChromeBox甚至不支持此属性。
Orca、NVDA和讲述人的测试结果
以上所有的读取CCD_ 6用于CCD_。
以上所有内容都允许扩展选项列表。
以上都是关于<option aria-label="…
Orca和NVDA也会阅读<option>元素的描述，但仅当选择被折叠时。