When is it better to use visibility: hidden?

There is a slight difference between visibility: hidden; and opacity: 0;. When clicking on an element with an opacity property of 0, it triggers the click event. Basically, an element with an opacity property of 0 still consumes pointer events (click, mouseover, etc.). However, an element with a visibility property of hidden does’t consume pointer events meaning if we were to click on it, it wouldn’t trigger the click event. This basically means that visibility: hidden; is a mix of opacity: 0; and pointer-events: none;

9 Likes

To sum it up:

  • display: none; will basically remove an element from our web page. Not only will the element be hidden, but the reserved space of that element will also get removed from our web page

  • visibility: hidden; will simply hide the element but will still display the reserved space of that element

  • opacity: 0; will make an element transparent, and will still display the reserved space of the element. However, unlike visibility: hidden;, an element with an opacity property of 0 will still consume pointer events

3 Likes

I feel like people are focussing too much here on the static page elements, consider how it would be handy to use visibility: hidden in combo with JavaScript for example in client-side form checking.

Here you can leave the placeholder for messages that will only flip to visibility: visible; when an error is encountered (such as a message to let someone know they forgot to fill-out a required field or have an error in their phone number length).

While its true JS can be used to add text to the DOM, as most people have recognised, using this css will help keep the space ready and thus avoid having other elements on the page ‘jump around’ (unless you want them too :>)

5 Likes

I think in the answer what they meant is that neither display: none nor visibility: hidden are accessible for most screen readers. They suggested considering using opacity to change the transparency of an element as being more inclusive of screen readers. This is my understanding of the original answer to the question.

1 Like

I’m still unclear about how screen readers and accessibility factor into this. If an element is positioned outside the boundaries of the screen, for example, how will a screen reader interpret it to a visually impaired user?

Is there a good comprehensive resource for learning about how screen readers work, to guide my coding decisions? I feel like the few resources about accessibility that I’ve heard of are dense and complicated, difficult to navigate and difficult to understand. Does anyone know of a simple but thorough explanation of screen readers in terms of functionality and how they aid the visually impaired?

Thanks!

Screen readers may read the actual screen if we highlight a segment and ask it to verbalize it. Not sure about the general use case, though. It is more likely that the screen reader, like any other unsighted user agent is reading the markup, and parsing the audible text from that.

If the button is hidden, can it only not be seen or does it make it so that if someone happens to click over it, the button will not respond?

If the element is hidden, it’s space on the screen will remain, but will be blank. It will not be click sensitive, albeit the document is click sensitive but with no listener the events will go ignored.

Click is an event, which comes up in the JS track. Once you get to that subject be sure to do follow up reading on event propagation and bubbling.

2 Likes
  1. What is the point of the element visibility: visible; ?
  2. Why not comment the element out < ! - - comment- - > instead of using visibility: hidden; ?
  3. Why not just remove the element entirely instead of using display: none; ?

visibility lets us hide content without collapsing the space it occupies. display, when set to none will hide the element while also collapsing the space it occupies.

We do this so content can be pre-written into a page, and hidden until we want it to be seen, or hidden once the user takes the indicated action. Commenting out or removing the element is not the intention.

Please excuse my lack of comprehension but besides for question #2 I don’t see how this addresses my questions.

Question 1 is also answered. As for question 3, which is also answered, we cannot manually change a page in the client. Bear in mind that webpages are intended to be dynamic and responsive.

mtf answered the questions well and also as a person just learning I think there is a lot of over thought. I see it as simple as this.

visibility: hidden; = want in code, want designated space on browser, just not visible currently
display: none: = want in code, do not want designated space on browser, not visible
opacity = want in code, want on browser, invisible (not a lot of reason to use this as a functional purpose)
Erase = doesn’t exist

The choices are ours.

Visibility: hidden; is simply for “pregaming” a part of the browser (in the example, maybe the fundraising doesn’t start until an official date or time) … or simply removing something existing temporarily for any factor of reason imaginable. The browser “space” is designated and visible, for when ready to implement or reimplement content.

Opacity was mentioned previous to you, but this use is for fading elements. you could hide the element but leaving content and interactive pieces (links ect) inside browser, “but invisible to eye” … so really should be used for levels of transparency and not so much as hiding.

The difference in using display: none; is because we don’t even want the “space on the browser” to be available, but it’s still in the code. As far as the why, you will figure out what it is needed for based on your needs in the future and how you wish to write your content and have it displayed. We are simply learning the different options available. It can also be seen as pregaming or removing existing content “like visibility: hidden;” but “not” wanting to reserve the space on the browser. But either way still within the coding.

Erasing is erasing. Therefore, not in the code.

2 Likes

This point is more important than a learner will yet realize. Using opacity to hide text is very high on the DO NOT DO list when it comes to search engines. If they find any instances of it on our site, they could penalize it in the index, or even possibly move our domain into the supplemental index. This is one of the worst offences we can commit in terms of SEO.

2 Likes

Wow, that is great insight we definitely would not know and I think adds a lot of value early. I look forward to learning about SEO eventually. Thank You!

1 Like

When it comes to opacity, I only ever apply it to the background, where text only appears if it is in an image that the search engines cannot see. Text in images is not content since it does not meet accessibility guidelines. That still does not preclude it in images.

There is no way for the detection of subliminal messaging via images. unless AI has found a way to read alpha patterns, et al. Search hasn’t reached that level, yet, in so far as we can tell. It’s close, though.

Hiding text is bad if it leaks into the search purview. It raises highly prejudicial flags. In other words, using images, while they might have worked in the past to convey messages undetected by search engines, is very soon not going to be a good idea. AI is going to be be able to catch every instance of subliminal messaging that it can learn. Text is just the beginning.

2 Likes

Hi everyone?

Elements are “visible” by default right? So why would be set the visibility to “visible”? In the same way if for example we have set an element visibility to “hidden” and afterwards for some reasons we want this element back in view, shall we then change his visibility to “visible” or can we just simply delete that line of code instead ?
To illustrate what is then the difference between the two set of codes below:

p { versus p {
colour: blue colour: blue
} visibility: visible
}
So in both cases the p elements will be seen regardless of whether or not you set a visibility property/value?
Hope that makes sense. If somebody can shed some light on this please that would be good.

does display: none and visibility: collapse have the same function?

1 Like

Good question. My short answer would be, ‘No.’ However their side-effect may be similar. Display ‘none’ removes the element from normal flow. It’s gone. Visibility ‘collapse’ only removes the element from view and collapses the space it takes up. but… The element is still in normal flow to any user agent that can see it.

Yes, that is a rather pat reply. It only matters that we relate things to normal flow in the context of this question. For extra reading when you get the time to study accessibility, look for how the visibility property is intended to be used, and for the reasoning or rationale associated with those intentions. One cannot go into it, here, being so far removed from the field at this point. You’re getting only a glimpse from me, now.

Please do not forget to follow this up when you are further along in your studies and begin working on production code that needs to conform to government regulations (any site getting government money has to conform) or you just want your site to be accessible and meet all the WAI-WCAG level three requirements.

1 Like

Alright, will do
Thank you!

1 Like