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

Question

我想问一个关于创建可访问展开/折叠表的问题。我正在尝试创建一个可通过屏幕阅读器访问的可扩展行的表。这基本上是我们想要实现的目标：

我们能够使用 JQuery 创建执行此操作的表，但在设计中存在一些可访问性问题。其中包括：

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

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

2。屏幕阅读器如何知道已扩展的内容？

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

现在是一个大问题......

3.这种设计本身就无法访问吗？

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

Answer 1

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

您需要使用 header and ID's method 将标题与使用 colspan 的数据单元格相关联。

请记住，使用此方法，单个数据单元格可能与多个标题单元格相关联。

2.屏幕阅读器如何知道已展开的内容？

有很多方法可以解决这个问题，但我建议使用已经过可访问性目的审查的手风琴系统，例如jquery-ui 或其他系统，例如a11y project 提出的系统。采用已知良好的解决方案（即使作为起点）意味着您不必重新发明轮子并花时间解决已经解决的问题。

您可以按原样（在表格单元格中）使用这些解决方案，或者对它们进行逆向工程以与您自己的系统一起使用。如果选择后一种，我会特别注意aria-controls、aria-labelledby、aria-expanded、aria-hidden 和aria-selected。

3.这种设计本身就无法访问吗？

关于有效绕过阅读顺序的扩展器放置，您提出了一个很好的观点。这是一个问题，但可以通过将扩展器放在具有 colspan 属性的数据单元格中来解决。

如果确实有必要将扩展器放置在您当前拥有它的位置，那么我建议使用 aria-hidden 属性向屏幕阅读器用户隐藏该控件，然后在数据单元格中放置第二个控件具有只能由屏幕阅读器用户感知的 colspan 属性（例如 bootstrap .sr-only class 或 some other method）。