mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

.sr-only & .sr-only-focusable tweaks (#28720)

Browse Source 
* Prevent .sr-only-focusable overriding properties when being focused

* Typo
This commit is contained in:
Martijn Cuppens
2019-05-20 10:03:51 +02:00
committed by GitHub
parent 1a41b0ffa6
commit a4a04cd9ec
6 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/utilities/screen-readers.md
+8 -3
View File
@@ -5,16 +5,21 @@ description: Use screen reader utilities to hide elements on all devices except
group: utilities
---
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
Hide an element to all devices **except screen readers** with `.sr-only`. Use `.sr-only-focusable` to show the element only when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
{{< example >}}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<h2 class="sr-only">Title for screen readers</h2>
<a class="sr-only-focusable" href="#content">Skip to main content</a>
{{< /example >}}
{{< highlight scss >}}
// Usage as a mixin
.skip-navigation {
.sr-only-title {
@include sr-only;
}
.skip-navigation {
@include sr-only-focusable;
}
{{< /highlight >}}