Social Icons

twitterfacebooklinkedinbehancerss feedemail

Tuesday, July 1, 2014

Is Using Display: None; The Best Way To Hide Elements?

Is Using Display: None; The Best Way To Hide Elements?

When we want to hide something on a page, setting the element to 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.

12 comments:

  1. Nice information.. Thanks for this informative share.

    ReplyDelete
  2. Thanks for sharing! I also want to share https://fixmyweb.com.au/ because they offer
    a quality web design and they are a top-notch Web Design and Development firm based
    in Sydney, Australia.

    ReplyDelete
  3. Thanks for sharing your blog! Nice post! Check this out, https://fixmyweb.com.au/ is a top-notch Web Design and Development firm based in Sydney, Australia.

    ReplyDelete
  4. Nice tip, I can help with anithing you need here webdesign agentur

    ReplyDelete
  5. CSS is best technique to define designs on webpages.

    ReplyDelete
  6. Thanks for Sharing your Valuable information.

    Freelance Web Designing in Hyderabad

    ReplyDelete
  7. Great post , this artivle is uniques and given greatful information ,Thanks for share this post . We are given Bloomay provides Web services like Web design Lebanon, web development Lebanon, mobile application development Lebanon, mobile app development Lebanon. Please know more click Here http://bloomay.com/

    ReplyDelete
  8. Thanks for sharing the information.

    For more info : ECM Solutions in Delhi

    ReplyDelete
  9. Sure! I use it all the time!
    webdesign agentur

    ReplyDelete
  10. Thanks Anthony,

    Till 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

    ReplyDelete
  11. 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.

    ReplyDelete
  12. Very 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

ShareThis

 

What We Do...

Queens Web Design and Graphics is a web and graphic design company in Queens, NY specializing in providing local businesses with affordable websites offering design, animation and multimedia services. Learn More...