使用JavaScript / jQuery修改DOM的可访问性问题

Question

我正在开发一个报告网站。报告的大部分内容都适合不超过800px的列。但是，报告中有几个部分包含的表格非常详细，无法容纳在该空间内。

我正在考虑的解决方案是使用JavaScript / jQuery来检测对于列而言太大的表并将它们转换为链接，单击这些表时，会使用更多可用屏幕空间调出一个灯箱并显示表。 / p>

这似乎并不困难......但后来我开始考虑可访问性。

因此，在检测到超大表后，我应该将它们从DOM中删除并将它们存储在变量中，还是应该隐藏它们？

屏幕阅读器等辅助功能设备是使用原始来源还是尊重Javascript所做的更改？

Answer 1

如果您使用display：none隐藏内容，则在切换该属性之前，屏幕阅读器将无法看到该内容。

您也可以将内容从DOM中删除，因为屏幕阅读器只会查看呈现的DOM。

创建灯箱时，您必须将焦点设置到灯箱中，以便屏幕阅读器阅读内容。