O que existe de comum e quais os impactos que estamos tendo.

Gostaria de propor algumas reflexões que tenho vivenciado nesse período de isolamento. Além de apresentar dicas simples e rápidas que podemos aplicar para amenizar problemas no acesso e uso de aplicações digitais. O objetivo desse artigo não é descrever de forma detalhada o que é acessibilidade digital, os diferentes grupos de usuários, quais os impactos a falta de acessibilidade promove, mas sim apresentar uma breve descrição de alguns dos problemas comuns e algumas dicas de como evitá-los.

Para contextualizar…

Enquanto escrevo esse artigo, o mundo passa por uma pandemia causada pelo COVID-19, um vírus que vem causando muitas mortes e uma forte crise nos sistemas de saúde. Governos de diferentes países buscam no isolamento social a sua melhor arma para achatar a curva de contágio e conseguir reduzir a crise na saúde, reduzindo assim o número de mortes, impactos sociais e econômicos que esse vírus vem causando, por consequência.

Isolamento social causado pela COVID-19 e a Acessibilidade Digital

Com o isolamento social, empresas estão buscando formas de se manterem vivas. E um dos meios mais atraentes e promissores é o digital. Consultas, aulas, compras, encontros, shows, publicações em redes sociais, dentre outros, estão sendo realizados através de plataformas digitais. Uma alternativa válida? Sim. Necessária? Também. Mas que nos faz refletir o seguinte: o quanto as nossas aplicações digitais são acessíveis para todas as pessoas?

De um forma muito rápida a intensidade dos acessos a sites e aplicativos aumentou e vem aumentando, mas todos estão conseguindo utilizar essas aplicações?

Impactos com a falta de Acessibilidade Digital

A acessibilidade digital está muito ligada a necessidade de garantir uma aplicação que diferentes usuários consigam usar de diferentes formas, tendo experiências semelhantes. Sabendo disso, se antes do período de isolamento social, de acordo com a pesquisa realizada em 2019 pelo MWPT - Movimento Web Para Todos e a pesquisa realizada em 2020 pelo MWPT, apenas 1% dos sites brasileiros eram acessíveis. Embora na segunda pesquisa ocorreu um aumento em relação a acessibilidade nos sites brasileiros, o percentual ainda continua baixo. Imagina o impacto que essa falta de acessibilidade não está causando durante este período de isolamento social.

Sites difíceis de navegar, contrastes baixo dificultando a localização de ícones e outros elementos dentro da página, imagens sem descrição, botões e links sem referência, rótulos de campos em formulários sem associação, textos longos com alinhamentos diferentes. Nenhum desses itens precisam de tratamentos absurdos ou de muita experiência para desenvolver, o que na verdade é preciso apenas utilizar corretamente os recursos disponíveis durante o desenvolvimento.

Vou tentar ser breve e objetiva. Para mais informações, vou deixar links de artigos e referências legais. A ideia dessas dicas não é apontar o grupo de usuários que o problema impacta diretamente, farei outros textos com esse intuito. Então vamos lá:

Contraste:

Imagem com texto

Problema	Solução

É muito comum adicionarmos imagens ao fundo e texto em cima, mas esse comportamento pode gerar uma dificuldade na leitura de textos com imagens ao fundo. Imagens no fundo de um conteúdo textual, são realmente necessárias? Se sim, podemos colocar uma tarja na área do texto, permitindo um aumento do contraste naquela sessão. Esse problema foi resolvido adicionando os seguintes estilos de css:

background: rgba(0,0,0, 0.9);
border-radius: 20px;
padding: 20px;

A recomendação da WCAG para a diferença de contraste é de 4.5:1. Podemos usar validadores online e gratuitos para garantir que as cores utilizadas possuem um bom contraste.

Imagens

Text Alternativo

Primeiro de tudo, você está usando a tag img para adicionar imagens? Então já coloca o atributo alt. Pode deixar ele vazio por enquanto. Mas sempre que você usar essa tag, o atributo alt é necessário.

<img src="sorriso.png" alt="Rosto sorrindo" >

Vamos analisar algumas situações:

• A imagem possui algum significado importante para a compreensão de algum recurso/texto? Se sim, a descrição dessa informação deve ser adicionado como um valor do atributo alt, como o exemplo acima.

⚠️ Imagens informativas não devem ser adicionadas pelo CSS

• A imagem possui texto, botões, ou informações importantes? Se sim, é extremamente necessário que estes elementos(texto, botões, dentre outros) estejam dentro da imagem? Se sim, vamos adicionar essas informações dentro do atributo alt. Agora se não for extremamente necessário, devemos separar estes elementos e utilizar o CSS para reposicioná-los na página?
• A imagem é apenas decorativa e não acrescenta nenhuma informação a mais para o que está sendo descrito, que tal colocar ela via CSS? Mas se essa mudança for muito custosa, devemos deixar o atributo alt sem valor. Sempre que o atribute alt estiver vazio, a imagem passa a ser tratada apenas como decoração.

<img src="ceu-estrelado.jpg" alt="" >

• Botões com ícone/imagem de carrinho, de telefone, redes sociais. Ele possui descrição? Não!? Então já sabe, precisamos adicionar o atributo alt dentro da tag img.

⚠️ Importante!
Você está querendo inovar e usar ícones muito diferentes para recursos já conhecidos e familiar para as pessoas? Cuidado! Muitos ícones já são familiares para as pessoas, tentar mudar o sentido desses ícones ou forçar um novo entendimento dentro da sua aplicação, pode oferecer uma experiência bem ruim para os seus usuários. Então vá com cuidado.

Botões e links

Construindo botões e links

//Problema
<div class='button' onClick='() => {}'> Botão </div>
//Solução
<button class='button' onClick='() => {}'> Botão </button>

É muito comum criar elementos interativos, como botões e links, de maneira errada. Utilizando tags que não existem para essa finalidade.
Devemos sempre dar preferência aos elementos nativos do HTML. Se vai criar um botão, use a tag button, se é um link, use a tag A.

Área de toque

Definição	Aplicação

Imagem retirada da documentação de Acessibilidade do Web Developers Google

Permitir uma boa área de toque é evitar que botões/links fiquem bem próximos. O recomendado é que cada elemento tenha no mínimo um tamanho ou espaçamento interno (padding, no CSS) total de 48dp, ou seja, cerca de 9mm. Isso permite que diferentes usuários vão conseguir interagir com aquele elemento de diferentes formas, sem correr o risco de clicar em outro elemento ou não conseguir clicar com o elemento desejado devido ao tamanho da área.
É importante também adicionar um espaçamento mínimo de 8dp entre um elemento e outro. Por exemplo: entre dois botões/links.

Links genéricos

Problema	Solução

Textos genéricos devem ser evitados: "Clique Aqui", "Saiba mais", "Leia mais", "Acesse e confira". Links genéricos são links com informações soltas, durante a navegação por teclado eles podem ter o seu sentido perdido, devido a falta de contexto e maiores informações. Como demonstra a imagem de problema.
Os links devem estar associados ao conteúdo que será redirecionado, ou seja, se é um link para comprar um produto, a imagem do produto, as informações devem estar no link. De forma que quando o usuário navegar até o link, independente da forma de navegação, será mais fácil entender qual o comportamento daquele link. Como demonstra a imagem de solução.

Ao corrigir problemas de links genéricos, muitas das vezes a área de toque acaba ficando maior. O que proporciona uma experiência ainda melhor para os usuários.

💡 Dica É importante entender a diferença entre quando usar um link e quando usar um botão.

Formulários

Campos sem rótulos associados

// Prática Ruim
<div for="idName"> Nome: </div>
<input id="idName" type="text" >

// Boa Prática
<label for="idName"> Nome: </label>
<input id="idName" type="text" >
//ou
<label>
   Nome:
   <input id="idName" type="text" >
</label>

É necessário utilizar a tag label, como nos exemplos, para associar o rótulo ao elemento input. Essa associação além de tornar possível a fácil identificação do rótulo do campo pelos diferentes usuários, também aumenta a área de toque. Como assim? O usuário não precisa clicar apenas em cima do campo para que o foco seja direcionado para ele. Se o usuário clicar no rótulo, o campo já recebe o foco. 

Informar o rótulo apenas pelo placeholder

Muitas vezes escolhemos pela praticidade, o problema de escolher esse tipo de abordagem está principalmente relacionado ao esquecimento do significado do campo. O ideal é sempre ter um rótulo que continue sendo exibido, mesmo após o preenchimento.

Erros sendo reportados apenas por cores

Erros em vermelho, alertas em amarelo ou laranja, sucesso em verde. Quase uma regra básica e muito intuitiva pelos usuários. Mas será que apenas cores são suficientes para passar alertas e mensagens? Não. Não devemos passar uma informação apenas por cores, é necessário inserir algo a mais para que o usuário perceba aquela informação. Isso vale para links, botões, dentre outros.

Texto

• Alinhamento de texto: O recomendado é utilizar o alinhamento a esquerda, pois é o nosso formato de leitura. Alinhamentos centralizados, a direita ou justificados, podem ser utilizados, mas com moderação. Devem conter textos pequenos e apenas para pequenos destaques.
• Evite colocar textos em itálico: Assim como alinhamento, o ideal é não utilizar itálico em textos para criar a ideia de destaque. Esse tipo de formatação, dificulta a leitura de diferentes grupos de usuários. Se for extremamente necessário, utilize sempre com moderação e em pequenos trechos.
• Textos longos: o ideal é sempre quebrar em parágrafos e tentar simplificar o vocabulário utilizado.
• Evite textos com espaçamentos muito longos/pequenos, espaçamento longos ou pequenos podem causar dificuldades na compreensão do conteúdo. 

Estas são apenas algumas dicas bem rápidas sobre como podemos melhorar e oferecer experiências melhores a diferentes usuários. São ajustes pequenos e que considero com resultados efetivos. Claro que as dicas de boas práticas para desenvolvimento de aplicações digitais para todas as pessoas são muito mais ricas.
Prometo escrever mais para compartilhar de outras formas os conhecimentos que venho aprendendo ao longo dos anos.

Abraços,
Por uma web mais inclusive e para todas as diversidades de usuários.

⚠️ Referências das Imagens e exemplos É importante dizer que as imagens que foram usadas nos exemplos de problema e solução, foram retiradas de aplicações digitais reais. E as correções foram aplicadas no navegador, utilizando apenas alterações na estrutura do HTML e CSS.