Rectangle 27 602

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

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.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

@katranci the article you reference is missing a couple points, for example issues with rtl content. The answer here looks better.

@Christophe I would still recommend that article for understanding the concept. Even though it doesn't explain the problems with rtl content it does list different techniques which also includes clipping

To be honest, the language is very confusing: the class is used to hide information used for screen readers? Does it hide from screen readers? Or it is simply not displayed in the browser? It is clearer if the documentation says something like "the sr-only class indicates that the element is for screen-readers only, and is not displayed in the browser".

I don't think it's confusing at all, it clearly says the class is used for information to be hidden, that is only meant to be seen by screen readers.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 590

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

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.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

@katranci the article you reference is missing a couple points, for example issues with rtl content. The answer here looks better.

@Christophe I would still recommend that article for understanding the concept. Even though it doesn't explain the problems with rtl content it does list different techniques which also includes clipping

To be honest, the language is very confusing: the class is used to hide information used for screen readers? Does it hide from screen readers? Or it is simply not displayed in the browser? It is clearer if the documentation says something like "the sr-only class indicates that the element is for screen-readers only, and is not displayed in the browser".

I don't think it's confusing at all, it clearly says the class is used for information to be hidden, that is only meant to be seen by screen readers.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 586

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

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.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

@katranci the article you reference is missing a couple points, for example issues with rtl content. The answer here looks better.

@Christophe I would still recommend that article for understanding the concept. Even though it doesn't explain the problems with rtl content it does list different techniques which also includes clipping

To be honest, the language is very confusing: the class is used to hide information used for screen readers? Does it hide from screen readers? Or it is simply not displayed in the browser? It is clearer if the documentation says something like "the sr-only class indicates that the element is for screen-readers only, and is not displayed in the browser".

I don't think it's confusing at all, it clearly says the class is used for information to be hidden, that is only meant to be seen by screen readers.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 3

.sr-only is a class name specifically used for screen readers. You can use any class name, but .sr-only is pretty commonly used. If you don't care about developing with compliance in mind, then it can be removed. It will not affect UI in any way if removed because the CSS for this class is not visible to desktop and mobile device browsers.

There seems to be some information missing here about the use of .sr-only to explain its purpose and being for screen readers. First and foremost, it is very important to always keep impaired users in mind. Impairment is the purpose of 508 compliance: https://www.section508.gov/, and it is great that bootstrap takes this into consideration. However, the use of .sr-only is not all that needs to be taken into consideration for 508 compliance. You have the use of color, size of fonts, accessibility via navigation, descriptors, use of aria and so much more.

But as for .sr-only - what does the CSS actually do? There are several slightly different variants of the CSS used for .sr-only. One of the few I use is below:

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

The above CSS hides content in desktop and mobile browsers wrapped with this class, but is seen by a screen reader like JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Example markup is as follows:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. This is why the above CSS uses width: 1px; height: 1px;. By using display: none and setting your CSS to height: 0 and width: 0, the element is not seen by the DOM and is thus problematic. The above CSS using width: 1px; height: 1px; is not all you do to make the content invisible to desktop and mobile browsers (without overflow: hidden, your content would still show on the screen), and visible to screen readers. Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1px and height: 1px previously mentioned by using:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. For Firefox, you can do this by going to:

View > Page Style > No Style

I hope the information I provided here is of further use to someone in addition to the other responses.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 3

.sr-only is a class name specifically used for screen readers. You can use any class name, but .sr-only is pretty commonly used. If you don't care about developing with compliance in mind, then it can be removed. It will not affect UI in any way if removed because the CSS for this class is not visible to desktop and mobile device browsers.

There seems to be some information missing here about the use of .sr-only to explain its purpose and being for screen readers. First and foremost, it is very important to always keep impaired users in mind. Impairment is the purpose of 508 compliance: https://www.section508.gov/, and it is great that bootstrap takes this into consideration. However, the use of .sr-only is not all that needs to be taken into consideration for 508 compliance. You have the use of color, size of fonts, accessibility via navigation, descriptors, use of aria and so much more.

But as for .sr-only - what does the CSS actually do? There are several slightly different variants of the CSS used for .sr-only. One of the few I use is below:

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

The above CSS hides content in desktop and mobile browsers wrapped with this class, but is seen by a screen reader like JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Example markup is as follows:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. This is why the above CSS uses width: 1px; height: 1px;. By using display: none and setting your CSS to height: 0 and width: 0, the element is not seen by the DOM and is thus problematic. The above CSS using width: 1px; height: 1px; is not all you do to make the content invisible to desktop and mobile browsers (without overflow: hidden, your content would still show on the screen), and visible to screen readers. Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1px and height: 1px previously mentioned by using:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. For Firefox, you can do this by going to:

View > Page Style > No Style

I hope the information I provided here is of further use to someone in addition to the other responses.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 3

.sr-only is a class name specifically used for screen readers. You can use any class name, but .sr-only is pretty commonly used. If you don't care about developing with compliance in mind, then it can be removed. It will not affect UI in any way if removed because the CSS for this class is not visible to desktop and mobile device browsers.

There seems to be some information missing here about the use of .sr-only to explain its purpose and being for screen readers. First and foremost, it is very important to always keep impaired users in mind. Impairment is the purpose of 508 compliance: https://www.section508.gov/, and it is great that bootstrap takes this into consideration. However, the use of .sr-only is not all that needs to be taken into consideration for 508 compliance. You have the use of color, size of fonts, accessibility via navigation, descriptors, use of aria and so much more.

But as for .sr-only - what does the CSS actually do? There are several slightly different variants of the CSS used for .sr-only. One of the few I use is below:

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

The above CSS hides content in desktop and mobile browsers wrapped with this class, but is seen by a screen reader like JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Example markup is as follows:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Additionally, if a DOM element has a width and height of 0, the element is not seen by the DOM. This is why the above CSS uses width: 1px; height: 1px;. By using display: none and setting your CSS to height: 0 and width: 0, the element is not seen by the DOM and is thus problematic. The above CSS using width: 1px; height: 1px; is not all you do to make the content invisible to desktop and mobile browsers (without overflow: hidden, your content would still show on the screen), and visible to screen readers. Hiding the content from desktop and mobile browsers is done by adding an offset from width: 1px and height: 1px previously mentioned by using:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

Lastly, to have a very good idea of what a screen reader sees and relays to its impaired user, turn off page styling for your browser. For Firefox, you can do this by going to:

View > Page Style > No Style

I hope the information I provided here is of further use to someone in addition to the other responses.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 25

As JoshC said, the class is used to hide information used for screen readers. But not only to hide labels, you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or adds in the page header before the content. They would need to press arrow down key for too many times to reach it by screen reader.

If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course, which will take only up to 1-2h or at least watch a Google's 40min video.

According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.

Slightly more WHO info: "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. About 90% of the world's visually impaired live in low-income settings. 82% of people living with blindness are aged 50 and above."

Billions of men are red-green colour deficient but whenever I object to the use of colour to convey safety relevant machine status information, I just get stared at and then people pretend I haven't spoken.

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 23

As JoshC said, the class is used to hide information used for screen readers. But not only to hide labels, you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or adds in the page header before the content. They would need to press arrow down key for too many times to reach it by screen reader.

If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course, which will take only up to 1-2h or at least watch a Google's 40min video.

According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.

Slightly more WHO info: "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. About 90% of the world's visually impaired live in low-income settings. 82% of people living with blindness are aged 50 and above."

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 22

As JoshC said, the class is used to hide information used for screen readers. But not only to hide labels, you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or adds in the page header before the content. They would need to press arrow down key for too many times to reach it by screen reader.

If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course, which will take only up to 1-2h or at least watch a Google's 40min video.

According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.

Slightly more WHO info: "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. About 90% of the world's visually impaired live in low-income settings. 82% of people living with blindness are aged 50 and above."

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 20

I found this in the navbar example, and simplified it.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
sr-only

As a result of this technique blind people supposed to navigate easier on your website.

How a blind people read that current text ? Is there special kind of screen available for them ?

They use a screen reader, as mentioned in this answer. It's a program that reads the screen content, hence "You hear which one is selected if you use screen reader:".

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 18

I found this in the navbar example, and simplified it.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
sr-only

As a result of this technique blind people supposed to navigate easier on your website.

How a blind people read that current text ? Is there special kind of screen available for them ?

They use a screen reader, as mentioned in this answer. It's a program that reads the screen content, hence "You hear which one is selected if you use screen reader:".

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 18

I found this in the navbar example, and simplified it.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
sr-only

As a result of this technique blind people supposed to navigate easier on your website.

How a blind people read that current text ? Is there special kind of screen available for them ?

They use a screen reader, as mentioned in this answer. It's a program that reads the screen content, hence "You hear which one is selected if you use screen reader:".

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 1

The .sr-only class hides an element to all devices except screen readers:

Skip to main content Combine .sr-only with .sr-only-focusable to show the element again when it is focused

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 1

The .sr-only class hides an element to all devices except screen readers:

Skip to main content Combine .sr-only with .sr-only-focusable to show the element again when it is focused

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 1

The .sr-only class hides an element to all devices except screen readers:

Skip to main content Combine .sr-only with .sr-only-focusable to show the element again when it is focused

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 4

Ensures that the object is displayed (or should be) only to readers and similar devices. It give more sense in context with other element with attribute aria-hidden="true".

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

My impression is that aria-label="Error" would do the same thing but be simpler?

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 4

Ensures that the object is displayed (or should be) only to readers and similar devices. It give more sense in context with other element with attribute aria-hidden="true".

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

My impression is that aria-label="Error" would do the same thing but be simpler?

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 4

Ensures that the object is displayed (or should be) only to readers and similar devices. It give more sense in context with other element with attribute aria-hidden="true".

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

My impression is that aria-label="Error" would do the same thing but be simpler?

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

html css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 14

As stated by others, the filename bootstrap-theme.css is very confusing. I would have chosen something like bootstrap-3d.css or bootstrap-fancy.css which would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.

With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.

Bootstrap-theme.css is generated from the theme.less file in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):

@import "variables.less";
@import "mixins.less";

The code uses colors defined in variables.less in several places, for example:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.

The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.

Building Bootstrap may sound daunting, but it is actually very simple:

  • Download the Bootstrap source code
  • Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
  • Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.

Done. See, that was easy, wasn't it?

html - How to use bootstrap-theme.css with bootstrap 3? - Stack Overfl...

html css twitter-bootstrap-3
Rectangle 27 10

If I understand you correctly, Adding this after any media queries overrides the width restrictions on the default grids. Works for me on bootstrap 3 where I needed a 100% width layout

.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }

Then you can put your row and grid elements inside the container.

html - How to make bootstrap 3 fluid layout without horizontal scrollb...

html twitter-bootstrap twitter-bootstrap-3