Como melhorar a acessibilidade do seu site WordPress

Aqui na Qode, trazemos beleza para o WordPress. Esse é literalmente o nosso lema. Mas isso não significa que definimos colocar o estilo antes da substância. Projetar para acessibilidade é uma consideração importante. Quer seu conteúdo seja voltado especificamente para pessoas com deficiência ou não, pensar em visitantes com deficiência que ainda podem apreciar o que você tem a oferecer nunca pode ser uma coisa ruim. Neste artigo, discutiremos várias coisas que você pode fazer para aumentar a acessibilidade do seu site WordPress. Mas antes de irmos direto aos detalhes, vamos dizer algumas palavras sobre design de acessibilidade no WordPress.

  • O que significa acessibilidade do WordPress?
  • Como testar a acessibilidade atual do meu site
  • Recursos básicos de acessibilidade integrados do WordPress
  • Paletas de cores
  • Como criar formulários acessíveis
  • Como melhorar a acessibilidade do seu site WordPress usando um plugin

O que significa acessibilidade do WordPress?

Em geral, acessibilidade na web significa que os designers de sites tomam medidas para garantir que pessoas com deficiência, seja cognitivo, visual, auditivo, neurológico ou outro, você pode usar o site.

Especificamente, projetar para acessibilidade significa levar em consideração aqueles visitantes com deficiência que podem impedi-los de desfrutar de todas as funcionalidades do seu site, pelo menos, ou mesmo impedir que acessem o seu conteúdo, no caso mais extremo. A essência disso é que design acessível significa ser UX avançado para pessoas com habilidades diferentes.

As melhores práticas em design agora incluem várias técnicas que permitem melhorar a acessibilidade e tornar seu site WordPress mais fácil de usar para pessoas que não podem usá-lo sem ajuda. Isso não significa que projetar para acessibilidade irá beneficiar apenas seus visitantes com deficiência. Também pode beneficiar pessoas com deficiência temporáriaComo aqueles que podem ter quebrado um braço ou perdido temporariamente a visão devido a uma cirurgia ocular, pessoas que têm uma conexão muito lenta ou pessoas que simplesmente preferem seu texto em formato de áudio.

Tudo isso significa que o design acessível não se destina a uma minoria com deficiência, mas melhora a experiência geral do usuário, e um potencial aumento na audiência.

T

Como testar a acessibilidade atual do meu site

Onda

Produzimos um relatório sobre um artigo na edição internacional do The Guardian e podemos ver facilmente quais áreas precisam de melhorias, uma vez que estão marcadas com ícones. Para obter uma visão detalhada do problema, basta clicar no ícone e ler a dica de ferramenta. Assim saberá como resolver cada problema.

Relatório de onda

Os desenvolvedores WAVE também forneceram extensões para Chrome e Firefox, que você pode usar para retornar um relatório de acessibilidade sem enviar nenhum dado aos servidores WAVE, tornando-o o mais seguro possível.

Recursos básicos de acessibilidade integrados do WordPress

Os desenvolvedores do WordPress instituíram padrões de acessibilidade para todos os novos códigos e um melhores práticas manual para codificadores, com amostras de código. Mas você não precisa saber codificar para tornar seu site mais acessível.

Cabeçalhos

Por exemplo, uma boa estrutura de cabeçalho é muito importante pessoas que usam softwares como leitores de tela. Deixar o texto grande e em negrito não fará com que o leitor de tela entenda que o texto é um título. Use um Cofre bloco em Gutenberg, um elemento de título no Elementor, ou tags de título como

no editor clássico. O Título 1 é o Título da página principal e não deve ser usado para mais nada.

A estrutura interna do texto deve ser subdividida em títulos 2 a 6, sem pular níveis. Você também deve evitar adicionar funcionalidades adicionais aos títulos, como links. Pelo contrário, você não deve usar títulos apenas para fins estéticos. É para isso que servem o tamanho e o estilo da fonte. Uma boa estrutura de cabeçalho não só ajudará os usuários com leitores de tela, mas também significará uma melhor pontuação de SEO.

Links

Ao criar links, você deve certifique-se de que está claro no contexto o que é e o que não é um link. Se um link estiver cercado por outro texto, as melhores práticas significam que ele deve ser sublinhado e em uma cor diferente.

Adicionar atributos Alt às imagens

Adicionar atributos alt às imagens as torna “legíveis” para software leitor de tela, E é tão fácil de fazer. Tudo que você precisa fazer é acessar qualquer imagem em sua biblioteca de mídia.

Biblioteca de mídia

No menu do lado direito, você encontrará a caixa de texto Alt. Simplificando, uma descrição significativa da imagem, que no nosso caso é uma fotografia de paisagem destinada a fins puramente decorativos, exigindo não mais do que uma descrição simples.

Texto alternativo de imagem

Paletas de cores

Algumas paletas de cores podem causar problemas para usuários que sofrem de problemas de visão, daltonismo e condições semelhantes. De um modo geral, quanto mais contraste melhor, a pesar de que muito contraste pode causar problemas para pessoas com olhos sensíveis. Isso não se aplica apenas a texto e plano de fundo, mas também a elementos (como botões, ícones, menus e outros) e efeitos de rolagem. Para obter mais informações sobre como alterar as cores do texto no WordPress, consulte nosso guia detalhado.

A relação de contraste de brilho de fundo: primeiro plano recomendada é 4,5: 1 para texto normal ou 3: 1 para texto grande. Há uma série de ferramentas que você pode usar para verificar suas taxas de contraste, como o Verificador de contraste WebAIM. ONDAPor ser uma ferramenta abrangente, ela também destacará problemas de contraste no design de seu site.

Como criar formulários acessíveis

Os formulários são uma parte importante da interação na web. Existem algumas coisas que você pode fazer para torná-los mais acessíveis.

Em primeiro lugar, boa rotulagem é importante. Rotule todos os seus campos de maneira correta e clara. Em segundo lugar, usar texto de espaço reservado – exemplos de texto que seus visitantes devem inserir nos formulários. Por exemplo, se você espera um URL, use algo como www.yourwebsite.com para um espaço reservado. Finalmente, um conjunto completo de instruções sobre como preencher um formulário Pode ser de grande ajuda para os deficientes visuais.

Como melhorar a acessibilidade do seu site WordPress usando um plugin

Não é de se admirar que haja uma série de ferramentas que você pode usar para ajudar a corrigir alguns dos problemas comuns que os sites WordPress têm com acessibilidade. O plug-in que achamos potencialmente mais útil é Acessibilidade WP. Iremos guiá-lo para alguns de seus recursos importantes.

Depois de instalar e ativar o plugin, você precisa configurá-lo. Navegar para Configurações de acessibilidade desde o Plugins instalados tela em seu painel.

Configurações de acessibilidade

Para tornar seu site mais acessível aos leitores, você pode adicionar skiplinks. Skiplinks faz com que os leitores se concentrem no conteúdo, em vez de ter que ler todos os menus e dados do cabeçalho primeiro. A configuração de skiplinks requer um pouco de conhecimento de código, portanto, não entraremos em detalhes aqui. Ele fornece a seus usuários um botão que eles podem usar para pular conteúdo desnecessário e ir direto ao ponto principal. Você só precisa atribuir um atributo de ID para onde deseja que o link leve seu visitante.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google
Pular link

Abaixo estão os Configurações da barra de ferramentas de acessibilidade. Se você ver Adicionar barra de ferramentas de acessibilidade com ajuste de tamanho de fonte e alternância de contraste, o usuário verá uma barra de ferramentas na lateral da tela.

Barra de ferramentas de acessibilidade

Eles podem usá-lo para visualizar uma versão em alto contraste do seu site …

Alto contraste

… Ou para expandir a fonte principal.

Tamanho da fonte

Não entraremos em detalhes sobre as configurações da barra de ferramentas, mas existem várias opções que você pode querer experimentar antes de habilitá-las para seus visitantes.

Então você tem o Outros ajustes seção.

Várias configurações

Você pode percorrer cada um deles individualmente e ver quais funcionam melhor para o seu site. Por exemplo, seu site pode estar usando o idioma de texto RTL (da direita para a esquerda); o plugin e o leitor do site devem saber. Você pode querer que suas imagens tenham descrições mais longas, e há uma opção para isso também.

Três dessas caixas de seleção são marcadas por padrão: os links não têm atributos de destino, o site retorna um erro de pesquisa quando o campo de pesquisa não contém uma string e o tabindex é removido dos elementos focalizáveis.

Então você tem o Remover atributos de título seção. Isso informa ao leitor do site que alguns elementos do layout não são títulos. Sugerimos que você verifique e remova o atributo title para tudo o que você não precisa.

Ele também possui uma ferramenta útil de verificação de contraste. Basta escolher as cores que você está usando ou colar seus códigos hexadecimais nos campos correspondentes e verificar se as taxas de contraste são o que você precisa.

Contraste de cor

Em conclusão

Como mostramos, há muitas coisas que você pode fazer para tornar seu site mais acessível. Evite a armadilha de pensar no design acessível como mera acomodação a uma minoria; na verdade, tudo o que você está fazendo é atrair uma gama maior de visitantes, investindo um pouco mais de tempo e esforço em lucros potencialmente grandes. Sem mencionar que algumas dessas técnicas podem melhorar significativamente sua pontuação de SEO. Por que você não gostaria de tirar vantagem disso?

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: