This content originally appeared on Go Make Things and was authored by Go Make Things
A few weeks ago in one of my YouTube videos, I used the [hidden] attribute to hide and show some elements in the DOM.
One of my subscribers mentioned that they hadn’t heard of that attribute before, and were glad I mentioned it.
Because JavaScripts always has at least two or three ways to do something, I thought today, it might be interesting to learn about all the different ways you can hide stuff in the DOM.
Let’s dig in!
The display: none CSS property
The display: none property in CSS hides an element from the DOM. It is not announced by screen readers.
<p class="hide">👋 Hi there! I don't exist.</p>.hide {
display: none;
}The [hidden] attribute
The [hidden] attribute does the same exact thing as display: none, without the need for any CSS. Just like with display: none, the hidden element is not announced by screen readers.
<p hidden>👋 Hi there! I don't exist.</p>The visibility: hidden property
The visibility: hidden property in CSS hides an element visually, but maintains its space in the DOM (often resulting in an odd gap in the layout).
Unlike display: none and the [hidden] attribute, it is announced by screen readers.
Edit: my friend Ben Myers informed this is wrong. They ARE hidden from screen readers as well.
<p class="invisible">👋 Hi there! I don't exist.</p>.invisible {
visibility: hidden;
}A .visually-hidden class
Sometimes, you have content, headings, or labels that exist to convey information to screen reader users that’s conveyed visually to other users.
For example, if you have a large chunk of content that’s loaded asynchronously, you wouldn’t necessarily want a screen reader to start automatically reading the whole thing once it loads. But you would want to let a screen reader user know it’s there.
There’s no browser-native way to do this, but over the years, a CSS pattern has emerged that visually hides content, prevents it from taking up any space in the DOM, and still allows screen readers to detect it.
<p class="visually-hidden">Users can't see me, but screen readers will.</p>/**
* Visually hide an element, but leave it available for screen readers
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
* @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}For announcements for screen readers, this class is often paired with an ARIA live region.
<p class="visually-hidden" aria-live="polite">Content loaded.</p>The [aria-hidden="true"] attribute
The [aria-hidden="true"] attribute hides content from screen readers while still displaying it visually.
This is primarily used when you have decorative-only content that shouldn’t be read aloud for screen reader users, and would create more confusion or noise than would add value.
For example, imagine if you have a “Favorite” button that included a heart icon and the text “Favorite This Article.”
The heart icon doesn’t clarify or add any useful information about what the button does. It’s solely a visually flourish. Adding the [aria-hidden="true"] attribute prevents it from being announced to screen readers, reducing the amount of “noise” in the UI.
<button>
<svg aria-hidden="true">...</svg>
Favorite This Article
</button>
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-07-15T14:30:00+00:00) The many ways to hide things in the DOM. Retrieved from https://www.scien.cx/2024/07/15/the-many-ways-to-hide-things-in-the-dom/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.