Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why doesn't use `.sr-only` in spinner?

See original GitHub issue

https://twbs-bootstrap4.netlify.com/docs/4.1/components/spinners/#about

For accessibility purposes, …, using a text hiding technique to prevent it from rendering on screen.

Text hide technique is not a modern approach (#24890). IMO we should use .sr-only to hide Loading... text:

<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>

Issue Analytics

State:
Created 5 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

2reactions

ysdscommented, Nov 28, 2018

Leave it to me 🙂

0reactions

XhmikosRcommented, Nov 28, 2018

Can someone make a PR?

Top Results From Across the Web

What is sr-only in Bootstrap 3? - Stack Overflow

sr-only means "this content is visible only to screen readers". If you are using the site with working eyes, you don't apply. Try...

Screen Reader utilities in bootstrap with Examples

.sr-only: This class hides an element in all devices except for the Screen Readers. ·.sr-only-focusable: If this class is used on an hidden ......

Bootstrap spinners not working : r/csshelp - Reddit

Hi all, I'm learning bootstrap, and have copied the most basic code for a spinner from their documentation : inside the tag I...

Why and How the Bootstrap sr-only Class is Used - W3docs

According to the Bootstrap documentation, the sr-only class is used to hide information that is intended only for screen readers from the layout...

Accessibility | Reference - BootstrapVue

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class....