5 - Visibilidade

Entenda como funciona a visibilidade para leitores de tela

Entendas como funciona a visibilidade para leitores de tela

Nem sempre uma solução para pessoas videntes serve para pessoas que usam leitores de telas, as vezes é necessário criar pequenos textos de suporte apenas para pessoas que usam leitores de tela, e nem sempre esses textos precisam ficar visíveis para pessoas videntes e alguns elementos visuais são desnecessários ou seriam um ruído na compreensão de pessoas com leitores de tela, então seria pertinente ocultá-los.

Veja a seguir uma descrição de como podemos ocultar e dar visibilidade a alguns elementos usando CSS e adaptar soluções para ambos os perfis.

Perfis atendidos: Deficiência visual

Tabelas com técnicas de visibilidade para leitores de tela

No CSS	Interface	Leitor de tela
visibility:hidden;	O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocuparia	O conteúdo é ignorado pelos leitores de tela
display:none;	O elemento fica oculto e não ocupa espaço	O conteúdo é ignorado pelos leitores de tela
height: 0; width: 0; overflow: hidden;	O elemento fica oculto e não ocupa espaço	O conteúdo é ignorado pelos leitores de tela
opacity: 0; width: 0; height: 0;	O elemento fica oculto e não ocupa espaço	Os leitores de tela acessam o conteúdo
text-indent: -999em;	O conteúdo é movido para “fora da tela”, não sendo mais visível, mas links podem ser focalizados de maneira imprevisível	Os leitores de tela acessam o conteúdo, mas somente texto e elementos inline
position: absolute; left: -999em;	O conteúdo é removido de sua posição, não ocupando espaço e é movido para “fora da tela”, ficando oculto	Os leitores de tela acessam o conteúdo