Opacity vs. Visibility vs. Display hidden
display: nonetakes it out of the document flow, and removes it from accessibility tree
opacity: 0makes the element transparent, but keeps it in the document flow, and you can click on it
visibility: hiddenmakes 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.