diff options
21 files changed, 104 insertions, 99 deletions
diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 0c8dd482e5..901f83d0c3 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -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> diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index d66f140531..90d9a03666 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -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> diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 0b54a125a6..a7ceb32e21 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -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> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index fa043af00e..b72e8c4ef7 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -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> diff --git a/scss/helpers/_screenreaders.scss b/scss/helpers/_screenreaders.scss index c8034d10ee..8bade66339 100644 --- a/scss/helpers/_screenreaders.scss +++ b/scss/helpers/_screenreaders.scss @@ -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(); } diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index b25fe73046..e5ee63c094 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -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(); } } diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 5f17b685b6..475eb75f06 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -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 >}} diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 935779238c..b0de24cce3 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -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 >}} diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 02f4eaeecb..deb86c1fbf 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -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> diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md index 7fb960e55c..076c314101 100644 --- a/site/content/docs/5.0/components/pagination.md +++ b/site/content/docs/5.0/components/pagination.md @@ -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> diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md index 84a26330a0..fc9cd4e57a 100644 --- a/site/content/docs/5.0/components/spinners.md +++ b/site/content/docs/5.0/components/spinners.md @@ -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> diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index e5b9f46494..d95f35d28c 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -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> diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html index c49ad12b0a..acd5b48354 100644 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ b/site/content/docs/5.0/examples/sign-in/index.html @@ -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> diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index 87b5c4ace3..3f10138e99 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -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"> diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md index 5d0e13ac24..3ec1f6cb04 100644 --- a/site/content/docs/5.0/forms/input-group.md +++ b/site/content/docs/5.0/forms/input-group.md @@ -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. diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md index 30aad7717c..a97a7e9e5a 100644 --- a/site/content/docs/5.0/forms/layout.md +++ b/site/content/docs/5.0/forms/layout.md @@ -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 >}} diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index 027ce8a214..022efcc203 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -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 diff --git a/site/content/docs/5.0/helpers/screen-readers.md b/site/content/docs/5.0/helpers/screen-readers.md index 501b9c311c..fd9ca88879 100644 --- a/site/content/docs/5.0/helpers/screen-readers.md +++ b/site/content/docs/5.0/helpers/screen-readers.md @@ -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 >}} diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 6499846a15..7525fc57f6 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -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 diff --git a/site/layouts/partials/callout-warning-color-assistive-technologies.md b/site/layouts/partials/callout-warning-color-assistive-technologies.md index f0c2e9de53..35683281d6 100644 --- a/site/layouts/partials/callout-warning-color-assistive-technologies.md +++ b/site/layouts/partials/callout-warning-color-assistive-technologies.md @@ -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. diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html index a060e714b0..8dce2bc495 100644 --- a/site/layouts/partials/skippy.html +++ b/site/layouts/partials/skippy.html @@ -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 }} |