Você conhece o atributo HTML hidden? Saiba quando utilizá-lo.
Um atributo desconhecido pelos desenvolvedores é o atributo global do HTML chamado `hidden`, nesse post vamos abordar quando utilizá-lo da melhor maneira.
Introdução
Um atributo não muito usado e também não tão conhecido pelos developers é o atributo global hidden, por ser um atributo global ele pode ser inserido em qualquer elemento HTML semelhante ao que acontece com os atributos class, id e style.
<p hidden>
Esse elemento está oculto visualmente e também para tecnologia assistiva
</p>Quando aplicado em algum elemento o atributo hidden, ele age de maneira semelhante ao display: none que a gente utiliza no CSS para ocultar elementos, mas como mencionei só é semelhante na questão de visibilidade, pois o atributo hidden também atua de maneira semântica por definir que aquele elemento não é relevante, ou não será mais relevante naquele contexto do documento ou está sendo reutilizado por outras partes da página.
Semântica E Finalidade Do Atributo
Muitos confundem a questão de esconder elementos e utilizam o atributo hidden de maneira exagerada. Todo elemento e atributo do HTML 5 tem um sentido intrínseco, um propósito de existir e essa deve ser sua pergunta sempre que for utilizar algum elemento ou atributo.
Em que caso utilizo o atributo hidden
- Conteúdo que não é relevante, mas pode ser em algum momento mais tarde;
- Conteúdo que algum momento era relevante, mas não será mais usado;
- Conteúdo reutilizável;
- Conteúdo descritivos para tecnologia assistiva (leitores de tela);
Casos que não se deve usar o atributo hidden
- Não devemos utilizar o atributo hidden para ocultar conteúdo em outra resolução de tela, por exemplo usá-lo para ocultar conteúdo quando mobile;
- Não ocultar conteúdo que poderão ser expandidos;
- Não ocultar conteúdo numa interface de alternância como guias ou tabs;
Essa confusão de quando ou não usar é normal, principalmente porque o atributo não é tão claro assim, deve ser até por isso que muitos developers não gostam e acham que nem deveria ter um atributo assim porque seus benefícios semânticos e de acessibilidade são poucos, porém não são ruim na minha visão.
Traz Algum Ganho Para SEO?
Não diretamente! Mas uma das coisas que acho interessante nesse atributo é que podemos semanticamente informar aos bots dos mecanismos de buscas que esse elemento não é relevante.
Por que isso é importante?
É possível que alguns bots inclua conteúdos ocultos via CSS ou JS na sua análise e consequentemente traga resultados de pesquisa menos precisos. Alguns bots atuais já tentam detectar conteúdos ocultos através da análise do CSS e Javascript para poder determinar o conteúdo a ser indexado e a sua importância.
Porém existem algumas aplicações que restringem o acesso no robots.txt o download de assets, a fim de economizar recursos do servidor.
Não imagino alguém que faça isso atualmente, mas nunca bloqueie CSS e JS para o Google. Ele quer ver seu site do jeito que o visitante humano (usuário) irá ver.
No caso de restrições de acesso ou que algum bot não seja capaz de analisar elementos ocultos via CSS ou Javascript, o atributo hidden tem um uso relevante.
O Ganho Foi Na Acessibilidade
Muitos não utilizam ou desconhecem o atributo aria-hidden, que é uma maneira de informar as tecnologias assistivas (API de acessibilidade) que ignore esses elementos onde o atributo foi inserido, mas esse elemento mesmo com o aria-hidden ainda permanecerá visível para o usuário no browser, enquanto isso, elementos com atributo hidden ficam inacessíveis/ocultos para qualquer dispositivo.
Se você utilizar o hidden não precisa utilizar o aria-hidden=true, mas também não é uma total redundância se utilizar os dois, pois os dispositivos de tecnologia assistiva deveriam também ser mais consistentes/uniformes ao suporte, mas nem sempre é o caso.
Uma opção de uso do atributo hidden para melhorar a acessibilidade que eu utilizo, é criar blocos de conteúdos que detalham algum outro elemento como ícones, search, campos de input ou outros elementos que precisam de uma descrição mais detalhada, em conjunto com o aria-labelledby ou aria-describedby.
Por exemplo:
Em um contexto de checkout:
<div class="form-group">
<label for=”cvv”>CVV</label>
<input aria-describedby=”cvv-info” type=”text” name=”cvv” id=”cvv” />
<span hidden id=”cvv-info”>
Digite os 3 dígitos que está na parte de trás do cartão de crédito
</span>
</div>Em outro contexto, em uma edição ou exclusão:
<button aria-label="close" aria-describedby="descriptionClose">X</button>
<div id="descriptionClose" hidden>
Se você cancelar perderá as informações inseridas no campo XXX e será
enviado para a página anterior.
</div>Os casos de uso são muitos, mas use com moderação.
Suporte
O suporte nesse momento já é praticamente completo entre os browsers e dispositivos. Porém existe um forma via CSS que você pode usar quando o browser ou leitor de tela que o usuário esteja acessando não dê suporte.
[hidden] {
display: none !important;
}O engraçado com esse atributo e sua relação com o CSS display é que essa regra evita também que ocorra uma falha sobre a visibilidade entre os elementos com o atributo hidden. É que no CSS ainda sim é possível utilizando o display: block, fazer com que um elemento com o atributo hidden volte a ser exibido. Estranho, mas é possível.
O próprio browser adiciona uma regra CSS como pode ser visto na imagem abaixo:
Mas se houver um seletor mais forte, ele é sobrescrito, por isso o uso do !important
Por exemplo:
Revertendo a visibilidade com o CSS display: block
Evitando sobrescrita utilizando !important
Aqui no blog usamos o atributo
hiddenpara cada link “VER POST” dos cards, com uma informação mais detalhada sobre qual a ação do link onde o usuário será enviado.
Por fim, a cada novidade no uso do hidden, irei colocando sempre updates nesse mesmo post, não se preocupe, vocês sempre serão informados sobre novidades.
Gostou desse post? Te ajudou em algo?
Deixe aqui abaixo o seu comentário, até a próxima.
