There are a lot of reasons why you might want to hide an HTML element on a page, and the way to do this is with CSS.
It’s tempting to use display: none; for this, but there’s a big reason why you shouldn’t. This article will tell you what that reason is, and the alternative method most coders recommend.
Hidden elements are ignored by screen readers for the blind
Blind users enlist the help of screen readers to read out their web pages aloud to them.
The problem with screen readers is that they ignore content with the CSS property display: none;. The content is still there in the HTML code, but it’s treated as if it doesn’t exist.
Now, you may think that’s totally understandable. If people browsing the site normally don’t get to see the content, then why should that be any different for blind users?
The answer becomes clear when you think about what kind of content actually gets hidden. Drop-down menus, tabbed interfaces and collapsed FAQ pages. The hidden content is only designed to be hidden until the user brings it up. But screen readers don’t have the capability to ‘bring up’ elements. What’s on the page at the start is what gets read out – end of story.
What to do instead
What you want to do instead of using display: none; is to position the element offscreen so that it’s not visible to normal users, but screen readers don’t ignore it. The way to do this is with the following CSS code, courtesy of CSS Tricks:
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}Most of the time, the reasons why you may want to hide an element involve JavaScript as well. So what you want to do to hide an element is to add the class of .hide using jQuery, and remove it when the user brings it up.
But what if you want animation? Adding and removing classes won’t give you the animation capabilities, such as the fade and slide methods. If you want to go a bit deeper, check out this article by A List Apart, which has an advanced tutorial for how to use animation with this hiding method.
Remember, don’t use display:none!
The only time when you should use display:none; is when you absolutely don’t want the content to be visible at all. When you want content to be hidden at first, but shown later on, use the method which positions the element off-screen.
Have any questions about hiding content? Let us know!
View the full article at A List Apart
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
