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

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.