CODEWITHSUNDEEP
javascriptcssdrupalscreen-readers
Dan Mantyla
Dan Mantyla

Reputation: 1870

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

I'm in charge of this website - http://reader.ku.edu [edit: I've removed the affending menu] - and we're a reading service for blind people, so we need the website to be really good for screen readers.

The website is hosted by a university and we use their Drupal template, which includes a university-wide menu at the very top of the page (email, blackboard, etc., and a very large directory menu).

We need to remove the menu from the website such that screen readers won't start reading it (it's a very large menu).

I have CSS and Javascript permissions, but not PHP.

What would be the best way to accomplish this? Would a screen reader read something with style="display:none" ? I would think that would be better than style="visibility:hidden". Should that be entered in a CSS document, or executed via javascript? Ala $('.ku-menu').display.toggle();

Thanks!

Upvotes: 0

Views: 162

Answers (1)

Amaury
Amaury

Reputation: 126

To completely remove the menu from the DOM, you can do this:

Pure JavaScript version

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

jQuery version

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

The result is, the menu is not visible anymore, but even more, it's not present anymore in the DOM:

Before the 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>

After the JS:

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

</div>

Edit:

Added jQuery version

Upvotes: 2

Related Questions