可访问的展开/折叠表格行

Question

我想问一个关于创建可访问的展开/折叠表格的问题。我正在尝试创建一个具有可扩展行的表格，可以通过屏幕阅读器进行访问。以下是我们要完成的基本内容：

我们使用JQuery创建了一个可以实现此功能的表格，但设计中存在几个无障碍问题，其中包括：

1. 如何向屏幕阅读器展示初始行（包含3个单元格）与展开行之间的关系？

将第一列作为具有唯一ID的标题，并在展开行中引用它是否可行？或者这会让人感到困惑，因为从技术上讲，展开行与整个初始行（而不仅仅是第一个单元格）相关联？

2. 屏幕阅读器如何知道已经展开了什么？

有没有任何aria属性可以帮助实现这一点？

现在是一个重要的问题...

3. 这种设计本质上是不可访问的吗？

当屏幕阅读器访问左侧的按钮以执行展开/折叠操作时，它尚未阅读与新展开行（例如项目1，项目2，项目3）相关的任何单元格（向右）。这意味着屏幕阅读器用户被迫在有机会阅读初始行之前请求更多信息。是否有任何方法可以修复此问题，以便屏幕阅读器有机会在展开获取更多信息之前阅读整行？唯一的解决方案是将展开/折叠按钮放在表格末尾吗？

- Oaryx

---

还要看一下树/网格模式- https://www.w3.org/TR/wai-aria-practices/#treegrid - slugolicious

Answer 1

1. 如何向屏幕阅读器展示初始行（包括3个单元格）和扩展行之间的关系？

您需要使用标题和ID方法将标题与使用colspan的数据单元格相关联。

请注意，使用此方法可能会将单个数据单元格与多个标题单元格相关联。

2. 屏幕阅读器如何知道已扩展了什么？

有许多方法可以解决这个问题，但我建议使用已经通过辅助功能审查的手风琴系统，例如jquery-ui或其他系统，例如a11y project提出的一些方案。选择一个已知好的解决方案（即使只是作为起点）意味着您不必重新发明轮子并花费时间解决已经解决的问题。

您可以将这些解决方案原封不动地使用（在表格单元格中），也可以将其反向工程以适用于自己的系统。如果选择后者，请特别注意aria-controls、aria-labelledby、aria-expanded、aria-hidden和aria-selected。

3. 这种设计本质上是不可访问的吗？

您提出了一个非常好的观点，即扩展器的位置有效地绕过了阅读顺序。这是一个问题，但可以通过将扩展器放在具有colspan属性的数据单元格中来克服。

如果必须将扩展器放在当前位置，则建议使用aria-hidden属性隐藏屏幕阅读器用户无法感知的控件，然后在具有colspan属性的数据单元格中放置第二个控件，仅供屏幕阅读器用户感知（例如bootstrap .sr-only类或其他方法）。

- Josh