CSS menus why use Display:None


Hiding In Plain Sight

You know in accessibility circles we are constantly telling people using drop down CSS menus that when the menus are not visible  we shouldn’t be using display:none to achieve this.   We all know this one, right.  Just to refresh your memory, remember the display:none rule takes an element assigned right out of the picture completely,  for anyone using a screen reader the assigned content will just not “exist”.

This is all well and good.  Well that depends, maybe there is a case for the use of display:none afterall.

Sometimes we forget about the bigger picture, about the people we are building the sites for.  A few weeks ago at the UPA Perth (chapter in formation) meeting, Teressa from the Disability Services Commission demonstrated with her screen reader (JAWS) why the display:none is sometimes a good thing.

The Issue

Normally for a drop down menu you would code it as a unordered list as below, note I have removed the links for clarity:

<ul class="menu">
           <ul class="submenu">
               <li>Sexy Product </li>
               <li>Highest Selling Product</li>
               <li>Mega Cool Product</li>

And you would use CSS menu based techniques (with a little Javascript for legacy browsers) to generally display the lower  menu (assigned the class submenu on the unordered list).  It follows before the menu is activated it would be hidden from view with the use of the following CSS that still makes the submenu content readable to a screen reader.

.submenu {
    position: absolute; 
    left: -10000px;

For those who are not familiar,  this rule pushes the element outside of the normal document flow visually – to the far left and up beyond the normal visual screen.  However it is still on the virtual screen, so it can be read by a screen reader.

It follows then that a screen reader will be able read all the menu items even the lower level ones and hence the user can transverse at their will round such a menu system.   Which is a good outcome, right?

The Downside – Information Overload

However consider not just a simple menu system (above), but say one from a government agency  consisting of  maybe hundreds of items.  Now think about  having to transverse such a menu.  To deal with those hundreds of items being read out.  As Teressa put it -“It’s just information overload”.

Unknowingly we have subjected our users with disabilities to a massive amount of information that even we are not subjected to.   You see even we see the the menus in chunks, bite sized pieces that we can mentally digest as they appear on a mouse or keyboard action.

The Solution

It’s really a simple thing to fix.  We just use display:none to hide all these large lower menu systems as required.  This means that they are no longer visible to the screen reader at all.  Which is exactly what we want.

.submenu {

To supplement this what we should be doing is using progressional enhancement of the navigational system.  At the very least we should be  having the relevant  sub menus presented on the parent page or related sibling pages as a separate menu list.   This way anyone with disabilities or the like using just the top level menu buttons will still be able to navigate around the site.

So when we have way too much information on the CSS menu, maybe it’s time to consider an  alternative and remove it from the sight of the screen readers altogether. Forcing the navigation of the site by the regular page by page chunks of the menu navigation.

As you would expect this all comes down to testing with real people, people with the disabilities that you are finding solutions for.  You see sometimes with all the good intentions we think we are doing the right thing, but it turns out to be otherwise.

So what instances of disability best practice have you found to be a hinderance to people with a disability?

Tags: , , , ,


  1. I swapped over from using negative left position dropdown styles to display:none about a year and a half ago for this very reason. I had checked a negative left position with JAWS and noticed it was a bit of an information overload and the items don’t seem to follow any kind of hierarchy anymore.

    Its reassuring to know that someone from the Disability Services Commission have noticed this as well.

    As for designing for people with disabilities? I’ve forgotten about people with color blindness on a few occasions where it really counted.

  2. This is great, Gary, really innovative thinking instead of “how we can we replicate this for visually-impaired users?”.

    I think you’re right and we need to step outside the box and think about what works best on different systems.

    Thanks for the inspiration and useful advice.

  3. @Karl – Yeah similar with the menus, mind you for small sites I still move it left, as to many items. I also find if you move it on the parent it does stay together. But for larger sites with lots of menu items, it has to the old school static menus.

    @Rachel – thankyou. We really do need to step outside the box and just consider the people. It’s just a simple matter of asking.

  4. @Gary – Agreed on picking where to use display:none and where its best left off. I definitely agree that small sites with a small number of options we should not need to worry about the user being overwhelmed with options.

    We have to remember however that if there are enough options to use display:none that it’s probably a good idea to make sure you require all the options. Display:none might help keep the information overload away from the screenreader user, but who says that it may not be an information overload for other users? Keep menus simple.

  5. Nice post Gary! This is a great idea. I agree with Karl for small sites it’s not really necessary, but for larger sites this will be fantastic.

Comments are now closed, move along, nothing to see here.