Incorporar a acessibilidade em seu site é a coisa certa a se fazer hoje!
Por quê?
A resposta a esta pergunta é que quase 24% dos brasileiros (45 milhões de pessoas) possuem algum tipo de deficiência, segundo o Instituto Brasileiro de Geografia e Estatística (IBGE).
No entanto, muitos sites ainda não possuem recursos de acessibilidade.
Isso significa que milhões de usuários estão lutando para usar a web.
No Brasil existem algumas leis que regulamentam a acessibilidade Web:
O que é acessibilidade na Web?
Acessibilidade na Web é projetar e desenvolver sites, ferramentas e tecnologias que pessoas com deficiência podem usar, de acordo com o World Wide Web Consortium (W3C).
Pessoas com deficiência devem ser capazes de perceber, compreender, navegar, interagir e contribuir com a web.
A acessibilidade na web se aplica a todas as deficiências que afetam o acesso à web, incluindo:
- Auditivo;
- Cognitivo;
- Neurológico;
- Física;
- Fala;
- Visual.
Como otimizar seu site para usuários com deficiência
Otimizar um site para usuários com deficiência faz todo o sentido comercial.
Você pode atender a um segmento de mercado mais amplo enquanto constrói uma imagem de marca positiva.
Depois de testar a acessibilidade do seu site na web , você pode implementar as seguintes etapas:
Adicionar imagens com texto alternativo
Uma imagem pode valer mais que mil palavras, mas elementos visuais como imagens são uma barreira de acessibilidade para usuários cegos e com baixa visão.
Freqüentemente, eles dependem de tecnologias assistivas, como leitores de tela e leitores de Braille atualizáveis .
Leitores de tela são programas de software que lêem o texto na tela usando um sintetizador ou display Braille.
No entanto, nenhuma dessas tecnologias pode ler imagens ou o texto nas imagens.
Portanto, você precisa adicionar Alt Text para descrever suas imagens para usuários com deficiência.
Certifique-se de descrever a imagem o mais claramente possível.
Você pode usar o atributo alt para descrições breves e “Longdesc Tag” para descrições extensas.
Permitir que os usuários ampliem os tamanhos das fontes
Pessoas com baixa visão geralmente não conseguem ler textos pequenos.
Portanto, eles precisam usar configurações de fonte específicas ao navegar em seu site.
Oferecer uma folha de estilo alternativa com a capacidade de aumentar o tamanho da fonte sem quebrar o layout da página deve facilitar a leitura do conteúdo.
Além disso, certifique-se de que seus botões de CTA tenham um tamanho de fonte maior.
Além disso, torne esses botões visíveis para pessoas com deficiência visual.
Mantenha a sensibilidade ao contraste em mente
Junto com o tamanho do texto, pense na cor e no contraste.
Pessoas com deficiência visual, como retinite pigmentosa, glaucoma, retinopatia diabética e catarata, apresentam baixa sensibilidade ao contraste de cor.
Ao criar suas páginas da web, certifique-se de ter um alto contraste entre o primeiro plano e o fundo, como letras amarelas em um fundo preto.
Evite usar fontes finas.
Além disso, tente evitar o uso de quaisquer recursos de JavaScript ou CSS que impeçam que usuários com deficiência visual aumentem o contraste.
Assim como o tamanho do texto, o contraste da cor também é crítico para CTAs.
Embora o texto preto em um fundo branco tenha a maior legibilidade, você também pode usar uma combinação de texto preto em um fundo amarelo e texto amarelo em um fundo azul.
Evite usar combinações como texto verde em fundo vermelho e vice-versa, pois são difíceis de ler.
Adicionar navegação de teclado
Para usuários cegos e deficientes visuais, a navegação é um desafio.
Como eles não podem usar o mouse para navegar no site, é necessário incorporar a navegação do teclado ao seu site.
Os usuários cegos usarão teclados Braille para acessar seu site.
Certifique-se de que os usuários com deficiência possam acessar todos os elementos interativos do seu site, incluindo:
- URLs.
- Texto âncora.
- Menus suspensos.
- Widgets.
- Formulários.
- CTAs.
- Caixa de diálogo.
Além disso, torne os widgets JavaScript acessíveis com o teclado .
Como alternativa, você pode usar links HTML, botões e campos de formulário sozinhos para garantir que todos os elementos do seu site sejam acessíveis pelo teclado.
Torne o vídeo e multimídia acessíveis
Vídeos e outros elementos multimídia em seu site desempenham um papel fundamental no aumento do engajamento do usuário em seu site.
Enquanto os usuários cegos e deficientes visuais não podem ver as imagens, os usuários surdos e aqueles com deficiência auditiva não podem ouvir o áudio.
Você pode usar uma descrição de áudio para descrever partes apenas visuais, como imagens, gestos e alterações nas configurações, entre outros. Isso ajudará os usuários cegos a aproveitar o vídeo.
No entanto, use seu bom senso ao adicionar uma descrição de áudio.
Certifique-se de não acabar com horas de audiodescrição, tornando-a uma experiência sem sentido para o usuário.
Você pode fornecer legendas de texto que se sincronizam com as trilhas de vídeo e áudio para usuários surdos ou com deficiência auditiva.
Certifique-se de usar o contraste de cor certo para destacar as legendas corretamente.
Finalmente, você terá que usar um reprodutor multimídia acessível.
Felizmente, os players HTML5 oferecem uma chance melhor de incorporar acessibilidade.
Use URLs descritivos
Os leitores de tela podem ler URLs descritivos com rapidez e precisão, oferecendo contexto aos usuários cegos e com deficiência visual.
Descrições significativas também tornam mais fácil pular para o conteúdo certo.
Por exemplo, ao descrever o link da página “Sobre”, lembre-se do seguinte.
- Baixa legibilidade: www.marketing123.com.br/sobre
- Alta legibilidade: www.marketing123.com.br/sobre-nos
Evite usar texto âncora como “Leia mais” ou “Clique aqui” em qualquer lugar da página.
Além disso, não adicione links para imagens que não suportam Alt Text.
Use funções ARIA
ARIA significa Accessible Rich Internet Applications.
Ajuda a tornar o conteúdo dinâmico mais acessível.
As funções e atributos ARIA fornecem mais informações ou contexto sobre um elemento do site para leitores de tela e outras ferramentas de assistência.
Você pode adicionar a função ARIA usando um atributo role = ”<ROLE TYPE>”.
As seis categorias mais comuns de funções ARIA incluem:
- Marco: leitores de tela usam essa função para navegação.
- Estrutura do documento: oferece uma descrição estrutural de uma seção.
- Widget: descreve elementos interativos sem equivalentes semânticos em HTML.
- Resumo: ajuda a organizar e otimizar um documento.
- Janela: cria uma subcategoria ou subseção do documento principal.
- Regiões ao vivo: Ajuda a ferramentas de assistência para detectar mudanças dinâmicas de conteúdo em uma página da web e alertar usuários com deficiência.
No entanto, apenas pessoas com acesso ao código-fonte e com conhecimento de ARIA e HTML5 podem e devem fazer essas alterações.
Você deve entrar em contato com o desenvolvedor do seu site para obter mais detalhes.
Evite usar texto de espaço reservado em formulários
Os formulários online costumam usar texto de espaço reservado para descrever vários elementos para economizar espaço.
No entanto, o texto do espaço reservado geralmente é cinza.
Usuários com deficiência visual não conseguem ler devido ao baixo contraste.
Também é um texto sem rótulo, o que significa que os leitores de tela geralmente pularão o texto do marcador. Como resultado, os usuários cegos também não conseguirão ler este texto.
Portanto, em vez do texto de espaço reservado, use a tag <label> ou um atributo ARIA que não desaparece. Além disso, use o maior contraste de texto e fundo.
Essas etapas irão melhorar a usabilidade para usuários cegos e deficientes visuais. No entanto, ao seguir essas etapas, evite criar um formulário da web confuso. Tente mantê-lo o mais simples possível.
Minimize o uso de tabelas
Normalmente, os leitores de tela informarão aos usuários cegos quantas linhas e colunas uma tabela possui.
No entanto, costuma ser um desafio para os leitores de tela ler os dados tabulares no mesmo fluxo que corresponde à ordem visual.
Portanto, sempre que possível, use CSS para apresentação de dados.
Se você deve criar uma tabela, use os cabeçalhos corretos para cada linha e coluna.
Você também pode usar legendas de tabela HTML5 para fornecer contexto adicional para seus usuários com deficiência.
Criar um site acessível não só faz sentido para os negócios, mas também é a coisa moralmente certa a se fazer.
Portanto, sempre tenha em mente a acessibilidade.
Existem diversas outras possibilidades para acessibilidade à serem implementadas em um site, entretanto espero que essas dicas ajudem a otimizar seu site para usuários com deficiência.
