O CSS possui atributos que podem ocultar elementos de acessi...

Próximas questões
Com base no mesmo assunto
Q1307526 Programação
O CSS possui atributos que podem ocultar elementos de acessibilidade. Considerando esse fato, a opção que relaciona corretamente os atributos CSS, o efeito na tela e o efeito na acessibilidade é
Alternativas

Gabarito comentado

Confira o gabarito comentado por um dos nossos professores

O gabarito correto é a alternativa A, que nos diz que ao utilizar visibility: hidden para ocultar um elemento em CSS, o efeito na tela é que o elemento fica oculto, mas continua a ocupar o espaço original que teria se estivesse visível. No que diz respeito à acessibilidade, o conteúdo é ignorado pelos leitores de tela. Vamos explicar o porquê dessa alternativa ser a correta.

Quando você define a propriedade CSS visibility como hidden para um elemento, esse elemento não será visível para o usuário, mas ainda assim manterá o seu espaço no layout da página. Isso significa que outros elementos não irão se mover ou reorganizar para ocupar o espaço deixado por ele, como aconteceria com a propriedade display: none.

Do ponto de vista da acessibilidade, definir visibility: hidden tem o efeito de fazer com que os leitores de tela, que são ferramentas usadas principalmente por usuários com deficiência visual, não leiam o conteúdo do elemento. Isso ocorre porque a intenção dessa propriedade é esconder visualmente o conteúdo sem removê-lo do fluxo do documento, o que inclui a sua acessibilidade.

Portanto, a alternativa A está correta porque descreve adequadamente tanto o comportamento visual quanto o de acessibilidade da propriedade visibility: hidden em CSS. As outras alternativas não descrevem os efeitos de maneira correta para as propriedades apresentadas.

Clique para visualizar este gabarito

Visualize o gabarito desta questão clicando no botão abaixo

Comentários

Veja os comentários dos nossos alunos

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

The element will be hidden, and the page will be displayed as if the element is not there:

display:none retira o elemento do layout da página. Mas você ainda pode continuar manipulando ele no DOM.

visibility:hidden deixa de mostrar o elemento, ou seja, ele deixa de ser visível na página mas seu espaço continua ocupado, ou seja, o layout da página não é alterado por causa disto. É como você apagasse uma luz ali mas a lâmpada continua lá.

Os outros itens podem ser excluidos na leitura da questão.
Resposta letra A

Pense em seu objetivo e não desista!

Clique para visualizar este comentário

Visualize os comentários desta questão clicando no botão abaixo