Skip to main content
Home / Code Snippets / CSS / Toggle Visibility When Hiding Elements

The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too:

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;

See the Pen avNqoe by CSS-Tricks (@css-tricks) on CodePen.

Remember opacity and visibility still leave an element in the document flow. If you need to remove it from flow, there is more work to do. In fact here’s a way to think about them…

can make thing invisible can make thing unclickable removes from doc flow can be transitioned can be reversed on child
opacity ya no no yes no
visibility ya ya no yes yes
display ya ya ya no no
pointer-events no ya no no no

If you need to change the display value of an element after a fading, that’s tougher. Not really possible in CSS since display isn’t transitionable. Snook has written about this, including some JavaScript to help.