Progressive enhancement with display: none

Core content should never be styled with display: none when JavaScript is not available. When JavaScript is enabled, it can hide content using display: none as long as there is an accessible means of reaching that content.

There are advantages to using display: none. We can make a page cleaner and easier to understand for screenreader users by hiding chunks of content that are not absolutely essential to be always available. And by having an accessible means of displaying that content, the screenreader user can chose to make that content available and read.

Drop-down navigation

A typical scenario of when display: none is appropriate is sub navigation in a drop-down menu. A screenreader user can then quickly skip through the top-level navigation items, or he can activate one of them, undoing the display: none on the sub navigation, and then navigate into that top-level’s sub navigation.

The benefit for the screenreader user here is that they are not forced to wade through all the links of a navigation bar. They can deal with the navigation in discrete and easier to understand chunks of links. It makes a difference offering links in groups of seven, rather than expose the screenreader user to all 150 plus links in the navigation.

In a number of cases visibility: hidden is used in conjunction with positioning the content offscreen (position: absolute; left: -999em;). This is unnecessary since positioning content off the viewport is sufficient to hide the content, and the visibility: hidden makes the content unavailable to screen readers.

There’s no reason to use visibility: hidden. Positioning the content offscreen is safer and has far less accessibility implications. If you fee that visibility: hidden is appropriate for your requirements, I strongly recommend revisiting the requirement and finding an altogether different solution.