javascript - 如何创建屏幕阅读器可访问的 AJAX 区域和 DOM 插入/删除更新？

Question

我的用户交互过程如下:

1. 用户会看到一个包含城市列表的下拉列表
2. 选择城市后，AJAX 请求获取城市中的所有建筑物，并将它们插入到一个 div 中(此 AJAX 请求返回一个复选框列表)
3. 然后用户可以选中/取消选中复选框以将城市添加到同一页面上的表格中。 (动态插入/删除表格行)

这是我的选择下拉列表:

<label for="city-selector">Choose your favorite city?</label>
  <select name="select" size="1" id="city-selector" aria-controls="city-info">
  <option value="1">Amsterdam</option>
  <option value="2">Buenos Aires</option>
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="5">London</option>
  <option value="6">Los Angeles</option>
  <option value="7">Moscow</option>
  <option value="8">Mumbai</option>
  <option value="9">New York</option>
  <option value="10">Sao Paulo</option>
  <option value="11">Tokyo</option>
</select>

这是清空/填充的 ajax div:

<div role="region" id="city-info" aria-live="polite">
<!-- AJAX CONTENT LOADED HERE -->
</div>

这是放置在 ajax div 中的复选框列表:

<fieldset id="building-selector" aria-controls="building-table">
  <legend>Select your favorite building:</legend>  
  <input id="fox-plaza" type="checkbox" name="buildings" value="fox-plaza">
  <label for="fox-plaza">Fox Plaza</label><br>
  <input id="chrysler-building" type="checkbox" name="buildings" value="chrysler-building">
  <label for="chrysler-building">Chrysler Building</label><br>
  <input id="empire-state-building" type="checkbox" name="buildings" value="empire-state-building">
  <label for="empire-state-building">Empire State Building</label><br>
</fieldset>

最后是保存用户添加/删除的城市的表

<table id="building-table" aria-live="polite">
  <caption>List of buildings you have selected</caption>

  <tr>
    <th scope="col">Building name</th>
    <th scope="col">Delete Building</th>
  </tr>

  <tr>
    <td>Empire State Building</td>
    <td><button>Delete</button> /td>
  </tr>

</table>

我认为通过使用 aria-controls=""和 aria-live=""，我走在了正确的道路上，但这似乎不足以让屏幕阅读器检测到变化。事实上，我不知道我的标记中是否遗漏了某些内容，或者我是否需要触发任何警报事件或类似事件才能完成这项工作。

Answer 1

你描述的是一种情况，而不是问题。

只要您的屏幕阅读器可以在视觉焦点移到内容上(使用您的 AT 快捷键)时阅读内容，那么它就是预期的结果。

在您选择城市后，屏幕阅读器不会自行移动到复选框列表。这是因为屏幕阅读器的视觉焦点与标准焦点不相关。

aria-live 是用来发布公告的，但不会让您与同一 div 内的任何内部控件进行交互，也不会将视觉焦点移动到该元素。

在您的情况下，您应该描述表单的操作:

Chose a city in the list to select your favorite building