CSS display:none acessível aos leitores de tela

Postado por: Pedro Rogério em

Quando estamos desenvolvendo um site, é habitual e recomendável utilizar-mos links para pular entre seções para aqueles que utilizam leitores de tela possam navegar rapidamente entre as várias seções da página sem ter que esperar que a mesma seja lida totalmente. Por exemplo, é recomendado criar-mos links que saltem do menu ao conteúdo para que o mesmo não seja lido várias vezes dentro de um mesmo site.

Esses links ficam invisíveis para aqueles que usam navegadores normais. A técnica mais usada é a propriedade display:none.


.oculto {
    display:none
}

Logo, o HTML fica da seguinte forma:


<a class="oculto" href="conteudo">Ir ao conteúdo</a>

Só que existe um problema que alguns leitores de tela não lêem conteúdo oculto com essa propriedade, e outros lêem normalmente, quer dizer, o link está alí para proporcionar ajuda as pessoas e não é lido. Existe uma outra técnica para acabar com esse problema que visa garantir uma maior compatibilidade. Ao invés de display:none, usamos o seguinte:


.oculto {
    position: absolute;
    top: -1600px;
}

Simples, agora você tem a certeza de que o conteúdo estará disponível a todos os leitores de tela.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

One Response to “CSS display:none acessível aos leitores de tela”

  1. E dessa forma so quem usa leitor de tela tem o site acessivel. quem acessa sem mouse fica na mesma :/

Leave a Reply