Visually hidden
Use these helpers to visually hide elements but keep them accessible to assistive technologies.
On this page
Title for screen readersSkip to main contentA container with a focusable element.Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with visually-hidden attribute.
Use visually-hidden="focusable" attribute to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user).
visually-hidden="focusable" attribute can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.
vue
On this page