A collection of tips, guidance and practical suggestions in developing accessible websites
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.
display: noneCore 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.
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.
nice one…i was going to write a little article at some point about legit uses of display:none (thinking at the time about accordion-style dynamic page elements, where each accordion might contain focusable elements like links), but other work always got in the way.
nice one on this handy little blog by the way…and hey, commenting at last!
There’s some idea that one of Google big de-indexes in the Big Daddy (or Jagger) updates may have been looking for display:none or visibility:hidden in the HTML.
There was a big spam publish which used this to push a load of content into the page without showing it.
BigMouthMedia, an SEO agency actually got de-indexed by hand because of a shuffling div mechanism which Google noticed would take about a year to see each pane.
Lots of things to be careful of
I’d recommend trying to export the style into an external CSS at least
Hi Spaggie, any mechanism for hiding content from a visitor can be gamed by SEO spammers. If SEO spammers see enough fallout using display: none and visibility: hidden, they’ll just switch to offscreen positioning. Also, using an external stylesheet offers no protection, because its requestable, parsable. Its not in Google’s interests to blanket ban/score against sites that hide content from the visitor. The two key factors are: 1.) What content is hidden 2.) Why is that content hidden.
Thanks for the info regarding BigMouthMedia, I didn’t know that.
Re-using the display none on drop down navigation, I would add that you need to make sure that you allow any keyboard user to skip the 150 links so you may complement this with tabindex=”-1″ on those links.
Re- BigMouth being banned, they didn’t use display:none, they used a very very small (if memory serves something like 10px high) div filled with a lot of SEO related keywords. They also used overflow:hidden to make only the first couple of para visible so it made sense eventough it was in a corner at the bottom of their homepage.
@Spaggie As far as I know google de-indexed sites, that used hidden layers _without_ the possibility to get shown (via href or button, etc). So this was hidden text to stuff content into the page. This, of course, shall get de-indexed. If you provide a mechanism, that makes the hidden divs visible, than google will not de-index your domain.
Does onclick qualify as an accessible means of displaying content?
Scott, as long as the onclick is within the tab order (so attached to an anchor as opposed to, for example, a span). But, with the proviso, that the content is reachable when JavaScript is not available – this could either be that the content is reachable within the page and hidden by JavaScript, or available on a separate URL which is reachable.
Hi just came accross this post. Seems I’m a little late looking at the dates, but it’s interesting topic.
Hiding content for the benefit of the users experience has to be a good thing.
After all who are the sites designed for the visitor or Google.
You could argue both however as long as whats done can be explained as a positive reason for the end user and not a spam technique then persoanaly i don’t see an issue.
Interesting post – thanks