Acessibilidade ADA, o mundo da inclusão na web
Todos os dias, aprendemos como sociedade a ser mais tolerantes com as nossas diferenças, enfatizando a aceitação, o amor e, o mais importante, a inclusão.
Esse ponto, inclusão, é o eixo central do nosso artigo e quero te contar como você pode fazer dos seus sites um lugar seguro para seus usuários.
Para abordar o assunto de forma mais explícita, começarei explicando o que é o ADA, sigla em inglês para American with Disabilities Act. Este termo se refere àquelas pessoas com deficiência que dificulta ou até mesmo impossibilita a realização de ações de forma convencional.
Globalmente, a Organização Mundial da Saúde (OMS) estima que aproximadamente 15% da população mundial vive com algum tipo de deficiência. Portanto, aproximadamente 1,185 bilhão de pessoas no mundo sofrem de uma condição que dificulta a realização de suas atividades diárias, nosso trabalho como desenvolvedores é ajudar o mundo a preencher essa lacuna.
Felizmente para todos nós, vivemos na era da tecnologia e temos múltiplas ferramentas que nos ajudarão a inspecionar os nossos sites, dando-nos maior visibilidade dos pontos de oportunidade para tornar um site acessível a todos os utilizadores.
A seguir darei uma lista das vantagens que ter sites com nível completo de conformidade em ADA nos proporciona:
- Melhor experiência do usuário para todos: As melhorias na acessibilidade beneficiam frequentemente todos os utilizadores, não apenas aqueles com deficiência. Por exemplo, texto claro e bem estruturado, opções de tamanho de fonte ajustáveis e elementos de navegação intuitivos podem melhorar a experiência de todos os visitantes.
- Motor de Otimização de Busca: Os motores de busca valorizam sites acessíveis, pois as práticas de acessibilidade muitas vezes coincidem com as boas práticas de SEO. Um site bem estruturado, com conteúdo descritivo e tags adequadas, pode melhorar a visibilidade nos resultados de busca.
- Aumento de audiência e alcance: Ao tornar seu site acessível, você amplia seu público-alvo. As pessoas com deficiência representam uma parte significativa da população e ter um website acessível permite chegar a este segmento de utilizadores que de outra forma poderiam ter sido excluídos.
- Conformidade legal: A ADA é uma lei dos Estados Unidos que exige que as organizações proporcionem igualdade de acesso e oportunidades às pessoas com deficiência. A adesão às diretrizes de acessibilidade ajuda a evitar ações judiciais e possíveis penalidades legais.
- Melhoria da reputação e imagem da marca: Demonstrar um compromisso com a acessibilidade e a inclusão melhora a imagem da sua marca e mostra que você se preocupa com todos os seus usuários. Isso pode gerar confiança, fidelização e um melhor posicionamento no mercado.
As ferramentas são muitas e basta uma rápida pesquisa no Google para acessar uma lista enorme e selecionar a que melhor se adapta ao seu projeto. Nesta ocasião, compartilharei recomendações e exemplos globais que darão aquele toque inclusivo aos seus desenvolvimentos:
Tamanho
Uma das deficiências mais comuns que se desenvolve progressivamente com a idade é a visual. Não é de surpreender que existam livros físicos, em sua versão “em letras grandes”. Basicamente, algo assim se aplica aos nossos sites. Aqui está uma proposta dinâmica para poder cumprir os regulamentos da ADA:
<!DOCTYPE html>
<html>
<head>
<title>Tamanho da Fonte ADA</title>
<style>
body {
font-size: 1rem;
/* Tamanho da fonte base */
}
h1 {
font-size: 2rem;
/* Tamanho da fonte para cabeçalhos */
}
p {
font-size: 1rem;
/* Tamanho da fonte para parágrafos */
}
</style>
</head>
<body>
<h1>Bem-vindo ao nosso site</h1>
<p>Nosso site é dedicado a fornecer informações e recursos úteis para pessoas com deficiência. Nos
esforçamos para garantir que nosso conteúdo seja acessível a todos.</p>
</body>
</html>
Neste exemplo, um tamanho de fonte base de 1rem é usado no elemento <body>. Em seguida, os tamanhos das fontes são especificados para os elementos <h1> e <p>. O tamanho da fonte dos títulos (<h1>) está definido como 2rem, enquanto o tamanho da fonte dos parágrafos (<p>) fica em 1rem.
O uso de unidades relativas permite que o tamanho da fonte seja ajustado com base nas preferências do usuário, como aumentar ou diminuir o tamanho do texto no navegador ou dispositivo. Isso ajuda a garantir que o conteúdo seja legível e acessível a pessoas com diferentes necessidades visuais. Lembre-se de que o tamanho exato da fonte pode variar dependendo do contexto e das preferências de design, mas usar unidades relativas é uma boa prática para acessibilidade.
Contraste de cor
Assim como o tamanho, algo que pode causar desconforto em alguns usuários é o contraste de cores, referindo-se à relação direta entre os elementos de nossos sites e as paletas de cores que interagem ao seu redor.
Pode parecer uma questão de gosto à primeira vista, mas uma má combinação de cores pode fazer com que algumas pessoas percam de vista elementos importantes do seu site, por isso deve-se levar em consideração que, para proporcionar uma visualização amigável aos nossos usuários, certamente nós precisaremos usar ferramentas externas que nos dêem opções de contraste e que ajudem em uma interação web mais amigável.
Basta procurar a combinação de cores que melhor se adapta ao nosso projeto:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de cores contrastantes e texto ADA</title>
<style>
body {
background-color: #FFFFFF;
/* Fundo branco */
cor: #000000;
/* Texto preto */
}
</style>
</head>
<body>
<h1>Bem-vindo ao nosso site</h1>
<p>Nosso site é dedicado a fornecer informações e recursos úteis
para pessoas com deficiência. Nós nos esforçamos para garantir que nosso
conteúdo seja acessível a todos.</p>
</body>
</html>
Neste exemplo, CSS é usado para aplicar o contraste de cores adequado. O fundo branco é definido como background-color: #FFFFFF, e o texto preto é definido como cor: #000000. Esses valores representam cores com alto contraste para melhorar a legibilidade.
Vejamos este outro exemplo, onde podemos ver uma discrepância entre cores que pode afetar nossos usuários.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de cores contrastantes e texto não ADA</title>
<style>
body {
background-color: #00FF00;
/* Fundo verde claro */
color: #FFFF00;
/* Texto amarillo */
}
</style>
</head>
<body>
<h1>Bem-vindo ao nosso site</h1>
<p>Nosso site é dedicado a fornecer informações e recursos úteis para pessoas com deficiência.
Nós nos esforçamos para garantir que nosso conteúdo seja acessível a todos.</p>
</body>
</html>
Neste exemplo, o fundo está definido para uma cor verde clara (#00FF00) e o texto em amarelo (#FFFF00). Esse contraste de cores é inadequado e dificulta a legibilidade, principalmente para pessoas com deficiência visual.
Etiquetas “Texto alternativo”
Certamente você sabe que, hoje, existem ferramentas que servem como uma espécie de narrador para sites e, embora sejam programas extremamente amigáveis e úteis, não funcionam por mágica, por isso precisamos apoiá-los fornecendo informações com o que se conhece como texto alternativo, adicionando uma descrição de nossos componentes, links, imagens e diversos ativos que interagem com nosso site:
<img src="imagen.jpg" alt="Descrição da imagem" />
Neste exemplo, o atributo é usado alt para fornecer uma descrição textual da imagem. Isto é especialmente importante para usuários que não conseguem ver a imagem, seja por deficiência visual ou porque ela não foi carregada corretamente.
<a href="pagina.html" aria-label="Ir para a página inicial">Inicio</a>
Neste caso, use aria-label para fornecer texto descritivo adicional para o link. Isso é útil para pessoas que usam leitores de tela e precisam de informações contextuais para entender a finalidade do link.
<button type="button" aria-label="Fechar janela">X</button>
Aqui, aria-label é usado para descrever a função do botão. Isso permite que usuários com deficiência visual saibam qual ação será executada quando o botão for clicado, mesmo que não consigam ver visualmente seu conteúdo.
Lembre-se de que é importante fornecer descrições claras e concisas tanto no alt quanto no aria-label. Certifique-se de usar uma linguagem descritiva, mas breve, para que as pessoas com deficiência possam compreender a finalidade dos elementos do seu site.
Conclusão
A inclusão é tarefa de todos. Implementar esse tipo de prática em nossos sites é contribuir com a nossa parte para um mundo mais conectado e unido através da tecnologia.
Até a próxima!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.