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>
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>
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] The many ways to hide things in the DOM"