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: , , , ,