Cinco erros de acessibilidade comuns

Como funcionam os leitores de tela

Os leitores de tela permitem que pessoas cegas e com deficiência visual usem computadores, telefones e tablets de forma independente. A maioria dos leitores de tela usa software e um motor Text To Speech (TTS) que converte o texto do leitor de tela em fala. Os leitores de tela convertem o texto exibido na tela em um formato que usuários cegos podem processar.

Os leitores de tela lêem em voz alta tudo o que está na tela e permitem que as pessoas naveguem usando gestos de toque e teclas de atalho. Eles também funcionam com outros dispositivos de saída, como um display braille.

Segue abaixo os cinco problemas mais comuns que podem fazer grande diferença para essa audiência.

Links e botões sem marcação

Os usuários de leitores de tela contam com links e botões para navegar em um site e encontrar as informações de que precisamos. Se os links e botões não estiverem rotulados corretamente ou se estiverem de todo, será difícil para os usuários de leitores de tela encontrarem as informações de que precisam. Em última análise, os links não identificados tornam muito mais difícil navegar no site de forma fácil, rápida e independente.

Por exemplo, ao criar um link para uma página sobre, "clique aqui" não dá nenhuma pista sobre aonde isso leva, mas "saiba mais sobre quem somos" é claro.

Se os links e botões estiverem rotulados corretamente, os leitores de tela podem ler o rótulo em voz alta. Isso significa que os cegos e deficientes visuais não precisam pressionar o link ou botão sem saber aonde isso os levará.

Além de elementos sem etiqueta, links e botões que não têm uma descrição clara também são muito frustrantes. Eles devem ter uma descrição clara de para onde irão quando pressionados, em vez de ‘clicar aqui’. Nunca faça seus usuários adivinharem para onde um link os levará ou os obrigará a uma situação de tentativa e erro. Isso torna a experiência do usuário tediosa.

Imagens sem descrição

Este é provavelmente o problema mais comum na web. Usar descrições de imagens é essencial para acessibilidade (o facebook usa AI pra isso!). As descrições de imagens também são conhecidas como texto alternativo (alt text), que é uma descrição escrita de uma imagem.

Os leitores de tela lêem as descrições das imagens em voz alta. Isso significa que os cegos e deficientes visuais podem entender o conteúdo da imagem de forma acessível. Se as imagens não tiverem texto alternativo, os leitores de tela dirão simplesmente “imagem” ou “gráfico”, que não fornece contexto ou significado.

As imagens geralmente transmitem informações valiosas. Portanto, é importante que as pessoas com deficiência visual também possam acessar essas informações. O texto alternativo deve ser escrito de forma clara e fornecer uma descrição precisa da imagem.

Mau uso de títulos

Para uma navegação rápida e fácil, muitos usuários de leitores de tela navegam usando vários elementos na página, como títulos. Eles são uma ótima maneira de encontrar as informações de que precisamos com rapidez e eficácia. Principalmente quando seguem uma estrutura lógica de cabeçalhos com H1s, H2s e H3s ajudando a priorizar o conteúdo.

A estrutura lógica do título começa com o Título 1, com o Título 2 abaixo do título 1. O Título 3 fica dentro do título 2 e assim por diante.

Se os sites não usam títulos, isso significa que os usuários de leitores de tela não podem usar os atalhos do teclado para navegar pela página da web dessa maneira. Se for esse o caso, temos que recorrer a tabulação ou setas em uma longa página da web para encontrar as informações que precisamos.

Os títulos também ajudam a quebrar o conteúdo da web visualmente e melhorar a legibilidade. Outros elementos que os usuários de leitores de tela usam para navegar nas páginas da web incluem links, listas ou pontos de referência.

Formulários

A maioria dos sites usa algum tipo de formulário. Seja para ajudá-lo a pesquisar um produto ou para entrar em contato por meio de um formulário de contato. No entanto, quando esses formulários não estão rotulados ou não rotulados corretamente, isso significa que não há como usa-lo.

Por exemplo, se uma caixa de pesquisa não estiver rótulo (elemento label), significa que os usuários de leitores de tela não têm ideia da finalidade dessa caixa. Isso significa que as pessoas que usam leitores de tela não podem acessar a mesma funcionalidade.

Os formulários de contato são uma forma eficaz de os clientes entrarem em contato com sua marca ou empresa e não haverá nada mais frustrante para um usuário de leitor de tela do que esses formulários rotulados incorretamente.

Outro ponto importante são os requisitos de verificação CAPTCHA. Sem uma opção de ouvir o áudio, não é acessível. Isso significa que não será possível preencher o formulário de forma independente. Isso forçará seu visitante pedir a ajuda de uma pessoa com visão, o que não é possível para todos.

Reprodução automática de áudio e vídeo

A maioria das pessoas sabe como é irritante carregar uma página da web com anúncios barulhentos que começam a ser reproduzidos repentinamente. Para usuários de leitores de tela isso pode ser ainda mais alarmante. Quando o vídeo ou áudio começa a ser reproduzido automaticamente, é muito provável que irá abafar a voz do leitor de tela. Isso torna mais difícil encontrar os botões de pausa ou parada do player.

E se esses botões não estiverem marcados corretamente, será praticamente impossível parar o vídeo rapidamente, o que causa uma frustração extra. Sem conseguir parar o som ou vídeo para ter acesso ao conteúdo, as chances de desistencia serão muito grandes.

A solução? Certifique-se de que não haja reprodução automática de vídeo ou áudio quando seu site for carregado. Se você realmente deseja usar o vídeo, certifique-se de que o áudio está mudo e o usuário pode pausar, parar ou ocultar o reprodutor de mídia.

Esses problemas podem parecer pequenos para usuários com visão. Mas eles são a diferença entre uma pessoa poder usar um site independentemente ou não. E eles fazem uma grande diferença quando implementados corretamente.

Comments powered by Talkyard.