javascript - 在屏幕阅读器可以使用 JavaScript 或 CSS 阅读之前删除网站上的内容...？

Question

我负责这个网站 - http://reader.ku.edu [编辑:我已经删除了有问题的菜单] - 我们是为盲人提供的阅读服务，所以我们需要网站真正适合屏幕阅读器。

该网站由一所大学托管，我们使用他们的 Drupal 模板，该模板在页面顶部包含一个大学范围的菜单(电子邮件、黑板等，以及一个非常大的目录菜单)。

我们需要从网站上删除菜单，这样屏幕阅读器就不会开始阅读它(这是一个非常大的菜单)。

我有 CSS 和 Javascript 权限，但没有 PHP。

实现此目标的最佳方法是什么？屏幕阅读器会使用 style="display:none" 阅读内容吗？我认为这会比 style="visibility:hidden" 更好。应该在 CSS 文档中输入，还是通过 javascript 执行？阿拉 $('.ku-menu').display.toggle();

谢谢!

Answer 1

要从 DOM 中完全删除菜单，您可以这样做:

纯 JavaScript 版本

document.getElementById("ku_main_nav").remove();

jQuery 版本

$("#ku_main_nav").remove();

结果是，菜单不再可见，更重要的是，它不再出现在 DOM 中:

JS之前:

<div class="content clearfix" style="font-size: 14px !important; line-height: 16.8px !important;">
  <ul class="inline-list" id="ku_main_nav" style="font-size: 14px !important; line-height: 28px !important;">
    [...]
  </ul>
</div>

JS之后:

<div class="content clearfix" style="font-size: 14px !important; line-height: 16.8px !important;">

</div>

编辑:

添加了 jQuery 版本