Você já imaginou visitar um site e descobrir que simplesmente não consegue ler o texto, usar os menus ou entender qualquer coisa? É difícil de acreditar, mas essa é a realidade para muitas pessoas com deficiência todos os dias.
Quando as pessoas criam sites, a acessibilidade é algo que muitas vezes é negligenciado. Mas realmente não deveria ser, pois pode criar uma barreira entre seu conteúdo e muitos de seus visitantes. Em nossa experiência, quando um site não é acessível, ele pode parecer realmente inóspito e até exclusivo.
Garantir que seu site seja acessível não é apenas seguir as regras, é também garantir que todos tenham uma ótima experiência em seu site. Trata-se de ser inclusivo e fornecer uma experiência de usuário excepcional para todos os seus visitantes, independentemente de suas necessidades ou habilidades.
Portanto, se você está pronto para fazer com que seu site seja acolhedor para todos, mostraremos como melhorar a acessibilidade do seu site WordPress passo a passo.
Por que a Acessibilidade é Importante para o Meu Site WordPress?
Em web design, acessibilidade se refere a técnicas usadas para tornar um site mais fácil de usar para pessoas com deficiência. Alguns visitantes usam tecnologias assistivas para navegar na web, como leitores de tela para pessoas com deficiências visuais e navegação por teclado para pessoas que não conseguem usar um mouse.
Existem algumas melhores práticas comuns recomendadas por especialistas para tornar sites mais acessíveis. Elas ajudam a tornar os sites mais inclusivos e fáceis de usar para todos, independentemente de suas habilidades.
Ao priorizar a acessibilidade, mais pessoas poderão navegar em seu site WordPress e explorar seu conteúdo. Se você administra uma loja online, então você também aumentará suas chances de converter usuários em clientes.
A acessibilidade também é importante para a otimização para mecanismos de busca (SEO). O Google valoriza sites com boa usabilidade. Além de tornar seu site mais responsivo para dispositivos móveis, você também pode priorizar a inclusão em seu design web para melhorar os rankings.
Além disso, se você é proprietário de um site de negócios e a parte frontal do seu site for inacessível, você poderá enfrentar consequências legais.
A Lei dos Americanos com Deficiências (ADA) afirma que os consumidores podem registrar uma reclamação se um site não cumprir as diretrizes de acessibilidade. Além disso, sua reputação pode ser arruinada, o que pode resultar em perdas financeiras.
Como o WordPress Torna Meu Site Mais Acessível?
O WordPress possui várias funcionalidades integradas para ajudar os usuários a tornar seus sites WordPress acessíveis. Por exemplo, por padrão, você pode adicionar texto alternativo (alt text) e atributos de título a imagens para que leitores de tela possam lê-los em voz alta para usuários com deficiências visuais.
O WordPress também tornou obrigatório que todo código novo e atualizado no WordPress siga seus padrões de codificação de acessibilidade. Isso é para garantir que os desenvolvedores do WordPress cumpram as melhores práticas de acessibilidade ao criar temas e plugins.
Além disso, o WordPress inclui recursos que facilitam a criação de sites por usuários com deficiências, como o modo de acessibilidade para adicionar widgets.
Para mais informações, recomendamos acompanhar a tag de Acessibilidade na página Make WordPress Core para mais informações.
Com tudo isso em mente, o WordPress não é totalmente acessível de imediato. Como proprietário de um site, é importante tomar medidas extras para ajudar seu site a atender aos padrões de acessibilidade.
Dividimos este guia em algumas dicas fáceis para melhorar a acessibilidade do seu site WordPress. Você pode usar estes links rápidos para navegar até uma seção específica:
- Familiarize-se com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG)
- Use um Tema WordPress Pronto para Acessibilidade
- Instale um Plugin de Acessibilidade WordPress
- Verifique o Contraste de Cores do Seu Site
- Adicione Texto Alternativo e Atributos de Título às Imagens
- Adicione Rótulos a Todos os Campos de Formulário
- Use Tags de Cabeçalho Adequadas em Seu Conteúdo
- Use Texto de Âncora Descritivo
- Adicione Legendas ou Transcrições a Conteúdo de Vídeo e Áudio
- Faça Testes de Usabilidade e Acessibilidade
- Guias de Especialistas sobre Acessibilidade WordPress
1. Familiarize-se com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG)
Primeiro de tudo, recomendamos a leitura das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Estes são os padrões estabelecidos pela Iniciativa de Acessibilidade Web (WAI) do W3C para que os usuários tornem seus sites mais acessíveis.
Você pode conferir as atualizações WCAG 2.1 e WCAG 2.2 para começar. Se ambos os documentos parecerem muito longos para ler, sinta-se à vontade para marcar esta referência rápida em vez disso.
2. Use um Tema WordPress Pronto para Acessibilidade
Temas prontos para acessibilidade atenderam aos padrões mínimos de acessibilidade que a equipe de revisão de temas do WordPress definiu.
Usar um tema acessível do WordPress não significa que seu site estará automaticamente em conformidade com todos os requisitos de acessibilidade, pois você ainda terá que fazer alguns ajustes por conta própria. No entanto, isso pode dar um impulso para tornar seu site mais acessível.
No mínimo, um tema pronto para acessibilidade terá:
- Menus que podem ser navegados apenas com o teclado.
- Bom contraste de cores que torna o conteúdo legível para usuários com deficiências visuais.
- HTML semanticamente correto, que ajuda as tecnologias assistivas a entender o conteúdo e a estrutura de uma página da web.
Se você quiser ir um passo além, também pode verificar se o tema possui atributos ARIA. Esses atributos são como informações extras que complementam o HTML do seu tema para tornar um site ainda mais fácil de navegar para tecnologias assistivas.
A maneira mais fácil de procurar um tema pronto para acessibilidade é ir em Aparência » Temas no seu painel do WordPress. Em seguida, clique em ‘Adicionar Novo Tema’.
A partir daqui, selecione ‘Filtro de Recursos’ e escolha ‘Pronto para Acessibilidade’.
Sinta-se à vontade para adicionar mais filtros para encontrar o tema que atenda às suas necessidades exatas.
Agora, role para baixo e clique em ‘Aplicar Filtros’.
Você verá então alguns temas prontos para acessibilidade na tela.
Para mais recomendações de temas, confira nossas seleções de especialistas dos melhores temas do WordPress.
3. Instale um Plugin de Acessibilidade para WordPress
Um plugin de acessibilidade para WordPress adiciona recursos úteis para visitantes com deficiência navegarem em seu site.
Um plugin de acessibilidade para WordPress que recomendamos é o WP Accessibility. Algumas das coisas que este plugin pode fazer incluem:
- Adicionar uma barra de ferramentas de acessibilidade
- Detectar se o seu tema está pronto para acessibilidade
- Rastrear como os recursos de acessibilidade em seu site estão sendo usados para que você possa avaliá-los
Primeiro, você precisa instalar e ativar o plugin no WordPress.
Após a ativação, você precisa ir para Configurações » WP Accessibility para configurar o plugin.
Vamos dar uma olhada em cada seção da página de configurações.
Adicionar Links de Pular
Na primeira seção das configurações do plugin, você pode usar links de pular em seu site, e esta configuração está habilitada por padrão. Um link de pular permite que os usuários saltem diretamente para a seção de conteúdo de uma postagem ou página.
Este é um recurso extremamente útil para pessoas que usam leitores de tela. Sem um link de pular, elas terão que ouvir tudo exibido em seu site, incluindo seus menus de navegação, antes de chegarem à parte do conteúdo.
Se o seu tema já usa links de pular, você verá uma notificação confirmando isso.
Barra de Ferramentas de Acessibilidade
O plugin WP Accessibility vem com uma barra de ferramentas de acessibilidade.
Quando você o ativa, o plugin adicionará uma barra de ferramentas em seu site onde os usuários podem redimensionar fontes ou visualizar seu site em modo de cores de alto contraste.
Isso permite que seus usuários selecionem as opções que precisam para tornar a página mais fácil de ler.
Para ativar a barra de ferramentas, basta marcar as caixas de seleção 'Tamanho da fonte' e 'Contraste'.
Existem também configurações onde você pode controlar o tamanho da fonte e a posição da barra de ferramentas.
Se você fizer alterações nessas configurações, certifique-se de clicar no botão 'Atualizar Configurações da Barra de Ferramentas' para armazenar suas configurações.
É assim que a barra de ferramentas se parece em nosso site de teste.
Correções de Acessibilidade
O WP Accessibility também fornece várias correções de acessibilidade que podem resolver problemas potenciais em seu site. Você pode revisar cada opção e ver se precisa dela.
Algumas configurações recomendadas serão marcadas por padrão. Essas opções impedem que links abram em novas janelas, exibem um erro quando você envia uma pesquisa vazia e removem o atributo HTML tabindex onde ele não é necessário para simplificar a navegação pelo teclado.
Se você estiver usando um tema amigável à acessibilidade que já habilitou alguns desses recursos, verá uma mensagem confirmando isso na parte superior da seção.
Não se esqueça de clicar no botão 'Atualizar Configurações Diversas' para armazenar suas alterações.
Recursos de Acessibilidade
O plugin também oferece algumas opções para ajudar a tornar seu conteúdo mais acessível.
O primeiro grupo de configurações torna as imagens mais fáceis de manusear para quem usa leitores de tela.
Existem também opções para exibir resumos no topo de seus posts e páginas. Isso permite que aqueles com leitores de tela ouçam um resumo do conteúdo antes de decidir ouvir o artigo inteiro.
Se você alterar alguma dessas opções, lembre-se de clicar no botão ‘Atualizar Recursos de Acessibilidade’.
Experiência de Teste e Administração
Em seguida, você encontrará algumas configurações que permitem melhorar a acessibilidade da sua área de administração do WordPress e ajudar nos testes.
Esta seção é mais técnica, portanto, certifique-se de consultar a documentação do plugin antes de marcar as caixas.
Certifique-se de clicar no botão ‘Atualizar Ferramentas de Acessibilidade’ para salvar suas alterações.
Remover Atributos de Título
Esta seção permite remover o atributo de título das nuvens de tags.
O atributo de título é considerado inútil por alguns especialistas em acessibilidade. A maioria dos leitores de tela geralmente ignora o atributo de título e, em vez disso, lê o texto da âncora.
Esta configuração está habilitada por padrão, mas se você a alterar, certifique-se de clicar no botão ‘Atualizar Configurações de Atributos de Título’.
4. Verifique o Contraste de Cores do Seu Site
Contraste de cores significa a diferença entre a cor do texto e a cor de fundo. É uma parte muito importante da acessibilidade do site, pois pode afetar a legibilidade do conteúdo do seu site para pessoas com baixa visão e daltonismo.
Para atender aos padrões de acessibilidade da web, o texto normal deve ter um alto contraste de pelo menos 4,5 para 1. Isso significa que o texto precisa ser 4,5 vezes mais brilhante que o fundo.
Para texto maior, o requisito é um pouco menor, 3 para 1. Isso significa que um contraste ligeiramente menor é aceitável. A mesma regra se aplica a gráficos e elementos de interface do usuário, como bordas de campos de formulário.
O plugin WP Accessibility possui um verificador de contraste de cores integrado que você pode usar.
Nas configurações do plugin, basta rolar para baixo até a seção Testador de Contraste de Cores e escolher uma cor de primeiro plano (a cor que você usará para seu texto) e sua cor de fundo.
Em seguida, clique em ‘Verificar Contraste de Cores’.
O plugin então informará se as cores passam ou não no teste de contraste.
Veja como o resultado se parece:
Alternativamente, você pode usar o Verificador de Contraste WebAIM gratuito. Assim como a ferramenta anterior, você só precisará selecionar uma cor de primeiro plano e uma cor de fundo.
Esta ferramenta não apenas testa o contraste de suas cores, mas também mostra como as cores podem parecer como texto normal e grande, bem como objetos gráficos e componentes de interface do usuário.
Para mais detalhes, você pode gostar de ver nosso guia sobre como escolher o esquema de cores perfeito para o seu site WordPress.
5. Adicione Texto Alternativo às Imagens
Além de ser útil para mecanismos de busca, o texto alt é útil para leitores de tela descreverem imagens para pessoas com deficiência visual.
Anteriormente, mencionamos que o WordPress tem um recurso integrado para adicionar texto alt. O processo é bem fácil, e você pode ler tudo sobre como configurá-lo nos seguintes guias:
- Guia para Iniciantes em SEO de Imagens – Otimize Imagens para Mecanismos de Busca
- Texto Alternativo de Imagem vs Título de Imagem no WordPress – Qual a Diferença?
Dica de Especialista: Se você quiser definir automaticamente um formato de texto alt consistente para todas as suas imagens, você pode usar a ferramenta de SEO de Imagem do All in One SEO.
6. Adicione Rótulos a Todos os Campos de Formulário
Se você tem formulários em seu site, então você vai querer ter certeza de usar os rótulos apropriados para cada elemento do formulário. Isso inclui campos de formulário, botões, menus e assim por diante.
O WCAG recomenda adicionar rótulos a todos os elementos de formulário para facilitar a identificação e a transmissão de informações sobre cada um para os usuários por ferramentas assistivas.
Além disso, adicionar rótulos claros e descritivos é uma boa prática de web design. Ao ajudar os usuários a entender para que serve cada campo do formulário, é menos provável que ocorram erros do usuário e mais pessoas poderão enviar seus formulários.
Se você não tem certeza de como criar ótimos formulários, recomendamos dar uma olhada no WPForms. É o melhor criador de formulários do WordPress que torna super fácil personalizar formulários de acordo com suas necessidades exatas, incluindo melhorá-los para acessibilidade.
Você pode ler mais sobre o WPForms em nossa análise do WPForms. Além disso, confira estes guias sobre como criar formulários no WordPress:
- Como Criar um Formulário de Contato no WordPress (Passo a Passo)
- Como Criar um Formulário de Reserva no WordPress
- Como Criar um Formulário de Registro de Usuário Personalizado no WordPress
7. Use Tags de Título Adequadas em Seu Conteúdo
As tags de título são tags HTML que podem marcar os títulos ou subtítulos de uma página da web. Dessa forma, seu conteúdo fica muito mais organizado e fácil de seguir.
Essas tags também ajudam ferramentas como leitores de tela a gerar um esboço navegável para usuários com deficiências visuais. Isso permitirá que eles pulem entre as seções e entendam a estrutura geral do seu conteúdo.
Se você não tem certeza de como aproveitar as tags de título, pode ler nosso guia sobre como usar corretamente as tags de título no WordPress.
8. Use Texto de Âncora Descritivo
O texto de âncora ou link é basicamente as palavras ou frases clicáveis em um link. Geralmente, você pode saber qual texto está vinculado porque ele estará em uma cor diferente.
Frequentemente, os blogueiros usarão o texto do link 'clique aqui' ou 'leia mais' para direcionar os visitantes a uma página.
Esta não é uma boa prática de acessibilidade porque não fornece nenhuma informação sobre para onde o link leva. Isso dificulta para pessoas que usam tecnologias assistivas entenderem o propósito do link.
É por isso que é melhor usar texto de âncora descritivo. Isso significa usar palavras que descrevem sobre o que é o conteúdo quando você clica no link.
Por exemplo, digamos que você queira adicionar um link para um artigo sobre a melhor hospedagem WordPress nesta frase: ‘Siga este guia para aprender sobre os melhores serviços de hospedagem WordPress do mercado.’
Em vez de adicionar o link a ‘Siga este guia’ ou a qualquer outro lugar dessa frase, você deve inseri-lo em ‘melhores serviços de hospedagem WordPress.’ Dessa forma, o usuário terá uma visão geral do que encontrará no conteúdo vinculado
Para mais informações sobre links e texto âncora, consulte nosso guia para iniciantes sobre como adicionar um link no WordPress.
9. Adicione Legendas ou Transcrições a Conteúdo de Vídeo e Áudio
Uma das principais dificuldades para usuários com deficiência auditiva é a incapacidade de entender o conteúdo falado em vídeos e áudios. É por isso que muitos criadores de conteúdo de vídeo e podcasters adicionam legendas ou transcrições.
Na WPBeginner, desaconselhamos fortemente que você faça upload de vídeos para o seu próprio site, pois eles podem deixá-lo lento. Em vez disso, é melhor usar serviços como YouTube ou Vimeo, ambos com ferramentas integradas para adicionar legendas.
Quanto ao conteúdo de áudio, você pode considerar o uso de um serviço de transcrição para converter a fala em texto facilmente. Dessa forma, você não precisará criar manualmente uma versão escrita do seu conteúdo de áudio.
Confira nossa lista dos melhores serviços de transcrição para mais informações.
10. Faça Testes de Usabilidade e Acessibilidade
Se você implementou todas as dicas deste guia, então o passo final é fazer testes de usabilidade e acessibilidade em seu site WordPress.
Este teste pode ajudá-lo a identificar quaisquer problemas restantes e a tornar seu site amigável e acessível para todos.
O WebAIM possui uma Ferramenta de Avaliação de Acessibilidade Web (WAVE) que você pode usar gratuitamente.
Simplesmente digite o nome de domínio do seu site, e a ferramenta identificará quaisquer problemas relacionados à acessibilidade para você.
Você também pode usar um scanner de acessibilidade. Recomendamos conferir o Verificador de Acessibilidade da Equalize Digital. Ele também vem com uma versão de plugin gratuita para verificar posts e páginas ilimitados em seu site.
Após instalar o plugin, você pode simplesmente ir para o editor de blocos da sua página ou post. Se você rolar para baixo até a seção de meta caixa, encontrará um Verificador de Acessibilidade que identifica seus problemas de acessibilidade.
Outra opção é realizar uma auditoria de UX, que basicamente significa verificar seu site para ver se ele tem uma boa experiência do usuário. Basta acessar nosso guia de auditoria de UX para mais informações.
Por último, mas não menos importante, encorajamos você a pedir o feedback dos seus usuários. Embora os testes possam fornecer resultados, obter feedback de visitantes reais que usam os recursos de acessibilidade do seu site pode fornecer insights muito mais precisos.
UserFeedback é o melhor plugin para essa tarefa. Ele permite que você crie pesquisas para coletar as opiniões e pensamentos dos seus usuários. Existem também modelos para feedback de design de site, para que você não precise criar a pesquisa do zero.
Para mais informações, consulte nosso guia sobre como obter feedback de design de site no WordPress.
Guias de Especialistas sobre Acessibilidade WordPress
Agora que você sabe como melhorar a acessibilidade em seu site, talvez você queira ver outros guias relacionados a problemas de acessibilidade do WordPress:
- Como Adicionar Widgets do WordPress no Modo de Acessibilidade
- Como Escolher um Esquema de Cores Perfeito para o Seu Site WordPress
- Como Adicionar um Redimensionador de Fonte no WordPress para Acessibilidade
- Como Adicionar Facilmente o Atributo Title às Imagens no WordPress
- Como Destacar Texto no WordPress (Guia para Iniciantes)
- Texto Alternativo de Imagem vs Título de Imagem no WordPress – Qual a Diferença?
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
A seção sobre contraste de cores foi particularmente esclarecedora.
Bem, como designer web, descobri que usar o Verificador de Contraste WebAIM tem sido inestimável para garantir que meus designs atendam aos padrões WCAG.
Ótimo artigo no geral!
Prajwal Shewatkar
Ter opções de acessibilidade disponíveis em seu site não apenas ajuda pessoas com deficiência, mas também ajuda a construir confiança entre todos os usuários. Como nem todos os outros sites estão prontos para acessibilidade, ter tais opções integradas faz com que seu blog pareça único e mais confiável.
Dorin Mihaila
Bom artigo, acessibilidade é definitivamente algo que você quer ter no site.
Clifford Blaylock
Estou ficando um pouco decepcionado e confuso com o fato de que, hoje em dia, é sempre sugerido que um plugin do WordPress é necessário para fazer a maioria das coisas no WordPress. Neste momento, todos estão falando sobre o quão importante é a velocidade do seu site, mas quanto mais plugins você tiver instalados, mais lenta será a velocidade do seu site. Eu estaria interessado em saber mais fatos sobre este assunto.
Atenciosamente, Cliff
WPBeginner Support
Por favor, veja nossa explicação aqui: Quantos plugins do WordPress você deve instalar em seu site?.
Admin
Mr Leong
Este é um ótimo artigo
Larry Auerbach
Eu poderia usar alguma ajuda com o recurso de agendamento, para permitir que as postagens se publiquem em um determinado dia e hora. Eu não pareço estar fazendo isso corretamente, pois isso não está acontecendo na data e hora que eu pré-configurei na caixa de configurações.
WPBeginner Support
Por favor, dê uma olhada em nosso guia sobre como agendar suas postagens no WordPress. Você também pode querer dar uma olhada em como agendar automaticamente suas postagens de blog do WordPress.
Admin
Anselm Urban
Dizem que o Genesis Framework tem muito boa acessibilidade. Devo usar o plugin mesmo assim?
WPBeginner Support
Você pode tentar e ver se o plugin faz alguma recomendação. Você ainda precisa escolher uma combinação entre funcionalidade, design, acessibilidade e usabilidade. Cabe a você decidir quais configurações de acessibilidade recomendadas você deseja implementar em seu site.
Admin
Dick Foster
Que tal usar “em” em vez de “px” para definir a altura apropriada do texto? O ajuste desse parâmetro está incluído neste plugin?
Muitos sites (incluindo este) têm o que algumas pessoas considerariam texto difícil de ler porque é muito pequeno.
Claro, o Chrome e outros navegadores permitem que você amplie (dê zoom) nas páginas, mas isso requer um passo desnecessário se os sites usarem “em” para definir a altura do texto.
Tuhinshubhra
Explicado de forma incrível….
Joe Dolson
Obrigado por compartilhar meu plugin! Se alguém quiser aprender os detalhes mais profundos de cada recurso do plugin WP Accessibility, deve ler a documentação do recurso após obter sua visão geral! Isso ajudará você a decidir quais recursos você precisa para o seu site.
WPBeginner Support
Obrigado Joe Dolson por compartilhar e escrever este plugin muito útil. Já vinculamos à documentação do plugin no artigo.
Admin