Skip to table of contents 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.”
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.
<div style="min-block-size: 1.875rem">
<a href="#" class="pc-visually-hidden">Skip to main content</a>
</div>
Links that open in new windows
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.
<a href="https://example.com" target="_blank" rel="noreferrer noopener">
Link to example.com
<pc-icon
library="default"
icon-style="solid"
name="arrow-up-right-from-square"
style="font-size: 0.75rem; vertical-align: 0.25rem"
aria-hidden="true"
></pc-icon>
<span class="pc-visually-hidden">opens in a new window</span>
</a>
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.
<pc-card style="inline-size: 100%; max-inline-size: 360px">
<header class="pc-visually-hidden">
Personal info
</header>
<pc-input label="Name" style="margin-block-end: var(--pc-spacing-m)"></pc-input>
<pc-input label="E‐mail" type="email"></pc-input>
</pc-card>
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:
<label>
<span class="checkbox">
<input type="checkbox" class="pc-visually-hidden-force" />
<span class="checkbox-tick">
<pc-icon library="default" icon-style="solid" name="check"></pc-icon>
</span>
</span>
<span class="label">I have read the Terms of Service</span>
</label>
<style>
label {
display: inline-flex;
align-items: flex-start;
position: relative;
font-family: var(--pc-font-sans);
font-size: inherit;
font-weight: var(--pc-form-control-value-font-weight);
line-height: var(--pc-form-control-value-line-height);
vertical-align: middle;
cursor: pointer;
}
.checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
position: relative;
inline-size: var(--pc-form-control-toggle-size);
block-size: var(--pc-form-control-toggle-size);
background-color: transparent;
color: var(--pc-color-primary-on-loud);
border: var(--pc-form-control-border-width) var(--pc-border-style)
var(--pc-form-control-border-color);
border-radius: var(--pc-border-radius-s);
font-size: inherit;
transition: all var(--pc-transition-fast) ease-in-out;
}
.checkbox-tick {
display: inline-flex;
font-size: inherit;
scale: 0.8;
transition: all var(--pc-transition-fast) ease-in-out;
}
@media (hover: hover) {
.checkbox:hover {
border-color: color-mix(
in oklab,
var(--pc-form-control-border-color),
var(--pc-color-mix-hover)
);
}
}
.checkbox:active {
border-color: color-mix(
in oklab,
var(--pc-form-control-border-color),
var(--pc-color-mix-active)
);
}
.checkbox:focus-within {
outline: var(--pc-focus-ring);
outline-offset: var(--pc-focus-ring-offset);
animation: focus-ring-animation var(--pc-transition-medium)
cubic-bezier(0.33, 1, 0.68, 1);
}
.checkbox:has(:checked) {
background-color: var(--pc-form-control-activated-color);
border-color: var(--pc-form-control-activated-color);
}
.checkbox:not(:has(:checked)) .checkbox-tick {
opacity: 0;
}
@media (hover: hover) {
.checkbox:has(:checked):hover {
background-color: color-mix(
in oklab,
var(--pc-form-control-activated-color),
var(--pc-color-mix-hover)
);
border-color: color-mix(
in oklab,
var(--pc-form-control-activated-color),
var(--pc-color-mix-hover)
);
}
}
.checkbox:has(:checked):active {
background-color: color-mix(
in oklab,
var(--pc-form-control-activated-color),
var(--pc-color-mix-active)
);
border-color: color-mix(
in oklab,
var(--pc-form-control-activated-color),
var(--pc-color-mix-active)
);
}
.label {
margin-inline-start: 0.5em;
}
@keyframes focus-ring-animation {
0% {
outline-width: 0;
}
50% {
outline-width: calc(var(--pc-focus-ring-width) * 2);
}
100% {
outline-width: var(--pc-focus-ring-width);
}
}
</style>
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 CSSTo 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.3/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.3/cdn/styles/utilities/visually-hidden.css");