rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Code Issues Actions Packages Releases Activity
7657c1e37d
Bootstrap/site/content/docs/5.0/helpers/screen-readers.md
Patrick H. Lauke 10690dd317
Rename sr-only/sr-only-focusable (#31139) 
* Rename `sr-only`/`sr-only-focusable`

To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-07-03 14:38:11 +03:00

722 B
Raw Blame History

layout title description group
docs Screen readers Use screen reader utilities to hide elements on all devices except screen readers. helpers

Hide an element to all devices except screen readers with .visually-hidden. Use .visually-hidden-focusable to show the element only 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

.visually-hidden-title { @include visually-hidden; }

.skip-navigation { @include visually-hidden-focusable; } {{< /highlight >}}