¿Qué es solo sr en Bootstrap 3?
cual es la clasesr-only¿Para qué se utiliza¿Es importante o puedo eliminarlo? Funciona bien sin él.
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>
Según la documentación de bootstrap , la clase se utiliza para ocultar información destinada únicamente a 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.
A continuación se muestra 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 él.
Es importante, no lo quites.
Siempre debes considerar los lectores de pantalla por motivos de accesibilidad. El uso de la clase ocultará el elemento de todos modos, por lo que no deberías ver una diferencia visual.
Si estás interesado en leer sobre accesibilidad:
Iniciativa de Accesibilidad Web (WAI)
Documentación de accesibilidad de MDN
Nov 03 '2013 21:11
Como dijo JoshC, la clase .sr-onlyse usa para ocultar visualmente la información utilizada solo para lectores de pantalla. Pero no sólo para ocultar etiquetas. Podría considerar ocultar otros elementos, como el enlace "saltar al contenido principal", íconos que tienen textos alternativos, etc.
POR CIERTO. También puedes usarlo .sr-only sr-only-focusablesi necesitas que el elemento se vuelva visible cuando esté enfocado, por ejemplo, "saltar al contenido principal".
Si desea que su sitio web sea aún más accesible, le recomiendo comenzar aquí:
- Accesibilidad @Google: fundamentos web
- Guía para desarrolladores de accesibilidad (mi favorita personal)
- Principios de WebAIM + Lista de verificación WCAG de WebAIM
- Accesibilidad @ReactJS (muchos buenos recursos y material general)
¿Por qué?
Según la Organización Mundial de la Salud, 285 millones de personas tienen problemas de visión. Por eso es importante hacer que un sitio web sea accesible.
IMPORTANTE: Evite tratar de manera diferente a los usuarios discapacitados . En términos generales, trate de evitar desarrollar contenido diferente para diferentes grupos de usuarios. En su lugar, trate de hacer accesible el contenido existente para que simplemente funcione de inmediato y para todos los que no estén dirigidos específicamente, por ejemplo, a lectores de pantalla. En otras palabras, no intentes reinventar la rueda. De lo contrario, la accesibilidad resultante será a menudo peor que si no se hubiera desarrollado nada en absoluto. Los desarrolladores no debemos asumir cómo esos usuarios utilizarán nuestro sitio web. Así que tenga mucho cuidado cuando necesite desarrollar este tipo de soluciones. Obviamente, un "enlace para saltar" es un buen ejemplo de dicho contenido si se hace visible cuando se enfoca. Pero también hay muchos malos ejemplos. Esto sería ocultar a un lector de pantalla un botón de "zoom" en el mapa, asumiendo que no tiene relevancia para los usuarios ciegos. Pero, sorprendentemente, ¡los usuarios ciegos utilizan una función de zoom! Les gusta descargar imágenes como a muchos otros usuarios (incluso en alta resolución), para enviárselas a otra persona o para utilizarlas en algún otro contexto. Fuente - Leer más @ADG: Malas prácticas de ARIA
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-onlyla parte está oculta):
- Por defecto
- Tapa estática
- Parte superior fija
Escucha cuál está seleccionado si usa el lector de pantalla:
- Por defecto
- Tapa estática
- Parte superior fija (actual)
Como resultado de esta técnica, se supone que las personas ciegas navegarán más fácilmente en su sitio web.
Jan 03 '2015 14:01
.sr-onlyes un nombre de clase utilizado específicamente para lectores de pantalla. Puede utilizar cualquier nombre de clase, pero .sr-onlyse utiliza con bastante frecuencia. Si no le interesa desarrollar teniendo en cuenta el cumplimiento, puede eliminarlo. No afectará la interfaz de usuario de ninguna manera si se elimina porque el CSS de esta clase no es visible para los navegadores de escritorio y de dispositivos móviles.
Parece que falta información aquí sobre el uso de .sr-onlypara explicar su propósito y su uso para lectores de pantalla. En primer lugar, es muy importante tener siempre en cuenta a los usuarios discapacitados. El deterioro es el propósito del cumplimiento de 508: https://www.section508.gov/ , y es fantástico que bootstrap tenga esto en cuenta. Sin embargo, el uso de .sr-onlyno es todo lo que se debe tener en cuenta para cumplir con 508. Tienes el uso de color, tamaño de fuente, accesibilidad mediante navegación, descriptores, 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 que se utilizan para .sr-only. Uno de los pocos que uso es el siguiente:
.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 contenido en navegadores de escritorio y móviles incluidos en 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 alto de 0, el DOM no ve el elemento. Es por eso que el CSS anterior usa width: 1px; height: 1px;. Al usar display: noney configurar su CSS en height: 0y width: 0, el DOM no ve el elemento y, por lo tanto, es problemático. El uso de CSS anterior width: 1px; height: 1px;no es todo lo que debe hacer para hacer que el contenido sea invisible para los navegadores de escritorio y móviles (sin overflow: hidden, su contenido aún se mostrará en la pantalla) y visible para los lectores de pantalla. Ocultar el contenido de los navegadores de escritorio y móviles se realiza agregando un desplazamiento de width: 1pxlo height: 1pxmencionado anteriormente mediante el uso:
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 discapacitado, desactive el estilo de página en 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.
