Is Using Display: None; The Best Way To Hide Elements?
Is Using Display: None; The Best Way To Hide Elements?
display: none
is almost like breathing — we don't have to think about it, we just do it. But did you know there is a more accessible way to hide an element?According to Chris Coyier's article 'Places It’s Tempting To Use Display: None; But Don’t', the more accessible way to hide elements is to position them off screen by writing this class:
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
The reasoning behind utilizing this method for hiding elements rather than the good ol' fashioned
display: none
is because the hidden content becomes inaccessible to screen readers. In the fore-mentioned article, Chris also gives a workaround on how to use this 'accessible method' to combat JS libraries that employ their own CSS.My initial reaction, which was raised by many in the comments of this article was — why would you hide things if you still want them to be read by screen readers? But after reading the back and forth dialogue in the comments, good points are made on both sides for using/not using
display: none
. I personally don't have much experience with screen readers, so I'm not sure how much value is truly gained by abandoning display: none
. But it seems to be a debate worth having. Check out the debate in the comments section and sound off with what you think.
Nice information.. Thanks for this informative share.
ReplyDeleteNice tip, I can help with anithing you need here webdesign agentur
ReplyDeleteCSS is best technique to define designs on webpages.
ReplyDeleteThanks for Sharing your Valuable information.
ReplyDeleteFreelance Web Designing in Hyderabad
Thanks for sharing the information.
ReplyDeleteFor more info : ECM Solutions in Delhi
Sure! I use it all the time!
ReplyDeletewebdesign agentur
Thanks Anthony,
ReplyDeleteTill the time i use "display : none;"
but now i will use. Have you tested it before. It is great to move towards smart code.
Regards
Web Application Development
This page is insightful and helpful. Lots of people will assert that everything in your site is great. :) you can also visit Web Design Nagpur for the same.
ReplyDeleteVery informative post. When designing a website, you need to consider some important factors to design an effective and attractive website. The design techniques you utilize on your website can play a major role in making your website effective and attractive and professional. Corporate logo design
ReplyDelete