mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Rename sr-only/sr-only-focusable (#31139)

Browse Source 
* 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>
This commit is contained in:
Patrick H. Lauke
2020-07-03 12:38:11 +01:00
committed by GitHub
parent 0a6cf9036c
commit 10690dd317
21 changed files with 104 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/getting-started/accessibility.md
+4 -4
View File
@@ -28,19 +28,19 @@ Some combinations of colors that currently make up Bootstrap's default palette
### Visually hidden content
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.sr-only` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
{{< highlight html >}}
<p class="text-danger">
<span class="sr-only">Danger: </span>
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
{{< /highlight >}}
For visually hidden interactive controls, such as traditional "skip" links, use the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, since Bootstrap 5 `.sr-only-focusable` is a standalone class, and must not be used in combination with the `.sr-only` class.**
For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
{{< highlight html >}}
<a class="sr-only-focusable" href="#content">Skip to main content</a>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
{{< /highlight >}}
### Reduced motion