¿Qué es sr-only en Bootstrap 3?

¿Para qué sirve la clase sr-only? ¿Es importante o puedo eliminarla? Funciona bien sin ella.

Este es 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>
bzeaman
Pregunta editada 16º agosto 2016 в 9:01
Programación
html css twitter-bootstrap-3 twitter-bootstrap
3º noviembre 2013 в 9:51
19 vistas
Solución

Según la documentación de bootstrap, la clase se utiliza para ocultar la información destinada únicamente a los lectores de pantalla del diseño de la página renderizada.

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

Aquí hay un [ejemplo][2] 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 quitarlo? Funciona bien sin él.

Es importante, no lo quites.

Siempre hay que tener en cuenta los lectores de pantalla para la accesibilidad. El uso de la clase ocultará el elemento de todos modos, por lo que no debería ver una diferencia visual.

Si estás interesado en leer sobre accesibilidad:

Pro Q
Respuesta editada 2º mayo 2019 в 9:28
Comentarios (9)

Como dijo JoshC, la clase se utiliza para ocultar la información utilizada por los lectores de pantalla. Pero no sólo para ocultar las etiquetas, usted podría considerar para ocultar de usuario vidente un enlace interno "saltar al contenido principal", que es deseable para los usuarios ciegos si usted tiene una navegación compleja o anuncios antes del contenido principal.

Si quiere que su sitio interactúe aún más con los lectores de pantalla, utilice los atributos ARIA estandarizados por el W3C y definitivamente recomiendo visitar el curso online de Google, que sólo le llevará 1-2h o al menos ver un [video de 40min de Google][2].

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

ACTUALIZACIÓN 2019:

Como desarrolladores debemos hacer un contenido accesible que simplemente funcione para todos out-of-the-box y no se dirija específicamente a los lectores de pantalla. Eso no siempre es posible, pero tenga cuidado al usar ARIA y ajustes "sólo para lectores de pantalla ". No lo hagas si no lo entiendes bien. Una implementación incorrecta puede ser mucho peor que no usarla en absoluto. Por favor, lea accessibility-developer-guide on ARIA bad examples. Allí encontrará también componentes/widgets totalmente accesibles que no requieren ninguna intervención "sólo para lectores de pantalla".

Hrvoje Golcic
Respuesta editada 20º noviembre 2019 в 8:16
Comentarios (1)

Encontré esto en el ejemplo de navbar, y lo simplifiqué.

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

Se ve cuál está seleccionado (la parte sr-only está oculta):

  • Por defecto
  • Parte superior estática
  • Tipos fijos

Se escucha cuál es la seleccionada si se utiliza el lector de pantalla:

  • Por defecto
  • Parte superior estática
  • Parte superior fija (actual)

Como resultado de esta técnica, se supone que las personas ciegas navegan más fácilmente en su sitio web.

Comentarios (3)