当用户选择选项时，是否可以使用其他表单输入？

Question

这是否存在任何可访问性问题：

用户进行选择，并显示其他选项以进行子选择。例如：

第一个状态，在选择之前：

第二种状态：用户选择＆＃34;丰田汽车＆＃34;从列表中可以看到更多选项

第三种状态：用户选择他们喜欢的汽车后，会出现选择年份

我可以看到可能存在一些问题，因为用户在进行选择之前无法通过/收听所有选项。但它是关于缩小选择范围的。因此，在许多方面，它使其更加清晰和易于访问。

请告诉我可能被破坏的任何问题或规则。谢谢！

Answer 1

是的，只要您尊重元素的正确标签，确保它们可以使用键盘并且内容位于DOM中，就可以执行此操作。这是一个例子：

http://wet-boew.github.io/v4.0-ci/demos/feedback/feedback-en.html

如果您将第一个下拉列表更改为“严重问题...”，则可以看到更多选项。

由于它们出现在当前焦点之后，因此添加表格输入是完全可以接受的。

Answer 2

如果屏幕阅读器在填写任何内容之前尝试通过表单进行制表，则新的选项无法使用。您在表单控件之后添加元素到DOM（或取消隐藏）的事实是好的，但如果您告诉屏幕阅读器添加了某些内容，它也会有所帮助。

您可以拥有具有<span>的视觉隐藏<div>或aria-live='polite'。当用户选择“丰田汽车”时，您可以更新隐藏的<div>。所以你的HTML会有这样的东西：

<div id='moreStuff' aria-live='polite' class='visually-hidden'></div>

你的javascript会有这样的东西：

<script>
  document.getElementById('moreStuff').innerText = 'Four Toyota brands have been added as options below.'
</script>