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

我想问一个关于创建可访问的展开/折叠表的问题。我正在尝试创建一个表，其中包含可通过屏幕阅读器访问的可扩展行。以下是我们努力实现的基本目标：

我们能够使用JQuery创建这样的表，但在设计中存在几个可访问性问题。这些措施包括：

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

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

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

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

现在是一个大问题

3。此设计是否天生无法访问？

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

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

您需要使用将标头与使用colspan的数据单元格相关联

请记住，使用此方法可以将单个数据单元与多个标头单元关联

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

有很多方法可以做到这一点，但我建议使用一个手风琴系统，该系统已经过可访问性检查，比如或其他系统，比如。使用一个已知的好的解决方案（甚至作为起点）意味着你不必重新发明轮子，也不必花时间解决已经解决的问题

您可以按原样（在表格单元格中）使用这些解决方案，或者对它们进行反向工程，以便与您自己的系统一起工作。如果使用后一个选项，我会特别注意

aria控件

，

aria labelledby

，

aria expanded

，

aria hidden

和

aria selected

3。此设计是否天生无法访问？

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

---

如果确实需要将扩展器放置在当前的位置，那么我建议使用

aria hidden

属性将该控件隐藏在屏幕阅读器用户面前，然后在数据单元格中放置第二个控件，该控件具有colspan属性，只能被屏幕阅读器用户感知（例如引导或）。

还可以查看树/网格模式-