Opacity vs. Visibility vs. Display hidden

  • display: none takes it out of the document flow, and removes it from accessibility tree
  • opacity: 0 makes the element transparent, but keeps it in the document flow, and you can click on it
  • visibility: hidden makes the element invisible, keeps it in the document, but you can't click on it

To understand the difference between visibility: hidden and opacity: 0, think of custom designed radio/checkboxes. With visibility: hidden you can not Tab to them or click them.

Links

Please note that this site and the posts on it are, and will always be, a work in progress. If i waited for perfection, i’d never get anything done.