大型表格的下拉切换器 - 屏幕阅读器用户的可访问性

Question

我们使用原生下拉菜单 select 元素实现了一个内容切换器，该元素在 HTML 表之间直接在下面切换。 这将在博客文章中使用，具有与文章相关的各种表格内容。 从下拉列表中选择一个选项后，该表将立即使用 JavaScript 切换出去。 下面的简化代码用于说明。 我们正在使用 React，但我认为这不会影响问题。

 <div className={styles.csvList}> <label for="csv-table-selector">{label}</label> <Dropdown {...}/> {selectedTable && ( <div id="selected-csv-table" role="region" aria-live="polite"> <h2> {selectedTable.name} <h2> <Table {...}/> </div> )} </div>

现在我们正在使用一个包含表格的“礼貌” aria live region，当表格发生变化时，它将开始读取整个表格。 这与活动区域的Mozilla Docs 实现示例非常相似。

在活动区域中保留的内容数量是否有限制？ 我无法在网上任何地方找到任何关于内容“过多”时的指导的资源。 对于表格，我的假设是屏幕阅读器用户更愿意手动导航它们而不是读取整个内容。

我还考虑过有一个视觉隐藏的活动区域，当表格更改时，它将读出类似“表格已在下面更新”之类的内容。 这比整个桌子都在一个活动区域中更可取吗？

这种设计是否注定会让屏幕阅读器用户感到困惑？ 我知道“选项卡”设计模式更常用于这种情况，所以想知道我们是否应该放弃下拉切换器的想法和 go 来代替。

Answer 1

是的，我肯定会推荐应用Tabpanel 模式，因为这将为您和用户简化工作。

因为期望只是当活动选项卡发生变化时，紧随其后的内容发生变化。 不需要额外的公告。

带有下拉列表的解决方案，没有实时区域

如果您仍想使用下拉菜单，预期的行为仍会有些相似。

您无需在页面某处宣布内容更改，而是通过设置焦点将用户直接引导至切换表。 当然，该表有一个可访问的名称。

这样你就不会在发布后要求用户自己导航，但它已经完成了。