Skip to main contentSidebar
On this page

Visually Hidden

This utility makes content accessible to assistive devices without displaying it on the screen.

“There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field’s label as a common magnifying glass icon is used in its stead.”

— The A11Y Project, How‐to: Hide content

Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behaviour is intentional, as otherwise sighted keyboard users wouldn’t be able to determine where the focus indicator is.

Edit

Demos

In this demo, the link will open in a new window. Screen readers will announce it as “opens in a new window” even though the text content isn’t visible to sighted users.

Edit

Content conveyed by context

Adding a label may seem redundant at times, but they’re very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.

Edit

Force visually hidden

There are cases where you want to always visually hide certain content, even when it’s focused. For example when hiding a native checkbox to render a custom one:

Edit

Importing

If you imported placer.css, you can skip this section. But if you cherry picked from all the CSS files, you can use these snippets to import this utility.

In HTMLIn CSS

To import this utility from the CDN with a link tag, copy this snippet and paste it in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/styles/utilities/visually-hidden.css" />

To import this utility with an @import at‐rule, copy this snippet and paste it in your global CSS file:

@import url("https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.6/cdn/styles/utilities/visually-hidden.css");

We’d love to hear from you. Please reach out to us with any questions or enquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it!Dangerous lands

Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.

Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!

Yikes!Power up!

Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.

Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫

View our Privacy Policy for more information.

Got it!