html - labelledby - class sr-only para que sirve

¿Qué es sr-only en Bootstrap 3?

Question

¿Para qué se usa la clase sr-only ? ¿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>

Answer 1

Asegura que el objeto se muestre (o deba) solo para lectores y dispositivos similares. Le da más sentido en contexto con otro elemento con 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, palabra Error: en lectores de texto.

Answer 2

Como dijo JoshC, la clase se utiliza para ocultar la información utilizada para los lectores de pantalla. Pero no solo para ocultar etiquetas, puede considerar ocultar al usuario vidente un enlace interno "saltar al contenido principal" que es conveniente para los usuarios ciegos si tiene una navegación compleja o agrega en el encabezado de la página antes del contenido. Deberían presionar la tecla de flecha hacia abajo demasiadas veces para alcanzarla mediante el lector de pantalla.

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

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.

Answer 3

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

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 utilizando la clase .sr-only.

Aquí hay un example 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 quites.

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 MDN

Answer 4

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>

Verá cuál está seleccionado ( sr-only parte está oculta):

• Defecto
• Parte superior estática
• Tapa 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.

Answer 5

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

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

Answer 6

.sr-only es un nombre de clase utilizado específicamente para lectores de pantalla. Puedes usar cualquier nombre de clase, pero .sr-only es bastante usado. Si no le importa desarrollarse teniendo en cuenta el cumplimiento, entonces puede eliminarlo. No afectará a la IU de ninguna manera si se elimina porque el CSS de esta clase no es visible para los navegadores de dispositivos móviles y de escritorio.

Parece que falta información sobre el uso de .sr-only para explicar su propósito y ser para los lectores de pantalla. En primer lugar, es muy importante tener siempre en mente a los usuarios discapacitados. El deterioro 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-only no es todo lo que se debe tener en cuenta para el cumplimiento 508. Puede utilizar el 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 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 de los 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 . Ejemplo de marcado 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 alto de 0, DOM no ve el elemento. Esta es la razón por la cual el CSS anterior utiliza el width: 1px; height: 1px; width: 1px; height: 1px; . Al usar display: none y configurar su CSS a 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; width: 1px; height: 1px; no es todo lo que hace para que el contenido sea invisible para los navegadores de escritorio y móviles (sin overflow: hidden , su contenido aún se mostraría en la pantalla) y visible para los lectores de pantalla. La ocultación del contenido de los navegadores de escritorio y móviles se hace agregando un desplazamiento desde el width: 1px y height: 1px mencionado anteriormente usando:

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

Por último, para tener una buena idea de lo que ve y transmite un lector de pantalla a su usuario afectado, desactive el estilo 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 utilidad adicional para alguien además de las otras respuestas.