mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-22 06:39:52 +00:00
Code Issues Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 104 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/tests/integration/index.html
View File

@ -48,11 +48,11 @@
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>

4
js/tests/visual/carousel.html
View File

@ -36,11 +36,11 @@
</div>
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>

12
js/tests/visual/dropdown.html
View File

@ -19,7 +19,7 @@
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
@ -70,7 +70,7 @@
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup split</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Dropup split</span>
<span class="visually-hidden">Dropup split</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -104,7 +104,7 @@
<div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Product actions</span>
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
@ -126,7 +126,7 @@
<div class="btn-group dropright" role="group">
<a href="#" class="btn btn-secondary">Dropright split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Product actions</span>
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
@ -148,7 +148,7 @@
<div class="btn-group dropleft" role="group">
<a href="#" class="btn btn-secondary">Dropleft split</a>
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Product actions</span>
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
@ -184,7 +184,7 @@
<div class="btn-group dropdown">
<button type="button" class="btn btn-secondary">Dropdown reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Dropdown split</span>
<span class="visually-hidden">Dropdown split</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>

2
js/tests/visual/modal.html
View File

@ -19,7 +19,7 @@
<a class="navbar-brand" href="#">This shouldn't jump!</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>

6
scss/helpers/_screenreaders.scss
View File

@ -2,7 +2,7 @@
// Screenreaders
//
.sr-only,
.sr-only-focusable:not(:focus) {
@include sr-only();
.visually-hidden,
.visually-hidden-focusable:not(:focus) {
@include visually-hidden();
}

6
scss/mixins/_screen-reader.scss
View File

@ -5,7 +5,7 @@
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only {
@mixin visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
@ -21,8 +21,8 @@
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@mixin sr-only-focusable {
@mixin visually-hidden-focusable {
&:not(:focus) {
@include sr-only();
@include visually-hidden();
}
}

2
site/content/docs/5.0/components/badge.md
View File

@ -34,7 +34,7 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}}
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-secondary">9</span>
<span class="sr-only">unread messages</span>
<span class="visually-hidden">unread messages</span>
</button>
{{< /example >}}

20
site/content/docs/5.0/components/carousel.md
View File

@ -63,11 +63,11 @@ Adding in the previous and next controls:
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@ -96,11 +96,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@ -141,11 +141,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@ -169,11 +169,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@ -197,11 +197,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}

36
site/content/docs/5.0/components/dropdowns.md
View File

@ -148,7 +148,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -161,7 +161,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -174,7 +174,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -187,7 +187,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -200,7 +200,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -213,7 +213,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -230,7 +230,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -263,7 +263,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group ml-2">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -290,7 +290,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group ml-2">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -318,7 +318,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
@ -339,7 +339,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
@ -371,7 +371,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -400,7 +400,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@ -430,7 +430,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -459,7 +459,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@ -487,7 +487,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
<span class="visually-hidden">Toggle Dropleft</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -518,7 +518,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
<span class="visually-hidden">Toggle Dropleft</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@ -754,7 +754,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>

8
site/content/docs/5.0/components/pagination.md
View File

@ -62,7 +62,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
<a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
@ -84,7 +84,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
<li class="page-item active" aria-current="page">
<span class="page-link">
2
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
@ -105,7 +105,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
@ -120,7 +120,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>

30
site/content/docs/5.0/components/spinners.md
View File

@ -10,7 +10,7 @@ toc: true
Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="sr-only">Loading...</span>`.
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
## Border spinner
@ -18,7 +18,7 @@ Use the border spinners for a lightweight loading indicator.
{{< example >}}
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@ -30,7 +30,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
{{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-border text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{- end -}}
{{< /spinner.inline >}}
@ -46,7 +46,7 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
{{< example >}}
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@ -56,7 +56,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
{{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-grow text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{- end -}}
{{< /spinner.inline >}}
@ -72,7 +72,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
{{< example >}}
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@ -85,7 +85,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@ -102,7 +102,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@ -112,7 +112,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@ -123,10 +123,10 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
{{< example >}}
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@ -134,10 +134,10 @@ Or, use custom CSS or inline styles to change the dimensions as needed.
{{< example >}}
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@ -148,7 +148,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@ -159,7 +159,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>

4
site/content/docs/5.0/examples/carousel/index.html
View File

@ -75,11 +75,11 @@ extra_css:
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>

4
site/content/docs/5.0/examples/sign-in/index.html
View File

@ -10,9 +10,9 @@ include_js: false
<form class="form-signin">
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<label for="inputEmail" class="visually-hidden">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<label for="inputPassword" class="visually-hidden">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>

4
site/content/docs/5.0/forms/form-control.md
View File

@ -59,11 +59,11 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
{{< example >}}
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="sr-only">Email</label>
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="col-auto">
<label for="inputPassword2" class="sr-only">Password</label>
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">

6
site/content/docs/5.0/forms/input-group.md
View File

@ -203,7 +203,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<div class="input-group mb-3">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -219,7 +219,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#">Action</a></li>
@ -331,4 +331,4 @@ Input groups include support for custom selects and custom file inputs. Browser
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
The exact technique to be used (`<label>` elements hidden using the `.visually-hidden` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

22
site/content/docs/5.0/forms/layout.md
View File

@ -222,18 +222,18 @@ The example below uses a flexbox utility to vertically center the contents and c
{{< example >}}
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="sr-only" for="autoSizingInput">Name</label>
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="autoSizingInputGroup">Username</label>
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="autoSizingSelect">Preference</label>
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
@ -260,18 +260,18 @@ You can then remix that once again with size-specific column classes.
{{< example >}}
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="sr-only" for="specificSizeInputName">Name</label>
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="sr-only" for="specificSizeSelect">Preference</label>
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option value="1">One</option>
@ -297,17 +297,17 @@ You can then remix that once again with size-specific column classes.
Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
Be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
Be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.visually-hidden`.
{{< example >}}
<form class="row row-cols-md-auto g-3 align-items-center">
<div class="col-12">
<label class="sr-only" for="inlineFormInputName">Name</label>
<label class="visually-hidden" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-12">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
@ -315,7 +315,7 @@ Be sure to always include a `<label>` with each form control, even if you need t
</div>
<div class="col-12">
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
@ -342,5 +342,5 @@ Be sure to always include a `<label>` with each form control, even if you need t
{{< callout warning >}}
### Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labeling methods is not advised.
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.visually-hidden` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labeling methods is not advised.
{{< /callout >}}

8
site/content/docs/5.0/getting-started/accessibility.md
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

12
site/content/docs/5.0/helpers/screen-readers.md
View File

@ -5,21 +5,21 @@ description: Use screen reader utilities to hide elements on all devices except
group: helpers
---
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.
Hide an element to all devices **except screen readers** with `.visually-hidden`. Use `.visually-hidden-focusable` to show the element only 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 >}}

7
site/content/docs/5.0/migration.md
View File

@ -9,6 +9,11 @@ toc: true
## v5.0.0-alpha2
### Sass
- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`.
- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
### Components
#### Popovers
@ -196,7 +201,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
### Accessibility
- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
- Unlike the old `.sr-only-focusable`, which only worked in combination with `.sr-only`, `.sr-only-focusable` can be used as a standalone class without `.sr-only`. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
### Utilities

2
site/layouts/partials/callout-warning-color-assistive-technologies.md
View File

@ -1,3 +1,3 @@
##### Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

4
site/layouts/partials/skippy.html
View File

@ -1,5 +1,5 @@
<a class="skippy sr-only-focusable" href="#content">Skip to main content</a>
<a class="skippy visually-hidden-focusable" href="#content">Skip to main content</a>
{{ if (eq .Page.Layout "docs") }}
<a class="skippy sr-only-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
<a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
{{- end }}