Avoid the use of “display: none” in CSS

Are you going to use display: none; Wait Wait Wait….

While creating any web application, Accessibility is one of the major factors which decides, how good your website is?

Suppose you have created a website rich in content, rich in design and style but if a user is not able to access it properly, then your website is not good. So always keep Accessibility in mind while creating web applications.

So, I think you got the idea, using “display: none;” is not a good choice from an Accessibility point of view. when you use “display: none;” on any element then Screen-Reader ignores that element while reading. So suppose you have a website that shows some data conditionally and you used a class/id/any selector to show/hide that element using “display: none;” that hidden content will be ignored by screen-readers. but the hidden element will contribute to the behavior of the screen at one time. it is understandable for normal users, but what about blind users. for blind users, screen readers work like God, they can only understand how screen-readers are going to read. So we should not use “display: none;” property on any such element which you want to show conditionally.

Which Property should we use for hiding elements conditionally?

Above mentioned property in the screenshot should be used for hiding elements conditionally.

When should use “display: none;” — We can use “display: none;” property on those elements, whom we want to hide permanently. because these elements are not going to make any contribution to the behavior of the webpage screen.

Thanks for reading. Happing Coding…