Just a quick note to say that using “display:none” is not as accessible as many web developers think. I know I fell into this in several of my earlier examples. The general though is: “To keep my app accessible I need to include content that will only be read by screen readers and not to my visual audience”. This type of content can include submit buttons for simple dropdown lists, textual headers and content that needs to be hidden until a browser event occurs. The simple solution is just to add “display:none” to that element to hide it from view — but this is wrong.

The problem is that modern screen readers do understand CSS and if you use “display:none”, they will assume this content should be ignored and will skip it entirely. This of course was not your intention and leaves all that work and consideration for nothing.

A better solution is to hide the content off-screen until you need it:

.accessible { position: absolute; top: -9999px; left: -9999px; }

—

You’ll find that once you start supporting accessibility through Progressive Enhancement (Hijax), development becomes more straight forward and easier to maintain. Keep it accessible.

—

Discuss…