diff options
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/4.3/getting-started/accessibility.md | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/utilities/screen-readers.md | 11 |
3 files changed, 14 insertions, 5 deletions
diff --git a/site/content/docs/4.3/getting-started/accessibility.md b/site/content/docs/4.3/getting-started/accessibility.md index 83dd3a9f3..5b642dcfe 100644 --- a/site/content/docs/4.3/getting-started/accessibility.md +++ b/site/content/docs/4.3/getting-started/accessibility.md @@ -37,10 +37,10 @@ Content which should be visually hidden, but remain accessible to assistive tech </p> {{< /highlight >}} -For visually hidden interactive controls, such as traditional "skip" links, `.sr-only` can be combined with the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). +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 the `.sr-only-focusable` class may not be used in combination with the `.sr-only` class.** {{< highlight html >}} -<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> +<a class="sr-only-focusable" href="#content">Skip to main content</a> {{< /highlight >}} ### Reduced motion diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 8a9a0f241..e2ced63b3 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -85,6 +85,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be - Renamed `.arrow` to `.tooltip-arrow` +## Accessibility + +- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720). + ## Utilities - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore diff --git a/site/content/docs/4.3/utilities/screen-readers.md b/site/content/docs/4.3/utilities/screen-readers.md index 7f6faaedb..7781b11fb 100644 --- a/site/content/docs/4.3/utilities/screen-readers.md +++ b/site/content/docs/4.3/utilities/screen-readers.md @@ -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 >}} |
