Pregunta ¿Qué es sr-only en Bootstrap 3?


¿Cuál es la clase? sr-only ¿usado para? ¿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>

622
2017-11-03 21:51


origen


Respuestas:


De acuerdo a documentación de bootstrap, la clase se usa para ocultar información destinada solo para lectores de pantalla desde el diseño de la página renderizada.

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

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 le interesa leer sobre accesibilidad:


654
2017-11-27 12:47



Como dijo JoshC, la clase se usa para ocultar la información utilizada para los lectores de pantalla. Pero no solo para ocultar las etiquetas, podría considerar ocultar al usuario con vista un enlace interno "saltar al contenido principal", que es deseable para los usuarios ciegos si tiene una navegación compleja o agrega en el encabezado de la página antes del contenido. Tendrían que presionar la tecla de flecha hacia abajo demasiadas veces para alcanzarlo con el lector de pantalla.

Si desea que su sitio interactúe aún más con lectores de pantalla, use   W3C estandarizó los atributos de ARIA y definitivamente recomiendo visitar   el Curso en línea de Google, que tomará solo hasta 1-2 horas o en   menos ver una El 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, es importante hacer que un sitio web sea accesible.


25
2018-01-03 14:07



Encontré esto en el ejemplo de navbary simplificado.

<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 es seleccionado (sr-only parte está oculta):

  • Defecto
  • Parte superior estática
  • Tapa fija

Escuchas cuál se selecciona si usas el lector de pantalla:

  • Defecto
  • Parte superior estática
  • Parte superior fija (actual)

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


21
2018-01-24 11:17



Asegura que el objeto se muestra (o debe ser) solo para lectores y dispositivos similares. Tiene más sentido en contexto con otro elemento con atributo aria-hidden = "verdadero".

<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, palabra Error: en lectores de texto.


4
2018-01-04 16:11



.sr-only es un nombre de clase específicamente utilizado para lectores de pantalla. Puedes usar cualquier nombre de clase, pero .sr-only es bastante utilizado. Si no te importa desarrollar con el cumplimiento en mente, entonces se puede eliminar. No afectará a la IU de ninguna manera si se elimina porque el CSS de 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-only para explicar su propósito y ser para lectores de pantalla. En primer lugar, es muy importante tener siempre en mente a los usuarios con problemas. Deterioro es el propósito del cumplimiento 508: https://www.section508.gov/, y es genial que bootstrap tome esto en consideración. Sin embargo, el uso de .sr-only no es todo lo que debe tenerse en cuenta para el cumplimiento 508. Puede usar el color, el tamaño de las fuentes, la accesibilidad a través de la navegación, las descripciones, el uso de aria y mucho más.

Pero en cuanto a .sr-only - ¿Qué hace CSS realmente? Hay varias variantes ligeramente diferentes de CSS usadas 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 los navegadores de escritorio y móviles envueltos con esta clase, pero lo ve 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 DOM no ve el elemento. Esta es la razón por la cual el CSS anterior usa width: 1px; height: 1px;. Mediante el uso display: none y configurar su CSS para height: 0 y width: 0, el DOM no ve el elemento y, por lo tanto, es problemático. El CSS anterior usando width: 1px; height: 1px; no es todo lo que haces para que el contenido sea invisible para los navegadores de escritorio y dispositivos móviles (sin overflow: hidden, su contenido aún se mostraría en la pantalla) y visible para los lectores de pantalla. Ocultar el contenido de los navegadores de escritorio y dispositivos móviles se realiza agregando un desplazamiento de width: 1px y height: 1px previamente mencionado al usar:

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 retransmite a su usuario afectado, desactive el diseño de página para su navegador. Para Firefox, puedes hacer esto yendo a:

View > Page Style > No Style

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


4
2018-03-08 07:34



los .sr-only clase oculta un elemento a todos los dispositivos excepto screen readers:

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


1