Usar “left: -9999px” ao invés de “display: none”? Mas por quê? – html css html5

5 Dezembro, 2018 admin 0 Comments css, css3, html, html5

Pergunta:

Eu comecei a me questionar sobre esse assunto a pouco tempo atrás. Li em algum artigo, que não lembro qual é, que por “questão de visibilidade” ao invés de usar display: none ou visibility: hidden deveria ser usado um left: -9999px.

Vi algo similar nesse artigo e nesse, que parece referir esse uso devido aos “screen readers”.

Eu não entendi muito bem o sentido disso e, inclusive, já vi alguma biblioteca ou algum site fazendo um uso de left: -9999px ao invés de display:none.

Qual é o sentido de alguém usar left: -9999px ao invés de display:none, visibility:hidden e afins?

Autor da pergunta Wallace Maxters

hugocsl

Wallace a WebAIM tem um excelente artigo sobre justamente as técnicas para deixar o conteúdo visível apenas para os screen readers. Inclusive se vc der TAB no site deles vc vai ver que aparece um Botão no topo para pular parte do conteúdo do site etc. Nesse botão ele usa uma técnica desse tipo para tira-lo da tela. O left:-10000px deixa o elemento no fluxo da página, porém fora da tela.

Sobre o Display:none Palavras do WebAIM

visibility: hidden; and/or display:none;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don’t want read by screen readers.

“visibility: hidden; and/or display:none;
Esses estilos vão esconder o texto de todos os usuários. O texto é removido do fluxo visual da página e ignorado pelos leitores de tela. Não use este CSS se quiser que o conteúdo seja lido por um leitor de tela. Mas você o usa para conteúdo que não deseja ler pelos leitores de tela.“

Fonte: https://webaim.org/techniques/css/invisiblecontent/

Agora segundo esse artigo vc pode ver que existe uma inconsistência de como os leitores de tela entendem o display:none Alguns Leitores ignoram tudo com esse display, já outros dependendo do contexto mesmo com o display:none o conteúdo será lido.

I had noticed recently that JAWS announces span elements hidden with display: none in anchor elements, but that the span was not announced by Window-Eyes.

“Notei recentemente que o JAWS anuncia elementos de span ocultos com display: none em elementos âncora, mas que o span não foi anunciado pelo Window-Eyes.“

Fonte: http://juicystudio.com/article/screen-readers-display-none.php

Display:none

Nos navegadores com suporte, o conteúdo não é exibido para nenhum usuário.
O conteúdo focável não está incluído na ordem de leitura.
Não incluído na árvore de acessibilidade (exceto para o IE)
No IE, o conteúdo tem um estado MSAA acessível (se suportado) de invisível.

Fonte: https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

Abordagem do Bootstrap: O Bootstrap tem uma classe específica para esconder conteúdo na tela, mas continuar mostrando para os leitores de tela. sr-only

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

https://getbootstrap.com/docs/4.0/getting-started/accessibility/#visually-hidden-content

DICA: Não use a propriedade hidden do HTML

The hidden attribute must not be used to hide content just from one
presentation —if something is marked hidden, it is hidden from all
presentations, including, for instance, screen readers.

” O atributo hidden não deve ser usado para ocultar conteúdo apenas de uma apresentação – se algo estiver marcado como hidden, ele estará oculto em todas as apresentações, incluindo, por exemplo, leitores de tela.“

Fonte oficial W3C: http://w3c.github.io/html/editing.html#the-hidden-attribute

Então creio eu que propriedades como:

left: -9999px usada para recuar da tela (ou do box-model de um elemento) um ou mais elementos
text-indent: -9999px usado para recuar o texto da tela (ou do box-model de um elemento)

São usadas para apenas em alguns casos específicos, aonde as pessoas desejam que os chamados leitores de tela (acessibilidade) funcionem para deficientes visuais, claro que nem sempre é feito um bom serviço por parte do desenvolvedor nisto ou simplesmente a intenção é esconder algo por outro motivo, por exemplo um logotipo que use background-image ao invés de <img alt="">, isto no caso de text-indent

No entanto o caso de uso mais provável do left: -9999px é que ele ainda é acessível via TAB, no entanto a “técnica” requer o position: absolute;, o que faz o espaço aonde o elemento se encontra “parecer” estar livre, exemplo:

.container {
    width: 400px;
    height: 200px;
    border: 1px #c0c0c0 solid;
}
.hide-left {
   position: absolute;
   left: -9999px;
   top: -9999px;
}

<div class="container">
    <p>Hello, Wallace!</p>
    <div class="hide-left">
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
    </div>
    <p>Bye, Wallace!</p>
</div>

Agora observer como ficou diferente com visibility: hidden;

.container {
    width: 400px;
    height: 200px;
    border: 1px #c0c0c0 solid;
}
.hide-visibility {
   visibility: hidden;
}

<div class="container">
    <p>Hello, Wallace!</p>
    <div class="hide-visibility">
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
         foo bar foo bar foo bar foo bar<br>
    </div>
    <p>Bye, Wallace!</p>
</div>

Já o display: none; não será acessível e também não ocupará o espaço.

Concluindo sobre o uso

Não dá pra afirmar um uso especifico para left: -9999px;, mas o motivo será realmente este, apesar do elemento não aparecer na tela, pois ficará fora do limite ainda sim ele será acessível, também note que se um elemento parent estiver com position: relative;, o left e top do elemento que esta tentando ocultar ficarão realmente relativos a este parent

Um exemplo de “necessidade” que poderiamos ter seria tooltip sem JavaScript, ou seja um tooltipo com CSS puro, assim:

Nota: Pessoalmente penso que usar apenas left ou apenas top esteja de bom tamanho, ambos não é algo necessário

.tooltip {
    text-decoration: underline;
    position: relative;
    display: inline-block;
}
.tooltip > .tooltip-inner {
     position: absolute;
     top: -9999px;
     width: 100px;
     background: rgba(0,0,0,0.7);
     color: #fff;
     padding: 5px;
     border-radius: 2px;
}
.tooltip:hover > .tooltip-inner {
    top: 100%;
}

<div>
Mussum Ipsum, cacilds vidis <span class="tooltip">litro <div class="tooltip-inner">Litro é a melhor coisa pra matar a saudade desse grande humorista</div></span> abertis. Pra lá, depois divoltis porris, paradis. Delegadis gente finis, bibendum egestas augue arcu ut est. Suco de cevadiss deixa as pessoas mais interessantis. Viva <span class="tooltip">Forevis <div class="tooltip-inner">É o tempo que esse humorista será lembrado</div></span> aptent taciti sociosqu ad litora torquent.
</div>

SEO vs elementos ocultos

Existem diferentes técnicas para ocultar elementos, alguns acreditam que o Google puni por causa disto, o que pode ser bem provável, já vi o uso destas técnicas, já vi sites que foram punidos, não dá para afirmar se o Google e Bing irão punir um site que usa isto, eu pessoalmente creio que o uso só será punido dependendo da forma que foi aplicada, creio que se a página em geral tiver o conteudo principal, visível e organizado, então um elemento que precisa ser ocultado não será motivo para isto.

Vai ter pessoas que vão afirmar com todas a letras que qualquer uso terá punição, mas o algorítimo do google e regras mudam sempre, o indexador é muito inteligente, ele até consegue detectar páginas dinâmicas que são parcialmente geradas via algum processo por JavaScript.

Fonte