可访问的展开/折叠表行

Question

我想问一个有关创建可访问的扩展/折叠表的问题。我正在尝试创建一个具有可扩展行的表，该表可通过屏幕阅读器访问。本质上，这是我们要完成的工作：

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

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

将第一列设置为具有唯一ID的标题并在扩展行中引用该标题是否可行？还是因为在技术上将扩展行与整个初始行（而不仅仅是第一个单元格）相关联而使之困惑？

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

是否有任何咏叹调属性可以帮助实现这一目标？

现在是一个大问题...

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属性，然后将第二个控件放在屏幕阅读器用户中，以隐藏该控件。只能由屏幕阅读器用户（例如，引导程序.sr-only class或some other method）识别的具有colspan属性的数据单元。