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

Question

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

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

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

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

完成此任务的最佳方法是什么？屏幕 reader 会用 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版本

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

removing content on website before a screen reader can read it with either JavaScript or CSS...?

javascript

css

drupal

screen-readers