rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-03 15:24:19 +01:00
Code Issues Actions Packages Releases Activity
3a79335a0b
Bootstrap/site/content/docs/5.0/helpers/visually-hidden.md
Patrick H. Lauke 3a79335a0b Docs: rename "Screen readers" helper page to "Visually hidden" 
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).

also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
2020-07-10 16:00:50 -07:00

770 B
Raw Blame History

layout title description group
docs Visually hidden Use these helpers to visually hide elements but keep them accessible to assistive technologies. helpers

Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .sr-only. Use .sr-only-focusable to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.

{{< example >}}

Title for screen readers

Skip to main content {{< /example >}}

{{< highlight scss >}} // Usage as a mixin

.sr-only-title { @include sr-only; }

.skip-navigation { @include sr-only-focusable; } {{< /highlight >}}