O que é apenas sr no Bootstrap 3?

Para que é utilizada a classe sr-only? É importante ou posso removê-la? Funciona bem sem.

Aqui'é 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>
bzeaman
Pergunta editada :em
Programação
html css twitter-bootstrap-3 twitter-bootstrap
3º novembro 2013 в 9:51
9 vistas
Solução

De acordo com bootstrap's documentation, a classe é usada para ocultar informações destinadas apenas para ** leitores de tela*** a partir do layout da página renderizada.

Os leitores de tela terão problemas com seus formulários se você não'não incluir uma etiqueta para cada entrada. Para esses formulários em linha, você pode esconder as etiquetas usando a classe .sr-only.

Aqui está um [exemplo][2] estilo utilizado:

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

It's important, don't remove it.

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

Se você'está interessado em ler sobre acessibilidade:

Pro Q
Resposta editada :em
Comentários (9)

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

Se você quiser que seu site interaja ainda mais com leitores de tela, use atributos ARIA padronizados do W3C e eu definitivamente recomendo a visita o curso online do Google, que só demorará até 1-2h ou em assista pelo menos um [Google's 40min de vídeo][2].

De acordo com a Organização Mundial de Saúde, 285 milhões de pessoas têm deficiências visuais. Portanto, tornar um site acessível é importante.

ATUALIZAÇÃO 2019:

Como desenvolvedores, devemos tornar acessível o conteúdo que simplesmente funciona para todos os leitores de tela, e não especificamente para os leitores de tela. Isso's nem sempre é possível, mas **tomem cuidado usando ARIA e "apenas leitor de tela" ajustes***. Don'não o faça se você não'não o entender totalmente. A implementação incorreta pode ser muito pior do que não usá-lo de qualquer forma. Por favor leia accessibility-developer-guide on ARIA bad examples. Lá você encontrará também componentes/widgets totalmente acessíveis que não requerem nenhum "somente leitor de tela" intervenções.

Hrvoje Golcic
Resposta editada :em
Comentários (1)

Encontrei isto no exemplo navbar, e simplifiquei-o.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><a>Fixed top <span class="sr-only">(current)</span></a></li>
</ul>

Você vê qual deles está selecionado (a parte sr-only está escondida):

  • Predefinição
  • Tampo estático
  • **Topa fixa***

Você ouve qual deles é selecionado se você usar o leitor de tela:

  • Predefinição
  • Tampo estático
  • Tampo fixo (corrente)

Como resultado desta técnica, as pessoas cegas devem navegar mais facilmente no seu site.

Comentários (3)