Add the wa-visually-hidden class to any element to remove it from the page visually while keeping it available to screen readers and other assistive technologies. That's what you want for skip links, invisible labels on icon-only buttons, and any text that describes something a sighted user already understands from context.
"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
Since visually hidden content can receive focus when tabbing, the element becomes visible again as soon as something inside it receives focus. That behavior is intentional: sighted keyboard users need to see where the focus indicator is.
<divstyle="min-height: 1.875rem;"><ahref="#"class="wa-visually-hidden">Skip to main content</a></div>
Examples
Link to This Section
Links That Open in New Windows
Link to This Section
In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
<ahref="https://example.com/"target="_blank">
Visit External Page
<wa-iconname="arrow-up-right-from-square"></wa-icon><spanclass="wa-visually-hidden">opens in a new window</span></a>
Content Conveyed By Context
Link to This Section
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.
Sometimes you want a form control to have a cleaner, more minimal appearance by hiding the label or hint visually. However, removing these elements entirely would make the form inaccessible to users with assistive devices.
Instead, you can hide them visually while keeping them available to screen readers by adding the wa-visually-hidden-label or wa-visually-hidden-hint class.
United StatesCanadaMexicoUnited KingdomGermanyFranceWakandaGenoviaElbonia
<wa-inputlabel="Search Articles"type="search"placeholder="Search for..."class="wa-visually-hidden-label"style="margin-block-end: 1rem;"><wa-iconslot="start"name="magnifying-glass"></wa-icon></wa-input><wa-inputlabel="Phone Number"type="tel"hint="We'll send you a verification code"placeholder="(555) 867-5309"class="wa-visually-hidden-hint"style="margin-block-end: 1rem;"><wa-iconslot="start"name="phone"></wa-icon></wa-input><wa-selectlabel="Country"hint="Select your country for shipping calculations"class="wa-visually-hidden-hint"style="margin-block-end: 1rem;"><wa-optionvalue="us">United States</wa-option><wa-optionvalue="ca">Canada</wa-option><wa-optionvalue="mx">Mexico</wa-option><wa-optionvalue="uk">United Kingdom</wa-option><wa-optionvalue="de">Germany</wa-option><wa-optionvalue="fr">France</wa-option><wa-optionvalue="wakanda">Wakanda</wa-option><wa-optionvalue="genovia">Genovia</wa-option><wa-optionvalue="elbonia">Elbonia</wa-option><wa-iconslot="start"name="globe"></wa-icon></wa-select><wa-inputlabel="Email Address"type="email"hint="We'll never share your email or secret identity"placeholder="e.g. [email protected]"class="wa-visually-hidden-label wa-visually-hidden-hint"><wa-iconslot="start"name="envelope"variant="regular"></wa-icon></wa-input>
Force Visually Hidden
Link to This Section
There are cases where you want to always visually hide certain content, even when it's focused.
For example when hiding a checkbox to render a custom one:
<label><spanclass="checkbox"><inputtype="checkbox"class="wa-visually-hidden-force"/></span>
I have read the terms and conditions
</label><style>.checkbox{display: flex;vertical-align: middle;width:var(--wa-font-size-l);height:var(--wa-font-size-l);background:var(--wa-color-neutral-fill-quiet);color:var(--wa-color-neutral-on-quiet);border-radius:var(--wa-border-radius-s);margin-inline-end:var(--wa-space-xs);&::after{content:'✓' / '';margin: auto;transition: opacity var(--wa-transition-slow)var(--wa-transition-easing);}&:has(:checked){background:var(--wa-color-brand-fill-loud);color:var(--wa-color-brand-on-loud);}&:not(:has(:checked)){&::after{opacity: 0;}}&:focus-within{outline:var(--wa-focus-ring);outline-offset:var(--wa-focus-ring-offset);}}</style>