Acessibilidade digital: alcance mais pessoas na internet

A acessibilidade digital garante que usuários com diferentes limitações e necessidades possam usar ofertas online de forma plena e sem ajuda de terceiros. O objetivo de sites com acessibilidade é, portanto, evitar a exclusão de certos grupos de pessoas na rede, como, por exemplo, pessoas com limitações físicas ou mentais.

O que é acessibilidade digital?

Barreiras são obstáculos que dificultam ou impedem a utilização igualitária de ofertas digitais. Embora a conscientização sobre acessibilidade em espaços públicos tenha aumentado significativamente nos últimos anos, as barreiras na internet continuam a surgir frequentemente de forma não intencional, seja por decisões técnicas, de design ou de conteúdo. Estudos e exemplos práticos mostram que elementos interativos, como mecanismos de registro ou segurança, podem ser especialmente problemáticos. Alguns captchas com caracteres distorcidos ou tarefas exclusivamente visuais tornam o acesso de pessoas com deficiências visuais a conteúdos web bem difícil e vão contra os requisitos modernos de acessibilidade digital.

Padrões para sites com acessibilidade

O padrão mais importante para a criação de sites com acessibilidade são as WCAG ou as WCAG 2.2 (Web Content Accessibility Guidelines). Trata-se de diretrizes do W3C, que representam o padrão de referência internacional mais recente para acessibilidade digital. O foco das WCAG 2.2 é principalmente na melhora da usabilidade, uma condução mais clara de teclado e foco, bem como uma interação simplificada em dispositivos móveis.

Entre os principais critérios de sucesso das WCAG 2.2 estão, entre outros:

• Foco do teclado visível: elementos interativos devem ser claramente reconhecíveis ao navegar pelo teclado.
• Tamanho mínimo dos elementos de controle: áreas de clique e toque devem ser suficientemente grandes para evitar operações incorretas.
• Alternativas para movimentos de arrastar: funções não devem ser operacionais exclusivamente por meio de arrastar e soltar.
• Evitar entradas redundantes: as informações não devem ser inseridas mais de uma vez.
• Autenticação acessível: processos de login não devem se basear em tarefas cognitivas difíceis de resolver, como certos captchas.

As WCAG 2.2 são, portanto, uma referência central para o desenvolvimento web moderno e formam ao mesmo tempo a base técnica para requisitos legais, como no âmbito da LBI (Lei 13.146) e Decreto 5.296

Percepção

Muitos sites incluem anúncios piscantes, as seções de comentários estão preenchidas com textos em fonte pequena e, às vezes, há música de fundo que pretende sublinhar o ambiente ou tema da página. Dependendo do tipo e grau de limitação, alguns visitantes do seu site podem não perceber totalmente ou de forma alguma esses elementos.

Pessoas cegas navegam, por exemplo, sem estímulos visuais pela internet. Em vez disso, um leitor de tela lê o site. O dispositivo transmite os dados legíveis para as tecnologias assistivas utilizadas. Uma linha em Braille, por exemplo, pode converter o texto em Braille. Assim, a pessoa percebe o seu site por meio do tato. Uma ferramenta de texto para fala reproduz os conteúdos em formato de áudio. Com essa tecnologia, usuários utilizam a audição para processar os conteúdos do site. No exemplo mencionado, a música de fundo pode atrapalhar.

Pessoas com deficiência visual menos acentuada, incluindo muitos idosos, captam o conteúdo do seu site com os olhos, mas dependem de uma imagem muito ampliada. Pessoas com daltonismo, por outro lado, não reconhecem avisos que são expressos apenas por cores. Pessoas surdas não percebem as informações de um arquivo somente de áudio e de grande parte dos arquivos de vídeo.

Compreensão

Usuários muito jovens, idosos ou pessoas com deficiências cognitivas às vezes têm dificuldade para entender um texto cheio de termos técnicos modernos ou abreviações não explicadas. Mesmo quando o site exibe conteúdos relacionados tematicamente distantes uns dos outros, isso dificulta que muitas pessoas reconheçam a relação entre eles.

Interação e navegação

Como cada vez mais pessoas acessam sites por meio de smartphones, é extremamente frustrante para elas quando os links não podem ser selecionados com precisão com o dedo. Se o site não está otimizado para smartphones e os links estão em tamanho de fonte pequeno e próximos uns dos outros, isso é muito inconveniente também para pessoas idosas com mãos trêmulas.

Para pessoas com deficiência física, foram desenvolvidas inúmeras ferramentas que facilitam o uso do computador: para esse fim, algumas ferramentas captam os movimentos oculares, enquanto outras tecnologias são utilizadas via teclado. Em princípio, um site com acessibilidade deve ser projetado de forma que possa ser avaliado por tais tecnologias assistivas: se sua presença on-line não puder ser navegada com elas, potenciais clientes que dependem dessas tecnologias não terão chance de usufruir totalmente de seus serviços.

Se os usuários precisarem preencher um formulário, como para inscrição em um newsletter, não é incomum que ocorram erros. A senha está curta demais ou a data de nascimento não corresponde aos parâmetros indicados. Portanto, forneça instruções claras para a correção de erros. A interação com um site também inclui a navegação. Pessoas que utilizam dispositivos com tela pequena ou trabalham com ampliação de tela significativa precisam de caminhos de navegação adaptados e dependem de uma estrutura clara e organizada do site.

Entradas

Espaços para comentários permitem que os usuários deem feedback. Por meio deles, podem expressar suas opiniões sobre um produto ou conteúdo ou interagir com outras pessoas. Pessoas com deficiência visual frequentemente usam uma lupa de tela ao escrever no monitor. Com isso, os elementos aparecem significativamente maiores e a distância entre a o espaço de leitura e o campo de entrada aumenta. Portanto, organize os elementos visualmente próximos uns dos outros para facilitar essa interação para seus usuários.

Quais são as vantagens do web design acessível

Se você eliminar barreiras on-line, melhora a usabilidade do seu site e, consequentemente, seu ranqueamento no Google. O web design acessível é, portanto, vantajoso também do ponto de vista econômico e requer um esforço adicional mínimo. Além disso, sites com acessibilidade cumprem tanto a Lei Brasileira de Inclusão quanto o Decreto de 2004. Outro fator não menos importante para as empresas: a acessibilidade digital permite que você alcance um maior público, tornando-se acessíveis a mais pessoas do que sites não acessíveis.

Como criar sites com acessibilidade: dicas e exemplos

Quem deseja criar sites com acessibilidade deve, especialmente, revisar a estrutura das informações e os diversos componentes visuais da presença on-line.

Passo 1: garantir uma estrutura clara de informações

Estruture seu site de forma clara e utilize uma linguagem amigável ao usuário. Dessa forma, você atrai mais leitores e melhora simultaneamente seu ranqueamento no Google (pois os mecanismos de busca também avaliam a legibilidade dos textos). Se pretende manter um bom SEO, garantindo que a arquitetura do seu site seja compreensível e clara, preste atenção também aos seguintes elementos:

Passo 2: estimular com elementos visuais

Se você puder aumentar as fontes ou alterar suas cores, isso ajuda pessoas com deficiência visual ou daltonismo a reconhecer melhor os conteúdos do site. O conteúdo deve se destacar bem do fundo em termos de cor, para facilitar a leitura. Destaque elementos interativos com botões ou marcações coloridas. Por exemplo, quando um link muda de cor ao navegar com o teclado, ao passar o mouse sobre ele ou ao ser clicado. Além das cores, use também outros sinais, como números ou asteriscos, para transmitir informações.

Close

Pessoas que sofrem de crises epilépticas estão em risco quando um site com acessibilidade contém gráficos ou vídeos que piscam mais de três vezes por segundo. Cientistas também descobriram que padrões de grades com contornos nítidos e alto contraste podem provocar crises em pessoas com epilepsia fotossensível.

Passo 3: apresentar informações de maneira diversa

Leve em conta o design acessível de sites no seu dia a dia. Para a otimização de mecanismos de busca, para fins de RP ou para apresentar novas ofertas de vendas, você carrega novos conteúdos diariamente. Facilite o acesso ao ajustar as informações às necessidades dos visitantes.

Um componente fundamental da acessibilidade digital, que também desempenha um papel na otimização de mecanismos de busca, é a atribuição de texto alternativo para imagens. Crawlers e leitores de tela não conseguem avaliar o conteúdo das imagens. Isso vale também para usuários com deficiência visual. O texto alternativo informa, portanto, sobre o conteúdo da imagem. Além disso, visitantes com conexões de internet lentas, em que as imagens carregam lentamente ou não carregam, também se beneficiam dos textos alternativos.

Transcrições e legendas

Um esforço mais extenso é a criação contínua e em tempo hábil de transcrições e legendas. Com essas ferramentas, você pode preparar as informações de conteúdo de áudio para pessoas surdas. A transcrição, que reproduz o falado, assim como sons e ruídos em forma de texto, deve ser colocada o mais próximo possível do respectivo conteúdo de áudio, por exemplo, por meio de um botão com link para o documento.

Legendas facilitam significativamente o entendimento de vídeos na web para pessoas com alguma deficiência auditiva. Também usuários que não desejam usar a reprodução de som (como, por exemplo, para não incomodar o ambiente com ruídos) se beneficiam dessa função. Pessoas com deficiências cognitivas ou distúrbios comportamentais, como TDAH, assimilam melhor as informações transmitidas por vídeos, de modo semelhante às pessoas com deficiência auditiva, quando podem desligar os ruídos de fundo por meio de uma configuração do player de vídeo.

Audiodescrição

Pessoas com acuidade visual de menos de 30% são consideradas deficientes visuais, e com menos de 2%, pessoas cegas. Elas percebem estímulos visuais de forma limitada ou não percebem. Para que essas pessoas possam entender seu conteúdo de vídeo, deve-se incluir uma trilha de áudio adicional. Nesta trilha, fornecem-se explicações sobre componentes visuais, como paisagens ou pessoas, e descrevem-se brevemente ações visíveis. Coloque tais explicações nas pausas de conversação e som da gravação original, para que as trilhas sonoras não se sobreponham.

Linguagem simples

A linguagem simples expressa conteúdos de forma muito simples. Ela ajuda pessoas com deficiências cognitivas a entender melhor assuntos complexos. A linguagem simples evita, por exemplo, o uso do modo conjuntivo, de sinônimos e de negações. Frases em linguagem simples são curtas e têm apenas uma declaração de conteúdo cada. Pessoas com limitações cognitivas têm o mesmo direito à informação que todas as outras pessoas. Por isso, jornais diários em suas plataformas on-line, como um bom exemplo de sites com acessibilidade, disponibilizam cada vez mais versões de seus artigos em linguagem simples. Instituições públicas também utilizam cada vez mais a linguagem simples para textos informativos.

Uma forma menos rigorosa é a chamada linguagem simples, que corresponde aproximadamente ao nível de linguagem A2 ou B1 no padrão de nivelamento europeu.

Passo 4: tornar o site compatível

Leitores de tela e outras tecnologias assistivas tornam a acessibilidade na internet possível para muitos. Os programas processam documentos da web da esquerda para a direita e de cima para baixo completamente. Eles trabalham de forma estritamente linear. Por isso, deve-se separar layout e design. Caso contrário, os leitores de tela processam a página incorretamente. Contribua para que os usuários possam navegar de forma eficiente em seu site, respeitando as regras básicas a seguir.

Links de navegação rápida e outras abreviações

Leitores de tela transmitem informações de texto para softwares de saída de voz e linhas Braille. Para isso, eles leem a página de cima para baixo, isso inclui também elementos recorrentes como a barra de navegação, ícones ou links para páginas subordinadas. Para que os leitores não repitam essa informação desnecessariamente a cada página aberta, deve-se incluir links de navegação rápida (conhecidos como skip links).

Usuários que navegam apenas com o teclado, possivelmente com um acessório bucal, também enfrentam grandes dificuldades se precisarem clicar dentre muitos elementos. Essas pessoas se beneficiam de um skip link no início da página, que deve ser o mais visível possível:

<a href="#content">Pular navegação</a>
<main id="content">
    <h1>Título Principal</h1>
    <p>Primeiro parágrafo</p>
</main>

Existem skip links que são invisíveis no layout, mas o leitor de tela transmite ao usuário a mensagem do texto alternativo “Pular navegação” quando o código é assim:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Pular navegação" width="5"></a>

É importante que os skip links estejam o mais à frente possível no código. Coloque o texto âncora no início do conteúdo principal:

<div id="content"></div>

Use os skip links com moderação, pois um excesso pode anular o efeito positivo e fazer com que os usuários tenham que clicar em muitos elementos. Uma solução mais elegante é o uso de ARIA Landmarks e uma boa estruturação do documento. Recomenda-se o uso de elementos HTML5.

Outra ajuda seria um índice no início do documento, que redireciona os usuários para as respectivas seções via links internos. Leitores de tela modernos leem as respectivas manchetes. Ao usar manchetes claras e bem estruturadas, você aumenta a legibilidade tanto para mecanismos de busca quanto para tecnologias assistivas.

Tabelas de dados em vez de tabelas de layout

Para sites com acessibilidade de acordo com as diretrizes do W3C, utilize idealmente apenas tabelas de dados. Leitores de tela têm menos problemas com esse formato para retransmitir informações de forma inteligível após a conversão. Tabelas de layout dão uma estrutura visual à página, mas dificultam para os leitores de tela a interpretação clara do conteúdo.

Defina tabelas de layout apenas com elementos simples: TABLE, TR e TD (respectivamente: tabela, linha e célula). Utilize elementos estruturantes para criar associações lógicas entre células, assim o leitor de tela lê a tabela de layout como uma tabela de dados. Você contradiz isso diretamente ao remover determinados elementos da tabela da árvore de acessibilidade.

Para seus sites, use o código role=”none” como no exemplo. Isso se aplica à tabela e aos seus elementos filhos. Se você aninhar tabelas, deve definir ambos elementos dessa forma.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Exemplo de texto <abbr title="por exemplo">p.ex.</abbr> sobre ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Site com acessibilidade: lista de verificação

Quando você concluir a criação dos seu site com acessibilidade, consulte nossa lista de verificação para garantir que você tenha considerado os fatores importantes.

✓ Estrutura de informações bem organizada e compreensível

✓ Uso de linguagem simples e com acessibilidade

✓ Textos alternativos para imagens

✓ Transcrições de vídeo e áudio

✓ Destaques coloridos para conteúdos importantes

✓ Alto contraste

✓ Suporte para leitores de tela

Ferramentas gratuitas para a criação de sites com acessibilidade

Existe uma série de ferramentas diferentes que podem ajudar na construção de uma presença na web acessível. A seguir, apresentamos algumas das ferramentas mais conhecidas:

• Accessibility Checker: com a ajuda da aplicação Accessibility Checker, você pode testar gratuitamente a conformidade WCAG do seu site com acessibilidade no espaço de língua inglesa.
• Siteimprove: o Accessibility Checker da Siteimprove oferece um check-up gratuito para sites com acessibilidade, que é enviado por e-mail.

Conclusão: acessibilidade digital melhora a UX para todos

Ao tornar seu site acessível, você aumenta a usabilidade e melhora a experiência do usuário. Usuários com dispositivos móveis, pessoas com deficiências físicas ou cognitivas, idosos e usuários inexperientes acharão seu site mais fácil de navegar. Estruturar claramente sua presença na web e apresentar informações de forma inclusiva também melhora seu ranking nos mecanismos de busca e aumenta o tempo de permanência dos visitantes. Embora seja necessário um certo grau de trabalho adicional e testes, o esforço compensa: a acessibilidade na internet beneficia a todos.