mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-04 16:24:22 +01:00
cf9454caa0
* Bump version to 5.3.0-alpha1 * Dist * Add docs versions updates * Update note in homepage hero Co-authored-by: Mark Otto <markdotto@gmail.com>
1.1 KiB
1.1 KiB
layout | title | description | group | aliases |
---|---|---|---|---|
docs | Visually hidden | Use these helpers to visually hide elements but keep them accessible to assistive technologies. | helpers | /docs/5.3/helpers/screen-readers/ |
Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden
. Use .visually-hidden-focusable
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
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.
{{< example >}}
Title for screen readers
Skip to main contentA container with a focusable element.
{{< /example >}}
Both visually-hidden
and visually-hidden-focusable
can also be used as mixins.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}