¿Qué es sr-only en Bootstrap 3?


748

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

Respuestas:


772

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:



2
@katranci al artículo al que hace referencia le faltan un par de puntos, por ejemplo, problemas con el contenido rtl. La respuesta aquí se ve mejor.
Christophe

1
@Christophe Todavía recomendaría ese artículo para entender el concepto. Aunque no explica los problemas con el contenido de rtl, sí enumera diferentes técnicas que también incluyenclipping
katranci

99
Para ser honesto, el lenguaje es muy confuso the class is used to hide information used for screen readers:? ¿Se esconde de los lectores de pantalla? ¿O simplemente no se muestra en el navegador? Es más claro si la documentación dice algo como "la clase sr-only indica que el elemento es solo para lectores de pantalla y no se muestra en el navegador".
Stack0verflow

2
No creo que sea confuso en absoluto, dice claramente que la clase se usa para ocultar información, que solo debe ser vista por los lectores de pantalla.
Lee

34

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


55
Un poco más de información de la OMS : "Se estima que 285 millones de personas tienen discapacidad visual en todo el mundo: 39 millones son ciegos y 246 tienen baja visión. Alrededor del 90% de las personas con discapacidad visual del mundo viven en entornos de bajos ingresos. El 82% de las personas que viven con ceguera son mayores de 50 años ".
Cato Minor

29

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.


3
¿Cómo un ciego lee ese texto actual? ¿Hay algún tipo especial de pantalla disponible para ellos?
Santosh

66
Usan un lector de pantalla, como se menciona en esta respuesta. Es un programa que lee el contenido de la pantalla, por lo tanto, "Usted escucha cuál está seleccionado si usa el lector de pantalla :".
IronSean

Puede usar la extensión de Chrome ChromeVox para obtener la experiencia del lector de pantalla. Es tan simple como eso
Hrvoje Golcic

12

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


7

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.


1
Mi impresión es que aria-label = "Error" haría lo mismo pero ¿sería más simple?
Kevin

6

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.