Deciding when display: none is appropriate

It's common knowledge that screenreaders won't read out content styled with display: none, but that doesn't mean content should not be styled this way. There are times when it is appropriate to style content this way, but we need to be careful.

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.