Visually hidden keeps its text in the accessibility tree while hiding it on screen. Screen readers read it like any other content; sighted users never see it and it takes no space. It adds no role, name or live region of its own, so attributes such as role and aria-live that you set on it apply unchanged.
Names for icon-only controls
Put the name beside the icon, inside the control. It becomes the control’s accessible name exactly as visible text would.
Icon-only toggles
Default density
Compact density
Restart from the initial state
Show the copyable source
An icon-only Button needs no Visually hidden element: in an icon size its label is already hidden, so write the name as the label.
Announcements
Give the element role="status" and change its text when something happens that sighted users notice from the layout, such as a list shrinking as they type. Keep the element in the page from the start and change only its content; a region that appears together with its message is often not announced.
Filter results
Default density
Compact density
Restart from the initial state
Show the copyable source
Hidden text completes labels that are clear on screen but not when read alone. Each Renew button below is announced with its item, such as “Renew Figma”, and the actions column gets a header without printing one.
Repeated actions
Default density
Compact density
Restart from the initial state
Show the copyable source
Hide whole words, with the space inside the hidden text. Hidden text is read as a separate run, so it cannot complete a visible word: Tool<tp-visually-hidden>s</tp-visually-hidden> is read as “Tool s”.
Rules
Never put focusable or interactive content inside; a focused element that cannot be seen leaves keyboard users lost, and the element raises a visually-hidden-focusable-content diagnostic when it finds one. Visually hidden never appears on focus, so it is not a skip link.
The hidden attribute removes the element from the accessibility tree too: use it to withdraw text, not to hide it visually. Content inside an aria-hidden="true" ancestor is never read, hidden or not. Nothing can give the element size or reveal its content, so it has no styling to customize.
aria-labelledby and aria-describedby find an id only within the same document or shadow root.
The library stylesheet hides the content before the element is defined and when generated styles are turned off.
API Reference
Every element also accepts motion-policy.
Slots
SlotDescriptiondefaultThe text to read; never focusable or interactive content, whose focus could not be seen.