¿Qué es sr-only en Bootstrap 3?

¿Para qué se sr-onlyusa la clase ? ¿Es importante o puedo eliminarlo? Funciona bien sin.

Aquí está mi ejemplo:

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

De acuerdo con la documentación de bootstrap , la clase se usa para ocultar información destinada solo para lectores de pantalla del diseño de la página representada.

Los lectores de pantalla tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la clase .sr-only.

Aquí hay un ejemplo de estilo utilizado:

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

¿Es importante o puedo eliminarlo? Funciona bien sin.

Es importante, no lo elimines.

Siempre debe considerar los lectores de pantalla para fines de accesibilidad. El uso de la clase ocultará el elemento de todos modos, por lo tanto, no debería ver una diferencia visual.

Si estás interesado en leer sobre accesibilidad:

• Iniciativa de Accesibilidad Web (WAI)

• Documentación de accesibilidad de MDN

Como dijo JoshC, la clase se usa para ocultar información utilizada para lectores de pantalla. Pero no solo para ocultar etiquetas, puede considerar ocultar a los usuarios videntes un enlace interno "saltar al contenido principal" que es deseable para usuarios ciegos si tiene una navegación compleja o anuncios antes del contenido principal.

Si desea que su sitio interactúe aún más con los lectores de pantalla, use los atributos ARIA estandarizados del W3C y definitivamente recomiendo visitar el curso en línea de Google , que tomará solo de 1 a 2 horas o al menos verá un video de 40 minutos de Google .

Según la Organización Mundial de la Salud, 285 millones de personas tienen problemas de visión. Por lo tanto, hacer un sitio web accesible es importante.

ACTUALIZACIÓN 2019:

Como desarrolladores, deberíamos hacer contenido accesible que simplemente funcione para todos los lectores listos para usar y no específicamente para lectores de pantalla. Eso no siempre es posible, pero tenga cuidado al usar ARIA y los ajustes de "solo lector de pantalla" . No lo hagas si no lo entiendes completamente. La implementación incorrecta puede ser mucho peor que no usarla en absoluto. Lea la guía para desarrolladores de accesibilidad sobre los ejemplos incorrectos de ARIA . Allí también encontrará componentes / widgets totalmente accesibles que no requieren ninguna intervención de "solo lector de pantalla".

Encontré esto en el ejemplo de la barra de navegación y lo simplifiqué.

<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>

Usted ve cuál está seleccionado (la sr-onlyparte está oculta):

• Defecto
• Parte superior estática
• Parte superior fija

Escuchará cuál está seleccionado si usa el lector de pantalla:

• Defecto
• Parte superior estática
• Superior fijo (actual)

Como resultado de esta técnica, las personas ciegas deben navegar más fácilmente en su sitio web.

.sr-onlyes un nombre de clase utilizado específicamente para lectores de pantalla. Puede usar cualquier nombre de clase, pero .sr-onlyse usa con bastante frecuencia. Si no le importa desarrollar con el cumplimiento en mente, puede eliminarlo. No afectará la interfaz de usuario de ninguna manera si se elimina porque el CSS para esta clase no es visible para los navegadores de escritorio y dispositivos móviles.

Parece que falta información aquí sobre el uso de .sr-onlypara explicar su propósito y ser para lectores de pantalla. En primer lugar, es muy importante tener siempre en cuenta a los usuarios con discapacidad. La discapacidad es el propósito del cumplimiento 508: https://www.section508.gov/ , y es genial que bootstrap tenga esto en cuenta. Sin embargo, el uso de .sr-onlyno es todo lo que debe tenerse en cuenta para el cumplimiento 508. Tiene el uso del color, el tamaño de las fuentes, la accesibilidad a través de la navegación, los descriptores, el uso de aria y mucho más.

Pero en cuanto a .sr-only, ¿qué hace realmente el CSS? Hay varias variantes ligeramente diferentes del CSS utilizado para .sr-only. Uno de los pocos que uso está a continuación:

.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;
    }

El CSS anterior oculta el contenido en navegadores de escritorio y móviles envueltos con esta clase, pero es visto por un lector de pantalla como JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . El marcado de ejemplo es el siguiente:

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

Además, si un elemento DOM tiene un ancho y una altura de 0, el elemento no es visto por el DOM. Es por eso que usa el CSS anterior width: 1px; height: 1px;. Al usar display: noney configurar su CSS en height: 0y width: 0, el elemento no es visto por el DOM y, por lo tanto, es problemático. El uso de CSS anterior width: 1px; height: 1px;no es todo lo que hace para hacer que el contenido sea invisible para los navegadores de escritorio y móviles (sin que overflow: hiddensu contenido aún se muestre en la pantalla), y visible para los lectores de pantalla. La ocultación del contenido de los navegadores de escritorio y móviles se realiza agregando un desplazamiento width: 1pxy height: 1pxmencionado anteriormente mediante el uso de:

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

Por último, para tener una muy buena idea de lo que un lector de pantalla ve y transmite a su usuario con problemas, desactive el estilo de página para su navegador. Para Firefox, puede hacer esto yendo a:

View > Page Style > No Style

Espero que la información que proporcioné aquí sea de utilidad para alguien además de las otras respuestas.

Asegura que el objeto se muestre (o debería ser) solo para lectores y dispositivos similares. Tiene más sentido en contexto con otro elemento con el atributo 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>

Glyphicon se mostrará en todos los demás dispositivos, error de palabra : en lectores de texto.

La .sr-onlyclase oculta un elemento a todos los dispositivos exceptoscreen readers:

Saltar al contenido principal Combine .sr-only con .sr-only-focusable para mostrar el elemento nuevamente cuando está enfocado