O que é somente sr no Bootstrap 3?

Para que serve a classe sr-only? É importante ou posso removê-lo? Funciona bem sem.

Aqui está o meu exemplo:

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

De acordo com a documentação do bootstrap , a classe é usada para ocultar informações destinadas apenas aos leitores de tela do layout da página renderizada.

Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses formulários embutidos, você pode ocultar os rótulos usando a classe somente .sr.

Aqui está um exemplo de estilo usado:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

É importante ou posso removê-lo? Funciona bem sem.

É importante, não o remova.

Você sempre deve considerar os leitores de tela para fins de acessibilidade. O uso da classe oculta o elemento de qualquer maneira, portanto, você não deve ver uma diferença visual.

Se você estiver interessado em ler sobre acessibilidade:

• Iniciativa de acessibilidade da Web (WAI)

• Documentação de acessibilidade MDN

Como JoshC disse, a classe é usada para ocultar as informações usadas pelos leitores de tela. Mas não apenas para ocultar rótulos, você pode ocultar do usuário que enxerga um link interno "pular para o conteúdo principal", o que é desejável para usuários cegos se você tiver uma navegação ou anúncios complexos antes do conteúdo principal.

Se você deseja que seu site interaja ainda mais com os leitores de tela, use os atributos ARIA padronizados do W3C e eu definitivamente recomendo visitar o curso on-line do Google , que levará apenas uma a duas horas ou pelo menos assista a um vídeo de 40 minutos do Google .

Segundo a Organização Mundial da Saúde, 285 milhões de pessoas têm problemas de visão. Portanto, tornar um site acessível é importante.

ATUALIZAÇÃO 2019:

Como desenvolvedores, devemos criar conteúdo acessível que simplesmente funcione para todos os leitores de tela prontos para uso e não especificamente para ele. Isso nem sempre é possível, mas tome cuidado ao usar os ajustes ARIA e "somente leitor de tela" . Não faça isso se você não entender completamente. A implementação incorreta pode ser muito pior do que não usá-la. Por favor, leia accessibility-developer-guide sobre os maus exemplos da ARIA . Lá você encontrará também componentes / widgets totalmente acessíveis que não requerem nenhuma intervenção "somente para o leitor de tela".

Encontrei isso no exemplo da barra de navegação e simplifiquei.

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

Você vê qual deles está selecionado (a sr-onlyparte está oculta):

• Padrão
• Topo estático
• Topo fixo

Você ouvirá qual deles está selecionado se você usar o leitor de tela:

• Padrão
• Topo estático
• Topo fixo (atual)

Como resultado dessa técnica, as pessoas cegas deveriam navegar mais facilmente em seu site.

.sr-onlyé um nome de classe usado especificamente para leitores de tela. Você pode usar qualquer nome de classe, mas .sr-onlyé bastante usado. Se você não se importa com o desenvolvimento com a conformidade em mente, ele pode ser removido. Ele não afetará a interface do usuário de nenhuma maneira se for removido porque o CSS para esta classe não é visível para navegadores de desktop e dispositivos móveis.

Parece haver algumas informações faltando aqui sobre o uso de .sr-onlypara explicar sua finalidade e ser para leitores de tela. Em primeiro lugar, é muito importante manter sempre em mente os usuários prejudicados. O comprometimento é o objetivo da conformidade com o 508: https://www.section508.gov/ , e é ótimo que o bootstrap leve isso em consideração. No entanto, o uso de .sr-onlynão é tudo o que precisa ser levado em consideração para a conformidade com o 508. Você pode usar cores, tamanho de fontes, acessibilidade via navegação, descritores, uso de árias e muito mais.

Mas quanto a .sr-only- o que o CSS realmente faz? Existem várias variantes ligeiramente diferentes do CSS usado .sr-only. Um dos poucos que eu uso está abaixo:

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

O CSS acima oculta o conteúdo dos navegadores de desktop e móveis incluídos nesta classe, mas é visto por um leitor de tela como o JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . A marcação de exemplo é a seguinte:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Além disso, se um elemento DOM tiver largura e altura 0, o elemento não será visto pelo DOM. É por isso que o CSS acima usa width: 1px; height: 1px;. Ao usar display: nonee definir seu CSS como height: 0e width: 0, o elemento não é visto pelo DOM e, portanto, é problemático. O uso de CSS acima width: 1px; height: 1px;não é tudo o que você faz para tornar o conteúdo invisível para navegadores de desktop e dispositivos móveis (sem o overflow: hiddenseu conteúdo ainda seria exibido na tela) e visível para os leitores de tela. Ocultar o conteúdo dos navegadores de desktop e móvel é feito adicionando um deslocamento width: 1pxe height: 1pxmencionado anteriormente usando:

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

Por fim, para ter uma idéia muito boa do que um leitor de tela vê e retransmite para o usuário prejudicado, desative o estilo da página no seu navegador. Para o Firefox, você pode fazer isso acessando:

View > Page Style > No Style

Espero que as informações que forneço aqui sejam mais úteis para alguém, além das outras respostas.

Garante que o objeto seja exibido (ou deva ser) apenas para leitores e dispositivos similares. Dá mais sentido no contexto de outro elemento com o 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>

O glifo será exibido em todos os outros dispositivos, palavra Erro: nos leitores de texto.

A .sr-onlyclasse oculta um elemento para todos os dispositivos, excetoscreen readers:

Ir para o conteúdo principal Combine .sr-only com .sr-only-focusable para mostrar o elemento novamente quando ele estiver focado