Toggle Visibility When Hiding Elements

Avatar of Robin Rendle
Robin Rendle on (Updated on )

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;
}

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 invisiblecan make thing unclickableremoves from doc flowcan be transitionedcan be reversed on child
opacityyanonoyesno
visibilityyayanoyesyes
displayyayayanono
pointer-eventsnoyanonono

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.