Skip to main content Design tokens Components Style utilities
Skip to table of contents

    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 to 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.

    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.

    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.

    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:

    Importing

    If you’re using the autoloader or the standard loader, you can ignore this section. If you’re cherry picking, you can use any of the following 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@0.5.1/dist/style-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@0.5.1/dist/style-utilities/visually-hidden.css");