如何使屏幕阅读器可以访问基于用户选择出现和消失的网站内容

Question

在 HTML 中，我有一个 select 元素，用户可以从中选择选项。根据他们的选择，不同的内容会出现在页面的其他位置。用伪代码（因为我不希望问题是特定于框架的）：

<select>
<option>CHOOSE YOUR OPTION</option>
<option>A</option>
<option>B</option>
</select>

<div id='A' style="display: currentSelection === 'A' ? 'block' : 'none' ">
You selected A
</div>
<div id='B' style="display: currentSelection === 'B' ? 'block' : 'none' ">
You selected B
</div>

当选择元素更改值时，从

display: none

到

display: block

的更改由 javascript 处理。

我希望屏幕阅读器不读出 #A 和 #B 下的内容，除非选择了各自的选项。 IE。屏幕阅读器忽略

display:none

元素的行为是正确的。但是如何确保当 css 显示值更改为可见内容时，内容被读出呢？

Answer 1

将两个

元素放在单独的 活动区域 中。屏幕阅读器将宣布活动区域内未隐藏的元素。

<div aria-live="polite">
  <div id='A' style="display:none">
  You selected A
  </div>
</div>

<button onclick="document.getElementById('A').style.display = 'block'">foo</button>