rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-28 00:54:30 +01:00
Code Issues Actions Packages Releases 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
Show Stats 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/"
---
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 >}}
<h2 class="sr-only">Title for screen readers</h2>
<a class="sr-only-focusable" href="#content">Skip to main content</a>
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
{{< /example >}}
{{< highlight scss >}}
// Usage as a mixin
.sr-only-title {
@include sr-only;
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include sr-only-focusable;
@include visually-hidden-focusable;
}
{{< /highlight >}}