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