In-visibility

There are various occasions you'll find the need of hiding something. You could need to hide something to make it appear again, or maybe you need to keep it hidden for certain kind of users. There are various ways of doing this, and obviously they all differ one from another. Which one to use depends on what you need to accomplish: let's say you want to...

Hide an element from all users

You're plenty of options here:

Via CSS

• display: none: the element disappears and is ignored by Screen Readers. The flow of page content will continue as the hidden element wouldn't be there.

• visibility: hidden: the element disappears and is ignored by Screen Readers. The flow of page content will show an empty area.

Via HTML

hidden="true" attribute

Via JS

removeChild: brutally removes the element from the DOM

Hide an element from sight

Useful for giving additional info to those who don't rely on sight for navigating. The best approach is the "visually-hidden technique", also called "sr-only". Many frameworks and boilerplates nowadays offer straight out-of-the-box one of these two utility classes. One iteration of the code is:

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

You can also copy and paste it into your CSS, add the above class to your element and happily watch it disappear! Screen readers will read its content right where you expect it to be.

Hide an element from Screen Readers

aria-hidden="true" attribute: the element is perfectly visible but it will not be announced by screen readers.

Help me think: are there other methods to make an element invisible/unreadable out there? If yes let me know so I can update this content!