Como melhorar a acessibilidade em seu site WordPress

Deseja melhorar a acessibilidade em seu site WordPress?

Ao criar um site, a acessibilidade geralmente é negligenciada, o que pode criar uma experiência de usuário (UX) ruim. O ideal é que seu site WordPress seja amigável e inclusivo para todas as pessoas, independentemente de suas necessidades.

Neste artigo, mostraremos como melhorar a acessibilidade do seu site WordPress.

Por que a acessibilidade é importante para meu site WordPress?

Em web design, acessibilidade refere-se a técnicas usadas para facilitar o uso de um site por pessoas com deficiências. Alguns visitantes usam tecnologias de assistência para navegar na Web, como leitores de tela para pessoas com deficiências visuais e navegação por teclado para pessoas que não podem usar um mouse.

Existem algumas práticas recomendadas comuns que são recomendadas por especialistas para tornar os sites mais acessíveis. Elas ajudam a tornar os sites mais inclusivos e fáceis de usar para todos, independentemente da capacidade.

Ao priorizar a acessibilidade, mais pessoas poderão navegar em seu site WordPress e explorar seu conteúdo. Se você tiver uma loja on-line, também aumentará suas chances de converter usuários em clientes.

A acessibilidade também é importante para a otimização de mecanismos de pesquisa (SEO). O Google valoriza sites com boa facilidade de uso. Além de tornar seu site mais responsivo para dispositivos móveis, você também pode priorizar a inclusão em seu design da Web para melhorar as classificações.

Além disso, se você for proprietário de um site comercial e o front-end do seu site estiver inacessível, poderá sofrer consequências legais.

A Lei dos Americanos Portadores de Deficiência (ADA) estabelece que os consumidores podem registrar uma reclamação se um site não estiver em conformidade com 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 tem várias funcionalidades integradas para ajudar os usuários a tornar seus sites acessíveis. Por exemplo, por padrão, é possível adicionar texto alternativo (alt text) e atributos de título às imagens para que os leitores de tela possam lê-las em voz alta para usuários com deficiências visuais.

O WordPress também tornou obrigatório que todos os códigos novos e atualizados no WordPress sigam seus padrões de codificação de acessibilidade. Isso é para garantir que os desenvolvedores do WordPress cumpram as práticas recomendadas de acessibilidade ao criar temas e plug-ins.

Além disso, o WordPress inclui recursos que facilitam a criação de sites por usuários com deficiência, como o modo de acessibilidade para adicionar widgets.

Para obter mais informações, recomendamos que você acompanhe a tag Accessibility na página Make WordPress Core.

Com tudo isso em mente, o WordPress não é totalmente acessível fora da caixa. Como proprietário de um site, é importante tomar medidas adicionais para ajudar seu site a atender aos padrões de acessibilidade.

Dividimos este guia em algumas dicas fáceis para melhorar a acessibilidade de seu site WordPress. Você pode usar esses links rápidos para navegar até uma seção específica:

1. Familiarize-se com as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)

Antes de mais nada, recomendamos a leitura das WCAG (Web Content Accessibility Guidelines, Diretrizes de Acessibilidade para Conteúdo da Web). Essas são as normas estabelecidas pela Iniciativa de Acessibilidade na Web (WAI) do W3C para que os usuários tornem seus sites mais acessíveis.

Para começar, você pode conferir as atualizações das WCAG 2.1 e WCAG 2.2. Se os dois documentos parecerem muito longos para ler, sinta-se à vontade para marcar esta referência rápida.

2. Use um tema WordPress preparado para acessibilidade

Os temas prontos para acessibilidade atenderam aos padrões mínimos de acessibilidade que a equipe de revisão de temas do WordPress definiu.

O uso de 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á de fazer alguns ajustes por conta própria. No entanto, isso pode lhe dar um impulso para tornar seu site mais acessível.

No mínimo, um tema pronto para acessibilidade terá:

• Menus que podem ser navegados usando apenas 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 de assistência a entender o conteúdo e a estrutura de uma página da Web.

Se quiser dar um passo adiante, você também pode verificar se o tema tem atributos ARIA. Esses atributos são como informações extras que complementam o HTML do tema para facilitar ainda mais a navegação de um site por tecnologias assistivas.

A maneira mais fácil de procurar um tema pronto para acessibilidade é acessar Appearance ” Themes (Aparência ” Temas ) no painel do WordPress. Em seguida, clique em “Adicionar novo tema”.

A partir daí, selecione “Filtro de recursos” e escolha “Accessibility Ready”.

Sinta-se à vontade para adicionar mais filtros para encontrar o tema que atenda exatamente às suas necessidades.

Agora, role a tela para baixo e clique em “Apply Filters” (Aplicar filtros).

Em seguida, você verá alguns temas prontos para acessibilidade na tela.

Para obter mais recomendações de temas, confira nossas seleções de especialistas dos melhores temas para WordPress.

3. Instalar um plug-in de acessibilidade do WordPress

Um plug-in de acessibilidade do WordPress adiciona recursos úteis para que os visitantes com deficiência possam navegar em seu site.

Um plugin de acessibilidade do WordPress que recomendamos é o WP Accessibility. Algumas das coisas que esse plug-in pode fazer incluem:

• Adição de uma barra de ferramentas de acessibilidade
• Detectar se seu tema está pronto para acessibilidade
• Acompanhar como os recursos de acessibilidade do seu site estão sendo usados para que você possa avaliá-los

Primeiro, você precisa instalar e ativar o plug-in no WordPress.

Após a ativação, você precisa ir para Settings ” WP Accessibility para configurar o plug-in.

Vamos dar uma olhada em cada seção da página de configurações.

Adicionar links de ramificação

Na primeira seção das configurações do plug-in, você pode usar links de ramificação no seu site, e essa configuração é ativada por padrão. Um link para ignorar permite que os usuários saltem diretamente para a seção de conteúdo de um post ou página.

Esse é um recurso extremamente útil para pessoas que usam leitores de tela. Sem um skip link, elas terão de ouvir tudo o que é exibido no site, inclusive os menus de navegação, antes de chegar à parte do conteúdo.

Se o seu tema já usa skip links, você verá uma notificação confirmando isso.

Barra de ferramentas de acessibilidade

O plug-in WP Accessibility vem com uma barra de ferramentas de acessibilidade.

Ao ativá-lo, o plug-in adicionará uma barra de ferramentas ao seu site, na qual os usuários poderão redimensionar as fontes ou visualizar o site no modo de cores de alto contraste.

Isso permite que os usuários selecionem as opções necessárias para facilitar a leitura da página.

Para ativar a barra de ferramentas, basta marcar as caixas de seleção “Tamanho da fonte” e “Contraste”.

Há também configurações em que você pode controlar o tamanho e o posicionamento da fonte da barra de ferramentas.

Se você fizer alterações nessas configurações, certifique-se de clicar no botão “Update Toolbar Settings” (Atualizar configurações da barra de ferramentas) para armazenar as configurações.

Esta é a aparência da barra de ferramentas em nosso site de teste.

Correções de acessibilidade

O WP Accessibility também oferece várias correções de acessibilidade que podem resolver possíveis problemas em seu site. Você pode examinar cada opção e verificar se precisa delas.

Algumas configurações recomendadas serão marcadas por padrão. Essas opções impedem que os links sejam abertos em novas janelas, exibem um erro quando você envia um envio de pesquisa vazio e removem o atributo HTML tabindex onde ele não é necessário para simplificar a navegação pelo teclado.

Se estiver usando um tema compatível com acessibilidade que já tenha ativado alguns desses recursos, você verá uma mensagem confirmando isso na parte superior da seção.

Não se esqueça de clicar no botão “Update Miscellaneous Settings” (Atualizar configurações diversas) para armazenar suas alterações.

Recursos de acessibilidade

O plug-in também oferece algumas opções para ajudar a tornar seu conteúdo mais acessível.

O primeiro grupo de configurações facilita o manuseio de imagens para quem usa leitores de tela.

Também há opções para exibir resumos na parte superior de seus posts e páginas. Isso permite que as pessoas com leitores de tela ouçam um resumo do conteúdo antes de decidir ouvir o artigo inteiro.

Se você alterar qualquer uma dessas opções, lembre-se de clicar no botão “Atualizar recursos de acessibilidade”.

Experiência em testes e administração

Em seguida, você encontrará algumas configurações que permitem melhorar a acessibilidade da área de administração do WordPress e ajudar nos testes.

Esta seção é mais técnica, portanto, consulte a documentação do plug-in antes de marcar as caixas.

Certifique-se de clicar no botão “Update Accessibility Tools” (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 title é considerado inútil por alguns especialistas em acessibilidade. A maioria dos leitores de tela geralmente ignora o atributo title e, em vez disso, lê o texto âncora.

Essa configuração é ativada por padrão, mas se você a alterar, certifique-se de clicar no botão “Update Title Attributes Settings” (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 do plano de fundo. É uma parte muito importante da acessibilidade do site, pois pode afetar a legibilidade do conteúdo do site para pessoas com baixa visão e daltonismo.

Para atender aos padrões de acessibilidade da Web, o texto regular deve ter um alto contraste de pelo menos 4,5 para 1. Isso significa que o texto precisa ser 4,5 vezes mais brilhante do que o plano de fundo.

Para textos maiores, o requisito é um pouco menor, de 3 para 1. Isso significa que um contraste um pouco menor é aceitável. A mesma regra se aplica a gráficos e elementos da interface do usuário, como bordas de entrada de formulário.

O plug-in WP Accessibility tem um verificador de contraste de cores integrado que você pode usar.

Nas configurações do plug-in, basta rolar para baixo até a seção Color Contrast Tester (Testador de contraste de cores) e escolher uma cor de primeiro plano (a cor que você usará para o texto) e sua cor de fundo.

Em seguida, clique em “Check Color Contrast” (Verificar contraste de cores).

O plug-in informará se as cores foram aprovadas ou não no teste de contraste.

Veja como é o resultado:

Como alternativa, você pode usar o WebAIM Contrast Checker gratuito. Assim como na ferramenta anterior, você só precisará selecionar uma cor de primeiro plano e uma cor de fundo.

Essa ferramenta não apenas testa o contraste de cores, mas também mostra como as cores podem parecer em textos normais e grandes, bem como em objetos gráficos e componentes da interface do usuário.

Para obter mais detalhes, consulte nosso guia sobre como escolher o esquema de cores perfeito para seu site WordPress.

5. Adicionar texto alternativo às imagens

Além de ser útil para os mecanismos de pesquisa, o texto alternativo é útil para os leitores de tela descreverem imagens para pessoas com deficiências visuais.

Anteriormente, mencionamos que o WordPress tem um recurso interno para adicionar texto alternativo. O processo é muito fácil e você pode ler tudo sobre como configurá-lo nos guias a seguir:

• Guia para iniciantes em SEO de imagens – Otimize imagens para mecanismos de pesquisa
• Texto alternativo da imagem vs. título da imagem no WordPress – qual é a diferença?

6. Adicionar rótulos a todos os campos do formulário

Se você tiver formulários em seu site, deverá certificar-se 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.

As WCAG recomendam adicionar rótulos a todos os elementos do formulário para facilitar a identificação e a transmissão de informações sobre cada um deles aos usuários pelas ferramentas de assistência.

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 de usuário e mais pessoas poderão enviar seus formulários.

Se você não tiver certeza de como criar formulários excelentes, recomendamos que dê uma olhada no WPForms. Ele é o melhor construtor de formulários do WordPress que facilita muito a personalização de formulários de acordo com suas necessidades, inclusive melhorando-os para acessibilidade.

Você pode ler mais sobre o WPForms em nossa análise do WPForms. Além disso, dê uma olhada nestes 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 as tags de título adequadas em seu conteúdo

As tags de cabeçalho 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 acompanhar.

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 saltem entre as seções e entendam a estrutura geral do seu conteúdo.

Se não tiver certeza de como tirar proveito das tags de título, leia nosso guia sobre como usar corretamente as tags de título no WordPress.

8. Use texto âncora descritivo

O texto âncora ou de link é basicamente as palavras ou frases clicáveis em um link. Normalmente, é possível saber qual texto está vinculado porque ele terá uma cor diferente.

Muitas vezes, os blogueiros usam o texto do link “clique aqui” ou “leia mais” para direcionar os visitantes a uma página.

Essa não é uma boa prática de acessibilidade porque não fornece nenhuma informação sobre o destino do link. Isso dificulta que as pessoas que usam tecnologias assistivas entendam a finalidade do link.

Por isso, é melhor usar um texto âncora descritivo. Isso significa usar palavras que descrevam o conteúdo quando você clicar 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 conhecer os melhores serviços de hospedagem WordPress do mercado’.

Em vez de adicionar o link a “Siga este guia” ou em 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 obter mais informações sobre links e texto âncora, consulte nosso guia para iniciantes sobre links no WordPress.

9. Adicionar legendas ou transcrições ao conteúdo de vídeo e áudio

Uma das principais dificuldades dos usuários com deficiência auditiva é a incapacidade de entender o conteúdo falado em vídeos e áudio. É por isso que muitos criadores de conteúdo de vídeo e podcasters adicionam legendas ou transcrições.

Na WPBeginner, não recomendamos que você faça upload de vídeos em seu próprio site porque 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, talvez você queira considerar o uso de um serviço de transcrição para converter facilmente a fala em texto. 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 obter mais informações.

10. Fazer testes de usabilidade e acessibilidade

Se você implementou todas as dicas deste guia, a etapa final é fazer testes de usabilidade e acessibilidade em seu site WordPress.

Esse teste pode ajudá-lo a identificar quaisquer problemas remanescentes e a tornar o site mais fácil de usar e acessível a todos.

O WebAIM tem uma ferramenta de avaliação de acessibilidade da Web (WAVE) que você pode usar gratuitamente.

Basta digitar o nome de domínio do seu site e a ferramenta identificará todos os problemas relacionados à acessibilidade para você.

Você também pode usar um scanner de acessibilidade. Recomendamos verificar o Accessibility Checker da Equalize Digital. Ele também vem com uma versão de plug-in gratuita para verificar um número ilimitado de posts e páginas em seu site.

Depois de instalar o plug-in, basta acessar o editor de blocos da sua página ou publicação. Se você rolar para baixo até a seção da 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 se o seu site tem uma boa experiência do usuário. Basta acessar nosso guia de auditoria de UX para obter mais informações.

Por último, mas não menos importante, recomendamos que você solicite o feedback dos usuários. Embora os testes possam gerar resultados, obter feedback dos visitantes reais que usam os recursos de acessibilidade do seu site pode fornecer percepções muito mais precisas.

OUserFeedback é o melhor plug-in para essa tarefa. Ele permite que você crie pesquisas para coletar as opiniões e os pensamentos dos seus usuários. Há também modelos para feedback sobre o design do site, para que você não precise criar a pesquisa do zero.

Para obter mais informações, consulte nosso guia sobre como obter feedback sobre o design do site no WordPress.

Guias especializados sobre acessibilidade do WordPress

Agora que você sabe como melhorar a acessibilidade em seu site, talvez 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 seu site WordPress
• Como adicionar um redimensionador de fonte no WordPress para acessibilidade
• Como adicionar facilmente o atributo de título a imagens no WordPress
• Como destacar texto no WordPress (guia para iniciantes)
• Texto alternativo da imagem vs. título da imagem no WordPress – qual é a diferença?

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.