如何让基于用户选择显隐的网站内容适配屏幕阅读器

你当前通过display: none/block控制内容显示隐藏的方式，本身就符合屏幕阅读器的默认行为——display: none的元素会被忽略，切换为display: block后元素进入DOM流，屏幕阅读器自然会识别到并读取内容。但为了让屏幕阅读器用户更顺畅地感知到内容变化，还可以做以下无障碍优化：

• 给select元素添加aria-controls属性，明确关联它所控制的内容容器ID，让屏幕阅读器知晓下拉选择与内容区域的关联：

<select id="optionSelector" aria-controls="A B">
  <option>CHOOSE YOUR OPTION</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

• 给内容容器添加aria-live="polite"属性，当内容从不可见变为可见时，屏幕阅读器会在当前操作完成后自动播报内容变化，不会打断用户：

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

• 完善JavaScript切换逻辑，同时通过aria-expanded属性明确标记内容的展开状态，增强语义清晰度：

const selector = document.getElementById('optionSelector');
const contentA = document.getElementById('A');
const contentB = document.getElementById('B');

selector.addEventListener('change', function() {
  const selectedValue = this.value;
  
  // 重置所有内容的显示状态和语义属性
  [contentA, contentB].forEach(el => {
    el.style.display = 'none';
    el.setAttribute('aria-expanded', 'false');
  });
  
  // 显示选中的内容并更新属性
  if (selectedValue === 'A') {
    contentA.style.display = 'block';
    contentA.setAttribute('aria-expanded', 'true');
  } else if (selectedValue === 'B') {
    contentB.style.display = 'block';
    contentB.setAttribute('aria-expanded', 'true');
  }
});

• 给option元素加上value属性，避免依赖选项文本判断选中值，让逻辑更稳定可靠。

这些优化不仅能确保可见内容被屏幕阅读器正常读取，还能提升整体的无障碍体验，让屏幕阅读器用户清晰感知到操作与内容变化的对应关系。

内容的提问来源于stack exchange，提问作者Eoin