mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

Rename sr-only to visually-hidden in new/renamed helper doc file

Browse Source
This commit is contained in:
Patrick H. Lauke
2020-07-03 20:31:44 +01:00
committed by Mark Otto
parent 9d2cd1b9b8
commit 69b3c46483
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.0/helpers/visually-hidden.md
View File

@@ -6,21 +6,21 @@ group: helpers
aliases: "/docs/5.0/helpers/screen-readers/" aliases: "/docs/5.0/helpers/screen-readers/"
--- ---
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. 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). Can also be used as mixins.
{{< example >}} {{< example >}}
<h2 class="sr-only">Title for screen readers</h2> <h2 class="visually-hidden">Title for screen readers</h2>
<a class="sr-only-focusable" href="#content">Skip to main content</a> <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
{{< /example >}} {{< /example >}}
{{< highlight scss >}} {{< highlight scss >}}
// Usage as a mixin // Usage as a mixin
.sr-only-title { .visually-hidden-title {
@include sr-only; @include visually-hidden;
} }
.skip-navigation { .skip-navigation {
@include sr-only-focusable; @include visually-hidden-focusable;
} }
{{< /highlight >}} {{< /highlight >}}