Como Tornar Sites WordPress Acessíveis

Este post foi escrito por Amber Hinds, CEO da Equalize Digital, uma B Corporation certificada especializada em acessibilidade WordPress. Se você quiser saber mais sobre a Equalize Digital e seus serviços, visite o site da empresa.

Milhões de pessoas em todo o mundo têm uma deficiência que afeta a maneira como usam a Internet e, após uma pandemia que aumentou a necessidade de compras on-line fáceis, pedidos de comida e até serviços de saúde remotos, a acessibilidade na Web é mais importante do que nunca.

Este guia de acessibilidade na Web discute o que é acessibilidade, por que é importante e como tornar os sites do WordPress acessíveis, incluindo a identificação de problemas comuns por meio de testes.

Neste artigo, abordarei:

• O que é acessibilidade na web?
• Por que a acessibilidade é importante
• Quais são alguns problemas comuns de acessibilidade?
• Testando sites WordPress para acessibilidade
• Manter um site acessível

O que é acessibilidade na Web?

Simplificando, sites acessíveis são sites que podem ser usados ​​por todas as pessoas, incluindo pessoas que podem não interagir com a web por meio de uma configuração típica de teclado e mouse, e aquelas que têm uma variedade de diferenças intelectuais ou físicas.

Recursos específicos devem ser incorporados aos sites para torná-los utilizáveis ​​e compreensíveis para pessoas com deficiência. As deficiências auditivas, visuais, cognitivas, motoras ou de aprendizagem requerem adaptações e modificações no site para torná-las utilizáveis. Dependendo de sua situação, as pessoas com deficiência usam vários dispositivos de assistência, como leitores de tela, para acessar sites.

Web designers e desenvolvedores precisam garantir que o conteúdo e a funcionalidade de seus sites sejam perceptíveis, operáveis, compreensíveis e robustos (POUR), o que significa que o conteúdo e a funcionalidade podem ser acessados ​​e compreendidos por todas as pessoas em todos os dispositivos.

Alguns exemplos de recursos que tornam os sites mais acessíveis incluem:

• legendas ocultas e transcrições para arquivos de vídeo e áudio
• texto alternativo em imagens
• pule links para ajudar na navegação pelo teclado
• contraste de cor apropriado para tornar o texto mais legível

Por que a acessibilidade é importante

A acessibilidade do site causa impacto em todos que usam a web. Se os sites de seus clientes ou de seus clientes estiverem acessíveis, isso garante que todos tenham acesso igual a informações on-line, necessidades, entretenimento, compras e muito mais, independentemente da capacidade.

Mas a acessibilidade do site não é apenas um bom karma; também tem efeitos do mundo real nas classificações dos mecanismos de pesquisa, novas vendas e visitantes do site, complicações legais e imagem da marca.

Classificação do mecanismo de pesquisa

Fazer correções de acessibilidade pode melhorar a classificação do mecanismo de pesquisa de um site. Muitos recursos de acessibilidade, como texto alternativo em imagens e conteúdo estruturado adequadamente com títulos, ajudam tanto na acessibilidade quanto na otimização do mecanismo de pesquisa (SEO). A classificação mais alta em uma página de resultados de pesquisa pode aumentar a visibilidade com novos clientes ou clientes, levando ao aumento do tráfego do site, conversões, assinantes de blog ou boletim informativo e muito mais.

Aumento de Vendas

O CDC afirma que, a partir de 2018, 1 em cada 4 americanos tem uma deficiência. Os americanos com deficiência gastaram mais de US$ 200 bilhões em gastos discricionários on-line anualmente. Os recursos de acessibilidade permitem que mais pessoas encontrem e usem sites, aumentando a oportunidade de novas vendas, conversões e clientes recorrentes. Quando muitos sites não são acessíveis no mundo de hoje, qualquer site acessível ficará muito acima da concorrência.

É legalmente obrigatório

Todos os sites precisam atender aos padrões de acessibilidade da web definidos na Lei dos Americanos com Deficiência (ADA). Sob o ADA, foi estabelecido um precedente legal que estabelece sites como locais de acomodação pública. Isso significa que os sites de negócios, que são essencialmente suas vitrines digitais, precisam ser acessíveis da mesma forma que um prédio comercial de tijolo e argamassa precisa ser acessível.

Sites de agências governamentais locais, estaduais e federais e quaisquer sites de organizações e projetos financiados pelo governo federal também devem atender aos padrões da Seção 508. Além disso, há uma variedade de leis estaduais e internacionais que exigem que os sites sejam acessíveis.

Se um site não atender aos requisitos de acessibilidade estabelecidos nessas diretrizes, a organização pode correr o risco de ser processada ou, em alguns casos, multada pelo governo. Segundo a Usablenet, em 2020, foram movidos 3.550 processos de acessibilidade de sites nos Estados Unidos. Manter a conformidade legal é uma parte importante dos negócios, e ter um site acessível é uma maneira de as empresas cumprirem suas obrigações legais.

Imagem de marca

Empresas e organizações sem fins lucrativos que tomam medidas para tornar seus sites WordPress mais acessíveis mostram que estão praticando responsabilidade social e afirmam que querem tornar a internet um lugar para todos. O compromisso organizacional com a acessibilidade mostra às pessoas que elas são cuidadas de forma profundamente humana, o que gera fidelidade e pode elevar a imagem da marca.

Quais são alguns problemas comuns de acessibilidade?

Minha empresa, Equalize Digital, é uma empresa de consultoria em acessibilidade que realiza auditorias de acessibilidade em sites para empresas, organizações sem fins lucrativos e agências governamentais. Em todos os nossos testes, vemos muitos problemas de acessibilidade repetidos em todos os sites. Esses problemas comuns são problemas relativamente simples de resolver, mas geralmente são ignorados por desenvolvedores, designers e criadores de conteúdo.

Se você quiser ter certeza de que os sites que você cria ou gerencia são acessíveis, comece verificando estes problemas:

Texto alternativo ausente ou de baixa qualidade

Texto alternativo é o que os leitores de tela usam para descrever o conteúdo ou a finalidade de uma imagem para pessoas cegas. Se o texto alternativo for deixado em branco, um leitor de tela irá ignorá-lo completamente ou poderá ler o nome do arquivo da imagem, o que é inútil quando o nome do arquivo é uma sequência de números ou não descreve a aparência. Sem um texto alternativo adequado, os usuários cegos e deficientes visuais não terão contexto ou compreensão de uma imagem.

O texto alternativo de baixa qualidade é problemático porque não descreve a imagem com precisão ou é excessivamente detalhado e pode causar confusão. Palavras e frases como “imagem”, “imagem”, “gráfico de”, “imagem de” não precisam ser adicionadas ao texto alternativo porque o leitor de tela anunciará que uma imagem ou gráfico está presente.

Se você tiver um texto alternativo com mais de 125 a 150 caracteres, alguns leitores de tela serão cortados e a leitura será interrompida. Adicionar pontos dentro do texto alternativo pode fazer com que os leitores de tela façam uma pausa, potencialmente confundindo os ouvintes ou levando-os a acreditar que o texto alternativo terminou.

Contraste de cor insuficiente

No web design, o contraste de cores refere-se à medida de brilho entre a cor de fundo e os elementos coloridos, como texto, botões ou ícones. As cores de fundo e primeiro plano devem ter uma proporção de 4,5:1 para que o texto de tamanho padrão seja considerado suficiente. Você pode testar o contraste de cores inserindo os códigos hexadecimais de ambas as cores em um verificador de contraste de cores gratuito.

Texto Âncora Ambíguo

O texto âncora é uma palavra clicável ou um grupo de palavras em uma página da web. Clicar no texto âncora pode levá-lo a um novo site, baixar um documento, abrir uma imagem ou vídeo em uma nova guia. O texto âncora é considerado ambíguo se não fizer sentido fora do contexto ou não descrever o propósito do link. Alguns exemplos de texto âncora ambíguo incluem “link”, “clique aqui”, “saiba mais” ou “continuar”. Ao adicionar links ao conteúdo, é essencial que, se alguém ouvir apenas o link de forma independente (sem nenhum texto ao redor), saiba para onde o link está apontando ou o que acontecerá quando o link for clicado.

Legendas e transcrições ausentes

As legendas pegam o conteúdo falado e não falado, como efeitos sonoros, música ou risadas de um vídeo, e o descrevem por meio de texto. Eles aparecem na tela durante um vídeo, para que usuários surdos e com deficiência auditiva possam entender o que está acontecendo no vídeo. Além disso, as legendas devem corresponder ao tempo do vídeo. É importante observar que as legendas devem ser precisas; as legendas geradas automaticamente precisam ser verificadas quanto à precisão.

Uma transcrição é um registro escrito do que é dito em um clipe de áudio ou durante um vídeo. As transcrições fornecem um meio secundário de entender o conteúdo de vídeo ou arquivos de áudio. Eles devem ser usados ​​junto com as legendas em um vídeo para que as pessoas possam ler a transcrição em vez de assistir ao vídeo. Isso é importante porque nem todos os usuários podem ler as legendas. As transcrições também oferecem o benefício de serem facilmente traduzidas para outros idiomas e podem ajudar o SEO.

Testando sites WordPress para acessibilidade

A melhor maneira de testar a acessibilidade de sites é realizar uma combinação de testes automatizados, manuais e de usuário.

Teste de Acessibilidade Automatizado

O teste de acessibilidade automatizado é realizado com ferramentas de verificação de IA. Existem muitas ferramentas gratuitas e pagas que podem oferecer uma variedade de recursos de verificação de acessibilidade. Ao escolher uma ferramenta automatizada, aqui estão algumas coisas a serem lembradas:

• O tamanho do site. Se você tiver um site menor, uma ferramenta gratuita pode funcionar para você. Se você tiver um site maior, como um site com um blog ou seção de comércio eletrônico com milhares de postagens, uma ferramenta paga provavelmente será mais apropriada.
• Quanto suporte você precisa. Se precisar de ajuda para encontrar erros de acessibilidade em seu site para corrigi-los, as ferramentas gratuitas podem ser uma ótima opção. Se você precisar de ajuda para entender os erros de acessibilidade ou quiser que outra pessoa os corrija, tente encontrar uma ferramenta com opções de suporte integradas ou oferecidas pelos desenvolvedores. Ter suporte disponível é fundamental se você for novo na correção de acessibilidade.
• Experiência de usuário. Algumas ferramentas automatizadas de acessibilidade podem ser usadas diretamente em seu site, por exemplo, por meio de uma extensão do navegador ou no painel do WordPress. Outras ferramentas exigem que você use uma interface totalmente separada do seu site. Se você deseja ver erros de acessibilidade enquanto trabalha em seu site, escolha uma ferramenta que ofereça relatórios no local. Isso torna mais fácil para você verificar continuamente a acessibilidade do seu site enquanto edita o conteúdo do site.

Duas ferramentas gratuitas populares que podem ser usadas em qualquer site são WAVE e Axe. Essas ferramentas têm extensões do Chrome e do Firefox disponíveis para testar URLs únicos, um de cada vez, e planos pagos que permitem testes em massa e recursos adicionais.

Plug-in WordPress do Verificador de Acessibilidade

Se você deseja executar verificações de acessibilidade em massa e ver relatórios no painel do WordPress, o plug-in WordPress Accessibility Checker é a melhor ferramenta. Você pode baixar a versão base do plugin gratuitamente no WordPress.org.

O verificador de acessibilidade verifica páginas e postagens em busca de erros de acessibilidade ou possíveis problemas e os exibe diretamente na tela de edição dessa página ou postagem. Esses relatórios in-page são úteis não apenas para verificar se o site está acessível, mas também para monitorar a acessibilidade contínua.

O Accessibility Checker executa mais de 40 verificações diferentes, inclusive para os problemas comuns identificados acima. A versão gratuita verifica postagens e páginas, e a versão Pro inclui verificações completas de sites de tipos de postagem personalizados e páginas de arquivo. Itens sinalizados ou revisados ​​incorretamente podem ser descartados, permitindo o rastreamento de correções de acessibilidade à medida que são feitas ao longo do tempo. É uma ótima ferramenta para agências, desenvolvedores e usuários do WordPress.

Teste manual

Infelizmente, verificações automatizadas não podem identificar todos os problemas de acessibilidade em um site — alguns problemas só podem ser determinados por um ser humano que acessa o site. Depois de testar o site com uma ferramenta automatizada como o Accessibility Checker, faça um teste manual para garantir que todas as pessoas possam usá-lo, independentemente do dispositivo que estiverem usando.

A primeira etapa em um teste de acessibilidade manual é confirmar que os usuários podem navegar totalmente apenas com um teclado. Vá para o front-end do site e use as teclas tab e de seta para navegar pelo site, certificando-se de não perder o seu lugar à medida que avança e de poder usar todas as partes do site.

Após o teste do teclado, você pode passar para o teste do leitor de tela. Leitores de tela são um tipo de software de tecnologia assistiva que pessoas cegas e com deficiência visual usam para entender o conteúdo da web. Se você tiver um Mac, poderá usar o software VoiceOver integrado ao seu computador. Se você não possui um Mac, pode baixar o leitor de tela gratuito e de código aberto NVDA ou comprar o popular leitor de tela JAWS. É uma prática recomendada testar seu site com dois ou mais leitores de tela, pois nem todos os leitores de tela dizem a mesma coisa para elementos individuais.

Para testar seu site com um leitor de tela, vá para a página que deseja testar e, em seguida, percorra a página como fez durante o teste de navegação do teclado, usando apenas as teclas de tabulação e seta. Ouça o que o leitor de tela diz conforme você se move pela página e sinalize qualquer coisa incorreta ou confusa. Ouça os arquivos de mídia ou controles deslizantes que são reproduzidos automaticamente e interrompem outros conteúdos na página.

Depois de realizar os testes de navegação pelo teclado e leitor de tela, você precisa verificar todos os arquivos de mídia incorporados ou vinculados. Os arquivos de mídia incluem vídeos, arquivos de áudio, PDFs, arquivos .Doc ou .XLS, controles deslizantes de imagem ou texto e widgets ou iFrames de terceiros. Garanta que as pessoas com deficiência possam acessar, interagir e entender o conteúdo apresentado por todos os arquivos de mídia incorporados ou vinculados.

Teste de usuário

Após o teste de acessibilidade automatizado e manual, é recomendável realizar o teste do usuário. O teste do usuário envolve a contratação de usuários de tecnologia assistiva do mundo real para testar erros de acessibilidade em seu site. Normalmente, um usuário de teste recebe um resumo de um desenvolvedor da Web com objetivos específicos. O usuário de teste tentará atingir esses objetivos e fornecer feedback ao desenvolvedor.

Você pode contratar usuários de teste individuais por meio de programas pagos ou voluntários ou encontrar uma empresa de acessibilidade que ofereça serviços de teste de usuário.

Conclusão: Mantendo um site acessível

É importante observar que, assim como o SEO, a acessibilidade é um processo contínuo que requer monitoramento e modificações constantes. Para garantir que seu site permaneça acessível, crie um plano para:

• Monitore e teste regularmente os erros de acessibilidade usando uma ferramenta como o plug-in Accessibility Checker.
• Treine desenvolvedores da web, designers e criadores de conteúdo nas práticas recomendadas de acessibilidade na web. Se você estiver lançando sites para clientes, certifique-se de que eles saibam como adicionar conteúdo de maneira acessível após o lançamento.
• Mantenha-se informado sobre quaisquer diretrizes de acessibilidade ou mudanças na lei que você deve seguir.

Essas etapas ajudarão a garantir que seu site permaneça acessível e que todas as pessoas tenham acesso igual a informações, produtos e serviços na Web, independentemente de suas habilidades.