Como incorporar a acessibilidade da Web em seu site WordPress

Publicados: 2020-02-15

O WordPress é a plataforma de criação de sites mais popular. De acordo com a W3techs, 35,7% de todos os sites usam o WordPress, o que o leva a impressionantes 62,5% da participação de mercado do Sistema de Gerenciamento de Conteúdo (CMS) globalmente.

Ao criar um site WP, no entanto, a acessibilidade na web é provavelmente a última coisa em sua mente.

Mas, os Padrões de Codificação de Acessibilidade do WordPress afirmam que “ todos os códigos novos ou atualizados lançados no WordPress devem estar em conformidade com as Diretrizes de Acessibilidade de Conteúdo da Web 2.0 no nível AA. ”

Em outras palavras, a acessibilidade é um fator crítico se você tiver um site WP.

Felizmente, tornar seu site WP acessível não é impossível. Mas, antes de discutir como fazê-lo, vamos entender o que constitui a acessibilidade na web.

A. Os Quatro Pilares da Acessibilidade na Web

O World Wide Web Consortium (W3C), que desenvolve padrões internacionais para a web, já apresentou os seguintes quatro princípios de acessibilidade na web:

Perceptível: Você precisa apresentar todas as informações e elementos do seu site de forma que todos possam percebê-los.
Operável: Todos os seus elementos navegáveis e interativos devem ser operáveis por diferentes usuários.
Compreensível: Todos devem ser capazes de entender as informações e a interface do usuário em seu site.
Robusto: Vários tipos de tecnologias assistivas e os usuários devem ser capazes de ler o conteúdo do seu site.

B. Práticas recomendadas de acessibilidade na Web do WordPress

Mantendo os princípios acima em mente, você pode seguir os seguintes passos para tornar seu site WordPress acessível a pessoas com deficiência:

Melhorar a acessibilidade do texto

Todos, incluindo deficientes visuais, devem ser capazes de ler o texto em seu site. Embora você possa usar fontes de tamanho grande como padrão, fornecer texto redimensionável aumentará ainda mais a legibilidade. Os usuários com deficiência visual podem aumentar o tamanho da fonte conforme sua conveniência usando esse recurso.

Além disso, certifique-se de adicionar alternativas de texto, como Alt Tags, sempre que necessário. O WP Accessibility é um dos plugins de acessibilidade do WordPress que pode ajudá-lo a adicionar texto redimensionável, contraste de cores, adicionar títulos de postagem para ler mais links e fornecer texto alternativo adequado.

Front-end e back-end estruturados

Cada uma de suas páginas precisa ter um front-end e back-end bem estruturados. Ele não apenas aumenta a legibilidade geral do seu conteúdo, mas também torna mais fácil para as ferramentas assistivas transmitirem a mensagem aos usuários com deficiência. Você pode usar elementos HTML como tags de cabeçalho semântico e meta-descrições para melhorar o back-end.

Certifique-se de usar listas com marcadores, parágrafos curtos e conteúdo bem organizado e direto ao ponto para ajudar a melhorar o front-end. Você também deve usar títulos e títulos apropriados para definir várias subseções de conteúdo. Evite usar animações e GIFs chamativos, pois eles não são amigáveis à acessibilidade.

Além disso, adicione Skip Links para facilitar a navegação do conteúdo para usuários de leitores de tela. Esse recurso de acessibilidade simples permite que os usuários saltem de uma seção do conteúdo para outra sem ter que passar por material desnecessário.

Navegação do teclado para melhor interação

Você também precisa garantir que seu site seja navegável pelo teclado. Deve incluir links e menus, especialmente menus suspensos. Todos os usuários devem poder acessar elementos como links, menus, botões e formulários usando Tab (avançar) e Shift+Tab (voltar).

Você também precisa usar um indicador de foco visível, que mostra aos usuários com deficiência onde eles estão em uma página da web. Os temas do WordPress geralmente podem redefinir o estilo de foco padrão. Certifique-se de usar um tema do WordPress que não redefina esse recurso. O tema de acessibilidade Divi pode ajudá-lo a configurar a navegação amigável ao teclado com menus suspensos acessíveis e contornos visuais para elementos focalizáveis.

Adicionar pontos de referência ARIA

ARIA significa Accessible Rich Internet Applications. Com uma função de referência ARIA, você pode definir diferentes regiões de uma página da Web, permitindo que usuários de tecnologia assistiva naveguem em seu site com facilidade.

As funções de referência mais comuns do ARIA incluem um banner, principal, complementar, informações de conteúdo, pesquisa e navegação.

Banner: define o título do site, como logotipo, nome da empresa ou título do site.
Principal: define o conteúdo principal da página da web.
Complementar: Detecta o conteúdo de suporte que é uma parte essencial do conteúdo principal.
Informações de conteúdo: fornece informações sobre os documentos principais, como notas de rodapé, direitos autorais e declarações de privacidade.
Pesquisa: Indica o formulário de pesquisa em seu site.
Navegação: Marca os elementos de navegação de uma página da web.

A melhor vantagem de usar pontos de referência ARIA é que eles podem trabalhar com elementos HTML5 já semânticos. Como resultado, você pode usá-los com elementos HTML5 em temas existentes do WordPress.

Elementos interativos: contraste de cores

Para elementos interativos, como CTAs e formulários, sempre use cores de alto contraste como plano de fundo do texto. Enquanto WCAG 2.0 Nível AA requer uma taxa de contraste de pelo menos 4:5:1 para texto normal e 3:1 para texto grande, o Nível AAA requer uma taxa de contraste de pelo menos 7:1 para texto normal e 4:5: 1 para texto grande.

Normalmente, o texto em preto sobre fundo branco oferece o melhor contraste de cores. Você também pode usar texto preto em um fundo amarelo e vice-versa. No entanto, evite combinações como texto verde sobre fundo vermelho ou texto vermelho sobre fundo verde.

Palavras de despedida

A acessibilidade do site também se estende a outros elementos interativos, como multimídia, em seu site. Certifique-se de que nenhum dos multimídia, como vídeo, áudio, controles deslizantes ou carrosséis, tenha a opção de reprodução automática padrão, pois é uma barreira significativa para usuários com deficiência. Em vez disso, todo o conteúdo multimídia deve começar a ser reproduzido somente após a interação do usuário.

Além de transcrições de vídeo, descrições de áudio e legendas, certifique-se de usar players de mídia acessíveis. Você pode usar um plugin como o Able Player, que permite adicionar vídeos e áudios dentro de um media player acessível em qualquer página do seu site WordPress.

Tornar seu site WordPress acessível exigirá que você altere seu fluxo de design e desenvolvimento e pode ser feito por meio de um processo manual com um consultor. Uma solução automática de acessibilidade na web requer um pequeno investimento de tempo e recursos trará inúmeros benefícios, incluindo uma imagem de marca positiva, maior alcance de mercado, melhor classificação de pesquisa, e sem falar no aumento das vendas.

Se você ainda tiver dúvidas sobre como tornar seu site WordPress acessível, sinta-se à vontade para deixar suas dúvidas nos comentários.