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

【问题标题】：removing content on website before a screen reader can read it with either JavaScript or CSS...?在屏幕阅读器可以使用 JavaScript 或 CSS 阅读之前删除网站上的内容...？
【发布时间】：2018-12-13 20:40:31
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

所以不能修改模板？
@epascarello 不，我不能，这是一个 Drupal 多站点配置，我可以访问我们的 Drupal 网站，但我没有服务器访问 PHP 文件的权限。多站点中的所有站点共享相同的模板文件，因此如果我在我们的站点上更改它，它会在所有站点上更改它
webaim.org/techniques/skipnav 很好地回答了您的问题。不要隐藏导航，这实际上会阻碍可访问性。尝试在没有鼠标/触摸屏的情况下使用该网站，以了解屏幕阅读器的行为方式。如果您确实隐藏了它，请务必使用 ARIA 属性让有需要的人知道发生了什么。
谢谢@dandavis，但已经有跳过导航链接，但人们仍在抱怨
考虑使用screen-reader-only 建议将reader.ku.edu/#main-content 加入书签

标签： javascript css drupal screen-readers

【解决方案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 版本

【讨论】：

document.getElementById("ku_main_nav").remove() 更简洁，更不容易从树修剪中中断；一定要爱上 DOM4...