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

Accessibility issues with modifying DOM with JavaScript/jQuery

本文关键字：访问问题 DOM JavaScript jQuery 修改使用更新时间：2023-09-26

我正在为一个报告开发一个网站。报告的大部分内容都可以放在一个不大于800px的列中。然而，报告中有几个部分包含的表格太详细了，不可能放在这个空间里。

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

这似乎并不难做到……但后来我开始考虑可访问性。

因此，在检测到过大的表之后，我应该将它们从DOM中剪切出来并存储在变量中，还是应该隐藏它们？

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

如果使用display:none隐藏内容，则屏幕阅读器在切换该属性之前不会看到它。

您还可以从DOM中提取内容，因为屏幕阅读器只查看渲染的DOM。

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