Question about using “display: none;”

[cre8tive1]

Hi all,

I would like to use a drop-down menu on a web site that I’m working on, but have a question about usability/accessibility as well as whether or not it will cause issues on being read/indexed by the search engines.

Here is the basic menu: myMenu.html.

Here is the article that raised my concern: Places It’s Tempting To Use Display: None; But Don’t

The menu listed above uses the setting of display: none; initially, then changes that setting to display: block; via jQuery. My concern is that it will make the menu unreadable to screen readers causing usability issues, plus I’m concerned that the navigation will not be indexed by the search engines causing another set of problems.

JS used:
jquery-1.7.1.min.js
jquery.dropmenu-1.1.4.js

/*  JavaScript Document                      */

/*  */





$(document).ready(function(){



$('.nav_menu .dropdown').css('display','block');



$('.nav_menu > ul').dropmenu({

effect : 'slide',

speed : 250,

timeout : 0,

nbsp : false

});

});

Any input on how to adjust this menu, or another method to use?

[Odd_E]

Well, I use the CSS3(I believe) way and use visibility: hidden;. It’s very easy to do without JS.

[Paulie_D]

Indexing is done on page content to a much greater extent than what your menus might say.

As far as I know, which is little, in the area of screen readers is that they are reading the HTML not exactly what is on the screen. Therefore, using that logic, they will read the menu items even though, at the moment, they are not visible on the screen.

Happy to be corrected.

[cre8tive1]

Thanks to everyone for the recommendations. I’ve decided to do some additional research to familiarize myself with the use of “visibility” and redesign accordingly.

Thanks for all the help.

[Author]

Posts