Normal element Just a normal visible accessible element. ✔️ takes a space in the normal layout flow ✔️ visually visible ✔️ descendant elements can be visible ✔️ animatable ✔️ interactivity (click, hover etc.) ✔️ visible for screen readers ✔️ keyboard navigation, focus (for input , button etc. or with a tabindex )

Complete hiding Property display: none or attribute hidden (in browser's styles display: none is used) Hides from everywhere and for everything. Cannot be animated and descendant elements can't be visible at all. ❌ takes a space in the normal layout flow ❌ visually visible ❌ descendant elements can be visible ❌ animatable ❌ interactivity (click, hover etc.) ❌ visible for screen readers ❌ keyboard navigation, focus (for input , button etc. or with a tabindex )

Similar to complete hiding, but visually it's just invisibility Property visibility: hidden Something like a display: none property, but element, although it's invisible, takes a space in the normal layout flow of the document. It can be animated, descendant elements can be visible too. If you want that element not to take up any space in the normal layout flow, you can add position: absolute property then. ✔️ takes a space in the normal layout flow ❌ visually visible ✔️ descendant elements can be visible ✔️ animatable ❌ interactivity (click, hover etc.) ❌ visible for screen readers ❌ keyboard navigation, focus (for input , button etc. or with a tabindex )

Visually hiding while accessibility is kept Custom CSS-class .visually-hidden (you can see this class styles in the bottom of this article) or property box-suppress: hide (not supported by any browser and even moved from CSS Display Module 3 specification to the next one to be written in the future 😔) Only visually hiding, taking out the element from the normal flow layout. Can't be interacted, but still focusable with a keyboard, so you better add tabindex = "-1" attribute. This is the best way to visually hide some not complicated form elements to customize them. For example, you can hide <input type="radio"> or <input type="checkbox"> this way and set any beautiful styles for its <label> element just following it using a input ~ label CSS selector. ❌ takes a space in the normal layout flow ❌ visually visible ❌ descendant elements can be visible ✔️ animatable ❌ interactivity (click, hover etc.) ✔️ visible for screen readers ✔️ keyboard navigation, focus (for input , button etc. or with a tabindex )

Visually hiding with transparency Property opacity: 0 Only visually transparency of the element, nothing more. Descendant elements can't become visible again. ✔️ takes a space in the normal layout flow ❌ visually visible ❌ descendant elements can be visible ✔️ animatable ✔️ interactivity (click, hover etc.) ✔️ visible for screen readers ✔️ keyboard navigation, focus (for input , button etc. or with a tabindex )

Semantical hiding Attribute aria-hidden="true" Hides the element from the screen readers, taking it out from the accessibility tree. ✔️ takes a space in the normal layout flow ✔️ visually visible ✔️ descendant elements can be visible ✔️ animatable ✔️ interactivity (click, hover etc.) ❌ visible for screen readers ✔️ keyboard navigation, focus (for input , button etc. or with a tabindex )