O que é somente sr no Bootstrap 3?


748

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>

Respostas:


772

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:



2
@katranci O artigo que você mencionou está faltando alguns pontos, por exemplo, problemas com o conteúdo rtl. A resposta aqui parece melhor.
Christophe

1
@Christophe Eu ainda recomendaria esse artigo para entender o conceito. Mesmo que não explique os problemas com o conteúdo rtl, ele lista técnicas diferentes, que também incluemclipping
#

9
Para ser honesto, a linguagem é muito confusa the class is used to hide information used for screen readers:? Esconde-se dos leitores de tela? Ou simplesmente não é exibido no navegador? É mais claro se a documentação diz algo como "a classe sr-only indica que o elemento é apenas para leitores de tela e não é exibido no navegador".
Stack0verflow

2
Eu não acho nada confuso, diz claramente que a classe é usada para ocultar informações, que devem ser vistas apenas pelos leitores de tela.
Lee

34

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


5
Um pouco mais de informações da OMS : "Estima-se que 285 milhões de pessoas com deficiência visual em todo o mundo: 39 milhões são cegas e 246 têm baixa visão. Cerca de 90% das pessoas com deficiência visual do mundo vivem em ambientes de baixa renda. 82% das pessoas que vivem com cegueira são com 50 anos ou mais. "
Cato Minor

29

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.


3
Como um cego lê esse texto atual? Existe um tipo especial de tela disponível para eles?
Santosh

6
Eles usam um leitor de tela, como mencionado nesta resposta. É um programa que lê o conteúdo da tela, portanto "Você ouve qual é selecionado se usar o leitor de tela :".
IronSean

Você pode usar a extensão ChromeVox para obter a experiência do leitor de tela. É simples assim
Hrvoje Golcic 20/11/19

12

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


7

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.


1
Minha impressão é que ária-label = "Erro" faria a mesma coisa, mas seria mais simples?
Kevin

6

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.