可访问的展开/折叠表格行
Oar*_*ryx 6 html jquery accessibility
我想问一个有关创建可访问的展开/折叠表的问题。我正在尝试创建一个包含可通过屏幕阅读器访问的可扩展行的表。这基本上就是我们想要实现的目标：
我们能够使用 JQuery 创建执行此操作的表，但设计中存在一些可访问性问题。这些包括：
1. 如何向屏幕阅读器显示初始行（包括 3 个单元格）和扩展行之间的关系？
是否可以将第一列设置为具有唯一 id 的标题并在展开的行中引用它？或者这是否令人困惑，因为从技术上讲，展开的行与整个初始行（而不仅仅是第一个单元格）相关联？
2. 屏幕阅读器如何知道扩展了什么？
是否有任何 aria 属性可以帮助实现这一目标？
现在是大问题......
3. 这种设计本质上是不可接近的吗？
当屏幕阅读器访问按钮（左侧）以执行展开/折叠时；它尚未读取与新扩展行（例如项目 1、项目 2、项目 3）相关的任何单元格（右侧）。这意味着屏幕阅读器用户在有机会阅读第一行之前被迫请求更多信息。有什么方法可以解决此问题，以便屏幕阅读器有机会在展开以获取更多信息之前阅读整行？是在表格末尾有展开/折叠按钮的唯一解决方案吗？
1. 如何向屏幕阅读器显示初始行（包括 3 个单元格）和扩展行之间的关系？
您需要使用标题和 ID 的方法，通过 colspan 将标题与数据单元格关联起来。
请记住，使用此方法可以将单个数据单元格与多个标题单元格关联。
2. 屏幕阅读器如何知道扩展了什么？
有很多方法可以解决这个问题，但我建议使用已经过可访问性目的审查的折叠系统，例如jquery-ui或其他系统，例如a11y 项目提出的系统。采用已知良好的解决方案（即使作为起点）意味着您不必重新发明轮子并花时间解决已经解决的问题。
您可以按原样（在表格单元格中）使用这些解决方案，或者对它们进行逆向工程以使其与您自己的系统一起使用。如果选择后一个选项，我会特别注意aria-controls、aria-labelledby、aria-expanded和。aria-hiddenaria-selected
3. 这种设计本质上是不可接近的吗？
您对扩展器的放置提出了很好的观点，有效地绕过了阅读顺序。这是一个问题，但可以通过将扩展器放入具有 colspan 属性的数据单元格中来解决。
如果确实有必要将扩展器放置在当前拥有它的位置，那么我建议通过使用该属性向屏幕阅读器用户隐藏该控件，aria-hidden然后使用 colspan 属性在数据单元格中放置第二个控件，该属性可以仅被屏幕阅读器用户感知（例如 bootstrap .sr-only 类或其他一些方法）。