Métodos de ocultação de páginas da Web

Os desenvolvedores da Web precisam ocultar os elementos da página da Web por vários motivos. Por exemplo, há um botão que deve estar visível ao visualizar o site em um dispositivo móvel e oculto - ao usar um navegador de desktop. Ou, por exemplo, há um certo elemento de navegação que deve estar oculto no navegador móvel e exibido na área de trabalho. Os elementos invisíveis na página podem estar em vários estados:

• Um elemento é completamente invisível e, além disso, removido do fluxo de documentos.
• O elemento não pode ser visto através dos olhos, mas está presente no documento e está disponível para tecnologias de assistência, como leitores de tela.
• O item está visível, mas oculto nos leitores de tela.

O artigo, cuja tradução estamos publicando hoje, é dedicado à análise de métodos para ocultar elementos de páginas da Web usando HTML e CSS. Abrangerá questões como acessibilidade de conteúdo, animação, cenários para o uso de tecnologias para ocultar dados nas páginas.

Atributo oculto HTML5

Hidden é um atributo lógico do HTML que oculta os elementos aos quais está atribuído. Quando o navegador carrega a página, ele não exibe elementos com o atributo hidden , exceto quando a visibilidade dos elementos é ativada manualmente usando CSS. O efeito desse atributo é semelhante à aplicação da regra display: none a um elemento CSS.

Considere o seguinte exemplo:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

Há uma marcação que define o título, a imagem e a descrição. A imagem deve ser exibida apenas se a largura da viewport exceder 400px . Eu adicionei o atributo hidden ao elemento <img> .

No CSS, usei o atributo hidden para exibir o elemento apenas se a área de exibição da página tivesse o tamanho certo.


Fragmento de página da Web

Aqui está o código CSS usado aqui:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ Aqui está um exemplo desta página no CodePen

Aqui você pode ter uma pergunta sobre por que não usar apenas display: none . Boa pergunta Quando um seletor de imagem é chamado por meio de seu atributo hidden , podemos ter certeza de que, mesmo que o código CSS, por algum motivo, não tenha sido carregado, o elemento ficará oculto.

Attribute Atributo oculto e acessibilidade ao conteúdo

Se considerarmos o atributo hidden do ponto de vista da acessibilidade do conteúdo, esse atributo oculta completamente o elemento. Como resultado, os leitores de tela não podem trabalhar com este item. Não use esse atributo nos casos em que certos elementos da página precisam ficar invisíveis para os seres humanos, mas não para os leitores de tela.

Propriedade de exibição CSS

Cada elemento de uma página da web possui um determinado valor de propriedade de display atribuído a ele por padrão. Pode ser inline-block , block , table e assim por diante. Para ocultar um elemento usando a propriedade display , podemos usar a construção display: none . Se um elemento estiver oculto usando essa construção, todos os seus descendentes serão ocultados.

Imagine que queremos ocultar a imagem do exemplo anterior e decidimos usar o seguinte código CSS:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

Com essa abordagem, a imagem será completamente excluída do documento (do chamado fluxo de documentos - “fluxo de documentos”), será inacessível para os leitores de tela. Talvez você não esteja muito ciente do conceito de "fluxo de documentos". Para lidar com esse conceito, dê uma olhada na figura a seguir.


O livro azul foi removido da pilha.

O "fluxo de documentos" é comparado aqui a uma pilha de livros. Se a propriedade display: none for aplicada ao livro azul, isso significa que foi simplesmente removido da pilha. Ao mesmo tempo, o espaço que este livro costumava ocupar será ocupado por outros livros. O mesmo acontece ao ocultar elementos HTML. O lugar que um elemento oculto ocuparia é ocupado por outros elementos, isso afeta a organização dos elementos no documento. No nosso exemplo, isso afetou a posição dos livros na pilha.

Aqui está uma versão animada de um exemplo com livros mostrando o que acontece se um deles for removido da pilha.


Se você remover um livro da pilha, a posição de outros livros nela mudará

Resources Os recursos ocultos pelo CSS são carregados?

Responda brevemente a essa pergunta - então sim, o carregamento de tais recursos é realizado. Por exemplo, se o elemento <img> estiver oculto pelo CSS, e mostrarmos esse elemento em algum momento da página, a imagem já estará carregada. A presença na página de uma imagem, mesmo oculta pelo CSS, levará à execução de uma solicitação HTTP para fazer o download.

Aqui você encontra uma demonstração de como trabalhar com uma imagem oculta pelo CSS. Se você explorar este exemplo, abrindo as Ferramentas do desenvolvedor do Chrome e olhando para a guia Network , poderá ver a solicitação correspondente lá.


Examinando uma página que contém uma imagem latente

Style Estilo do elemento

Vale ressaltar que existem elementos HTML cuja propriedade de display é definida como none por padrão. Por exemplo, este é um elemento <style> que pode ser adicionado ao corpo de uma página HTML. Sua propriedade de display pode ser alterada para block e tornar visível.
Aqui está o código HTML para o corpo da página:

 <body>    <style>       .title { color: #000; }    </style> </body> 

Aqui está o CSS com o qual tornamos o elemento style visível:

 style {    display: block; } 

Essa técnica pode ser útil se você desejar que o bloco de style seja visível e, além disso, editável. Para tornar esse bloco editável, você pode adicionar o atributo contenteditable=true à marca de style .

Aqui está como fica.


Bloco de estilo editável visível

→ Aqui está uma demonstração deste exemplo

▍CSS exibe acessibilidade de propriedade e conteúdo

Ao usar a propriedade display: none , o elemento se torna invisível e, além disso, inacessível aos leitores de tela.

Propriedade de opacidade CSS

Ao definir a propriedade CSS da opacity como 0 , você pode ocultar o elemento e todos os elementos aninhados dentro dele. Esta propriedade não é herdada. No entanto, essa propriedade oculta elementos apenas de quem está olhando a página e não dos leitores de tela. Aqui, vale a pena dizer que um elemento cujo valor de opacity é diferente de 1 cria um novo contexto de sobreposição .

Aqui está um exemplo.


O livro azul é invisível, mas o lugar que ocupa ainda está reservado

A figura anterior mostra que o livro azul se torna invisível para o observador. Mas o lugar que ela ocupou é reservado. A ordem dos outros livros da pilha não mudou. Compare isso com o que o uso da display: none levou.

Em CSS, o uso da propriedade opacity fica assim:

 img {    opacity: 0; } 

Se retornarmos ao nosso primeiro exemplo e assumirmos que queremos ocultar a imagem usando a propriedade opacity , o resultado será como mostrado abaixo.


A imagem está oculta usando a propriedade CSS de opacidade

Como você pode ver, a imagem ainda está presente na página, mas seu lugar não é ocupado por nada. Ele está oculto apenas do observador, mas não desaparece da página. Após a publicação do material, eles me disseram que a propriedade pointer-events: none | auto pointer-events: none | auto pode ser usado para desativar os eventos do mouse em elementos ocultos usando a propriedade opacity: 0 . Essa é uma ideia importante, pois o usuário pode ficar confuso ao interagir com um elemento oculto (clicar nele, passar o mouse sobre ele com o mouse, selecionar texto).

→ Aqui está uma demonstração do uso da propriedade opacity

Propriedade de opacidade do CSS e acessibilidade ao conteúdo

Um elemento oculto com opacity: 0 permanece acessível aos leitores de tela. Esse elemento pode ganhar foco ao trabalhar com a página usando o teclado.

Propriedade de visibilidade CSS

Usando a propriedade visibility: hidden , é possível mostrar ou ocultar elementos, da mesma maneira que fizemos com opacity: 0 . Isso não afeta o fluxo do documento.


Ao usar a visibilidade: oculto, o livro desaparece, mas seu lugar permanece desocupado

Observe que o livro azul desapareceu, mas isso não afetou a organização de outros livros na pilha.

Deve-se observar que, quando visibility: hidden usado para o elemento pai, todos os seus descendentes ficam ocultos, mas se a propriedade visibility: visible for atribuída a um dos descendentes, esse descendente ficará visível.


A pilha de livros está oculta, mas o livro azul é visível.

Voltemos ao nosso exemplo habitual com um cabeçalho, imagem e descrição. Reescrevemos seu código HTML assim:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

Nós o estilizamos com o seguinte código CSS:

 article {    visibility: hidden; } img {    visibility: visible; } 

Depois disso, vamos ver como uma página na qual estilização semelhante não foi aplicada será diferente da página estilizada.


O elemento aninhado é visível

Aqui, a propriedade CSS visibility: hidden é atribuída ao elemento <article> . E se você adicionar a propriedade visibility: visible ao elemento <img> , a imagem ficará visível. Novamente, o ponto aqui é que a propriedade em questão é aplicada aos descendentes do elemento, mas pode ser substituída no elemento descendente.

→ Aqui está uma demonstração do trabalho com a propriedade de visibility

Visibilidade da propriedade CSS e acessibilidade do conteúdo

Quando você usa a propriedade visibility: hidden , o elemento fica oculto. Também é removido da árvore de acessibilidade e, como resultado, os leitores de tela não percebem.

Ocultando elementos e posicionamento

Para ocultar um elemento atuando em sua posição na página, você precisa trazê-lo para fora da área visível da página e definir suas dimensões (largura e altura) como 0 . Como exemplo de uso de uma técnica semelhante para ocultar elementos, você pode citar um link que permite saltar rapidamente para o conteúdo principal da página. Considere a seguinte imagem.


Link oculto fora da visibilidade da página

Para posicionar um elemento fora da área de visibilidade da página, você pode usar o seguinte código CSS:

 .skip-link {    position: absolute;    top: -100%; } 

Um valor top: -100% removerá um elemento da viewport a 100% de sua altura. Como resultado, o elemento será completamente invisível. Mas se ele receber o foco depois que o usuário o alcançar usando as teclas do teclado, esse elemento poderá ser mostrado:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ Aqui está uma demonstração deste método de ocultar elementos

Propriedade de posição do CSS e acessibilidade ao conteúdo

Um elemento exibido fora da área de visualização está disponível para os leitores de tela; você também pode acessá-lo usando o teclado. Ele só fica invisível durante o trabalho normal da página.

Propriedade de caminho de clipe CSS

Se a propriedade CSS do clip-path do clip-path for aplicada a um elemento, ela permitirá descrever uma região que determina qual parte do elemento deve ser oculta e qual deve ser visível.


Área de corte de imagem

No exemplo anterior, a propriedade clip-path do clip-path é aplicada ao fato de que o lado esquerdo da imagem está escuro. Quando essa propriedade é aplicada, os fragmentos escuros da imagem desaparecem.

Para observar essa propriedade em ação, usamos a ferramenta clippy . O trabalho começa com os seguintes valores de clip-path especificados em CSS e descrevendo a máscara como um polígono:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

Experimentos com a propriedade de caminho do clipe, a área de corte é especificada como um polígono

Se todas as propriedades do polygon estiverem definidas como 0 , a imagem será ocultada. A área de corte da imagem pode ser definida não apenas na forma de um polígono, mas também na forma de um círculo:

 img {    clip-path: circle(0 at 50% 50%); } 

Aqui está como fica.


Experiências com a propriedade de caminho do clipe, a área de corte é definida como um círculo

Você pode experimentar esta propriedade aqui.

Propriedade de caminho de clipe do CSS e acessibilidade ao conteúdo

Um elemento ao qual a propriedade do clip-path do clip-path é aplicada é apenas visualmente oculto. Pode ser alcançado usando o teclado, está disponível para os leitores de tela.

Manipulações com cor do texto e tamanho da fonte

Embora ocultar o texto alterando sua cor ou tamanho da fonte não seja tão difundido quanto as técnicas discutidas anteriormente para ocultar elementos, em alguns casos isso pode ser útil.

Defina a transparência da cor

Se você usar uma cor transparente para o texto, esse texto ficará invisível. Isso pode ser útil ao criar botões que usam apenas ícones.

▍ Ajustar tamanho da fonte

Além disso, se você definir o tamanho da fonte como 0 , isso também ocultará o texto.

Considere o seguinte exemplo. Há um botão aqui, cuja estrutura é definida pelo seguinte código HTML:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

Nosso objetivo é ocultar o texto deste botão, mas, ao mesmo tempo, deixá-lo disponível para tecnologias de assistência. Para fazer isso, usei o seguinte código CSS:

 .button span {    color: transparent;    font-size: 0; } 

Agora o texto está oculto. Note-se que esta técnica funcionará sem alterar a cor do texto. Mas eu, para escolher opções diferentes para ocultar o texto, mudei a cor aqui.


1. O conteúdo do botão está centralizado. 2. O texto recebe uma cor transparente. 3. O tamanho da fonte está definido como 0

→ Aqui está uma demonstração para este exemplo

Atributo HTML oculto à ária

Quando um atributo aria-hidden é adicionado a um elemento, esse elemento é removido da árvore de acessibilidade. Isso facilita para os usuários que usam leitores de tela usarem a página. Observe que um elemento com esse atributo é visível na página. É invisível apenas para tecnologias assistivas.

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

Neste exemplo, há um botão Menu com um ícone e um rótulo. O atributo aria-hidden="true" permite ocultar esse botão dos leitores de tela.

Este atributo, de acordo com os materiais MDN, é usado nos seguintes cenários:

• Escondendo elementos decorativos como ícones e imagens.
• Ocultar texto duplicado.
• Ocultar itens minimizados ou itens que estão fora da tela.

Attribute Atributo oculto aria e acessibilidade ao conteúdo

Este atributo foi criado especificamente para ocultar o conteúdo das tecnologias assistivas. Mas os elementos são visíveis na página, você pode interagir com eles usando o teclado.

Animação e interatividade

Antes de entrarmos nos exemplos, gostaria de me debruçar sobre as maneiras discutidas anteriormente de ocultar elementos. Faremos isso para compará-los e escolher o que atenderá às nossas necessidades. A tabela a seguir, que pode ser encontrada aqui , é baseada neste maravilhoso artigo.

Se você deseja animar um elemento oculto, por exemplo, uma barra de navegação móvel, esse elemento deve ser criado levando em consideração sua disponibilidade. Abaixo, consideraremos exemplos mal sucedidos e bem-sucedidos de trabalhar com elementos em termos de acessibilidade. Isso nos permitirá evitar erros que complicam o trabalho com sites para usuários que usam tecnologias assistivas.

▍ Animação de menu: abordagem incorreta

Temos um menu que, quando aberto, deve sair da tela. A maneira mais fácil de fazer isso é com o seguinte CSS:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

Graças a esse código, o menu será expandido e recolhido com base na classe .active , que será adicionada usando o seguinte código JavaScript:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

Aqui está como é trabalhar com esse menu.


Sair do menu em ação

Pode parecer que obtivemos bons resultados criando este menu, mas aqui foi cometido um grande erro. O uso da propriedade opacity: 0 não removerá os elementos de navegação da árvore de acessibilidade. Mesmo que o menu da página não esteja visível, é possível acessá-lo usando o teclado, os leitores de tela podem trabalhar com ele. Para não confundir os usuários usando essas ferramentas, o menu também deve estar oculto dessas ferramentas.

Aqui está a árvore de acessibilidade da página em questão, criada usando as ferramentas da guia Accessibility da ferramenta Chrome.


Árvore de acessibilidade de um menu oculto mal projetado

A árvore de acessibilidade é, em poucas palavras, uma lista de tudo o que os usuários que usam leitores de tela podem acessar. No nosso caso, eles têm acesso a todos os itens de menu invisíveis na tela. Aqui você encontra dois problemas que precisamos resolver:

1. É necessário garantir que itens de menu ocultos não sejam alcançados usando o teclado.
2. É necessário que os leitores de tela não vejam o menu oculto e não leiam o conteúdo correspondente.

A imagem a seguir mostra como a página é visível para o VoiceOver no Mac OS. É fácil perceber que essa ferramenta visualiza o menu perfeitamente, mesmo que esse menu não esteja na tela.


O leitor de tela vê o que não deve ver

→ Aqui está uma versão funcional deste exemplo

Vamos corrigir os erros acima.

▍ Animação de menu: correções de bugs

Para melhorar o menu e corrigir erros, você precisa usar a propriedade CSS CSS visibility: hidden Isso permitirá que você oculte o menu da página e evite que os meios de leitura da tela funcionem com ele. Aqui está o código CSS para corrigir o problema:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

Após a aplicação desse código, o menu minimizado desaparecerá da tela e do "campo de visão" das tecnologias assistivas. Explore a página novamente com o VoiceOver.


O leitor de tela não vê nada extra

→ Aqui está um projeto que ilustra um exemplo

Elementos de caixa de seleção personalizados

Elemento da caixa de seleção

Sinalizadores padrão, elementos <input> do tipo checkbox , são difíceis de configurar. Se precisarmos configurá-los, isso significa que precisaremos criar nossa própria implementação desse elemento. Veja o código HTML básico:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

Para configurar a caixa de seleção, é necessário ocultar o elemento, levando em consideração as necessidades de tecnologias de assistência. Para fazer isso, você precisa usar a propriedade position , bem como outras propriedades. Aqui está uma classe CSS que pode ser chamada sr-only ou visually-hidden , que oculta um elemento apenas visualmente, mas o deixa acessível para leitores de tela e para navegação no teclado.

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

Graças ao uso dessa classe, o elemento checkbox de nosso próprio design não perde a acessibilidade. Aqui está uma história mais detalhada sobre esse elemento. E aqui está uma demonstração de como trabalhar com um elemento semelhante.

Ocultar conteúdo dos leitores de tela

▍

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

Sumário

- . , , .

Caros leitores! - ?