Making display:none; Javascript Accessible

Published: 2009-12-11

When creating a collapsible navigation for a client, I came across the problem of having my navigation remaining hidden if someone has javascript disabled. Needless to say, this was a big problem. There is no secondary navigation on the site, so without it, there is NO navigation.

The problem came from the fact that the element is set to

Which is fine and dandy if you have javascript enabled. If you don’t, all you see is a list of headers.

Luckily there is an easy solution. Create another css file. I named mine, nojs.css

In the css file add this, (Change the selector to which ever one you have set to display:none;)

Place the file somewhere on your server and move back to your html.

Add a <noscript> tag and in between create a link to the new css file.

That’s it. Your navigation should now show if someone has javascript disabled.

Any other simple accessibility solutions I left out? Let me know in the comments.