Código fonte do caso:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. O impacto da acessibilidade na visibilidade: oculto
O elemento fica oculto, seus descendentes são removidos da árvore de acessibilidade e os leitores de tela não renderizam o elemento.
(1) Posicionamento
Para ocultar um elemento com atributo position, devemos movê-lo para fora da tela e definir seu tamanho como 0 (largura e altura). Um exemplo são os links de navegação de salto. Considere o seguinte diagrama:
Para colocar o link fora da tela, devemos adicionar o seguinte
「css」
.skip-link {
posição: absoluta;
topo: -100%;
}Um valor de -100% empurrará o elemento para 100% da altura da janela de visualização. Como resultado, ficará completamente oculto. Assim que estiver focado no teclado, ele aparecerá assim
.skip-link:foco {
posição: absoluta;
superior: 0;
}Código fonte do caso:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. O impacto da acessibilidade na posição: absoluto fixo |
O elemento é acessível a leitores de tela e com foco no teclado. Está apenas oculto na janela de visualização.
Clip Path Quando clip-path é usado em um elemento, ele cria uma área de recorte que define quais partes devem ser mostradas e ocultadas.
No exemplo acima, a área preta transparente possui clip-path. Quando o clip-path é aplicado a um elemento, nada abaixo da área preta transparente não aparecerá.
Para demonstrar o que foi dito acima de forma mais visual, usarei a ferramenta clippy. No GIF abaixo, tenho o seguinte clip-path:
Defina o valor do polígono em cada direção como 0 0 e a área de corte será redimensionada para 0. Como resultado, a imagem não será exibida. Da mesma forma, isso também pode ser feito substituindo o polígono por um círculo:
imagem {
caminho do clipe: círculo (0 a 50% 50%);
} 
7. Impacto da acessibilidade no clippath
O elemento está oculto apenas visualmente, leitores de tela e foco do teclado ainda podem usá-lo.
Código fonte do caso:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Controle a cor e o tamanho da fonte
Embora essas duas técnicas não sejam tão comuns quanto as discutidas anteriormente, elas podem ser úteis para determinados casos de uso.
1. Cor transparente
Ao tornar a cor do texto transparente, ele ficará visualmente oculto. Isso é útil para botões que possuem apenas ícones.
2. Tamanho da fonte
Além disso, definir o tamanho da fonte como 0 é útil, pois oculta visualmente o texto. Considere o seguinte exemplo, onde existe um botão com a seguinte estrutura:
<botão> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Dados do caminho --> </svg> <span>Curtir</span> </button>
Nosso objetivo é ocultar o texto de forma acessível. Para isso adicionei o seguinte CSS
.button span {
cor: transparente;
tamanho da fonte: 0;
}Dessa forma, o texto fica oculto. Até funciona sem alterar a cor, mas adicionei para fins de explicação.
Código fonte do caso:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Ária Oculta
Quando você adiciona o atributo aria-hidden a um elemento, ele remove o elemento da árvore de acessibilidade, o que pode aprimorar a experiência dos usuários de leitores de tela. Observe que ele não oculta visualmente o elemento, destina-se apenas a usuários de leitores de tela
<botão> Menu <svg aria-hidden="true"><!-- --></svg> </button>
No exemplo acima, temos um botão de menu com um rótulo e um ícone. Para ocultar ícones dos leitores de tela, foi adicionado aria-hidden.
De acordo com a Mozilla Developer Network (MDN), abaixo estão os casos de uso de propriedades
Oculte conteúdo decorativo, como ícones e imagens. Ocultar o texto copiado. Oculte conteúdo fora da tela ou recolhido.
4. Impacto da acessibilidade em aria-hidden="true"
foi projetado para leitores de tela porque oculta o conteúdo apenas dos leitores de tela. No entanto, o conteúdo permanece visível para usuários com visão e o teclado pode ser focado.
(1) Animação e interação
Quando queremos animar um elemento oculto, por exemplo, para revelar uma navegação móvel oculta, isso precisa ser feito de forma acessível. Para obter uma experiência acessível, exploraremos alguns bons exemplos para aprender, bem como alguns exemplos ruins para evitar cometer erros que podem criar uma experiência ruim para usuários de leitores de tela.
Animação de Menu – Mau Exemplo
Temos um menu que precisa ter uma animação deslizante quando expandido. A maneira mais fácil é adicionar o seguinte ao seu menu:
você {
opacidade: 0;
transformar: traduzirX(100%);
transição: 0,3s de atenuação;
}
ul.ativo {
opacidade: 1;
transformar: traduzirX(0);
}Com o acima exposto, o menu será expandido e recolhido com base na classe .active, que será adicionada via JavaScript da seguinte forma:
menuToggle.addEventListener('clique', function(e){
e.preventDefault();
navMenu.classList.toggle('ativo');
});
O resultado pode parecer bom, mas tem um grande bug. Usar opacity: 0 não ocultará a navegação da árvore de acessibilidade. Mesmo que a navegação esteja visualmente oculta, ela ainda pode ser focada por meio do teclado e acessível aos leitores de tela. Deve estar oculto para evitar confundir os usuários.
Aqui está uma captura de tela da árvore de acessibilidade do Chrome Dev Tools:
Simplificando, uma árvore de acessibilidade é uma lista de todo o conteúdo acessível aos usuários de leitores de tela. No nosso caso, a lista de navegação está lá, embora esteja visualmente oculta. Precisamos resolver dois problemas:
Evite usar o foco do teclado quando o menu estiver oculto Evite informar a navegação através do leitor de tela quando a navegação estiver oculta
A captura de tela abaixo mostra como a página é vista pelo rotor do VoiceOver no Mac OS. A lista de navegação está lá enquanto está oculta
Código fonte do caso:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Animação de Menu – Bom Exemplo
Para corrigir esse erro, precisamos usar visibilidade: oculto para o menu de navegação. Isso garantirá que o menu fique oculto dos leitores visuais e de tela.
「css」
você {
visibilidade: oculta;
opacidade: 0;
transformar: traduzirX(100%);
transição: 0,3s de atenuação;
}
ul.ativo {
visibilidade: visível;
opacidade: 1;
transformar: traduzirX(0);
}Depois de adicionado, o menu ficará oculto dos leitores de tela. Vamos testar novamente e ver o que o VoiceOver exibirá:
Código fonte do caso:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Caixa de seleção personalizada
O design padrão da caixa de seleção é difícil de personalizar, portanto, precisamos criar um design personalizado para a caixa de seleção. Vejamos o HTML básico:
<p class="c-caixa de seleção"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">Caixa de seleção personalizada</label> </p>
Para personalizar a caixa de seleção, precisamos ocultar a entrada de forma acessível. Para este propósito, a posição e outras propriedades devem ser usadas. Existe uma classe CSS comum chamada sr-only ou visual-hidden que oculta apenas visualmente um elemento e o torna acessível aos usuários de teclado e leitor de tela.
.sr-somente {
borda: 0;
clipe: rect(0 0 0 0);
-webkit-clip-path: polígono (0px 0px, 0px 0px, 0px 0px);
caminho do clipe: polígono (0px 0px, 0px 0px, 0px 0px);
altura: 1px;
margem: -1px;
estouro: oculto;
preenchimento: 0;
posição: absoluta;
largura: 1px;
espaço em branco: nowrap;
}Código fonte do caso: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
Botão Ocultar
No Twitter, existe um botão chamado “Ver Novos Tweets” que fica oculto para leitores de tela com conteúdo oculto por ária e só aparece quando novos tweets estão disponíveis.
Resumir
Isso conclui este artigo sobre o tutorial detalhado sobre como ocultar elementos na Web e suas vantagens e desvantagens. Para obter mais informações sobre como ocultar elementos na Web, pesquise os artigos anteriores em downcodes.com ou continue navegando nos seguintes artigos relacionados. downcodes.com mais no futuro!