Como adicionar um redimensionador de fonte no WordPress para acessibilidade

Está com dificuldades para tornar seu site WordPress realmente acessível a todos os usuários? Você provavelmente já ouviu falar de redimensionadores de fontes, mas implementar um que realmente funcione sem quebrar o layout do seu site pode ser um verdadeiro desafio.

Muitos proprietários de sites WordPress presumem que as funções de zoom do navegador são suficientes, mas elas geralmente distorcem os elementos da página e criam uma experiência ruim para o usuário. O que você precisa é de um redimensionador de fontes que permita que seus visitantes ajustem o tamanho do texto facilmente, sem afetar outros componentes da página.

Depois de anos administrando o WPBeginner, vimos em primeira mão que, sem os recursos de acessibilidade adequados, você corre o risco de alienar uma parte significativa do seu público. É por isso que criamos duas maneiras infalíveis de adicionar um redimensionador de fontes ao seu site WordPress.

Por que adicionar texto redimensionável ao seu site?

Encontrar a fonte certa para o seu site WordPress é importante porque ela desempenha um papel fundamental para tornar o site atraente e ajuda os visitantes a ler o conteúdo.

Entretanto, às vezes, pode não ser suficiente selecionar a melhor fonte para seu site. Se o tamanho da fonte for pequeno, as pessoas terão dificuldade para ler seus artigos e acabarão abandonando o site.

Uma maneira mais fácil de melhorar a legibilidade é oferecer aos visitantes a opção de redimensionar o texto principal em seu site. Isso permite que os usuários ajustem o tamanho do texto de acordo com suas preferências e passem mais tempo no seu site.

Embora você possa usar o recurso de zoom interno do navegador pressionando a tecla “CTRL e +”, ele aumenta o tamanho de todos os elementos da página e não apenas do texto. Isso pode quebrar o layout do site e não proporcionar uma ótima experiência ao usuário.

Dito isso, vamos ver como você pode adicionar facilmente texto redimensionável para seus visitantes no WordPress.

Tutorial em vídeo

Se você preferir instruções por escrito, continue lendo. Você pode usar os links rápidos abaixo para pular para um método específico:

Método 1: Adicionar texto redimensionável no WordPress (somente temas clássicos do WordPress)

A maneira mais fácil de permitir que os usuários redimensionem o texto em seu site é usar um plug-in do WordPress, como o Accessibility Widget.

É um plug-in gratuito do WordPress que permite adicionar uma opção à barra lateral do seu site para alterar o tamanho do texto. O plug-in é leve e muito fácil de usar.

Dito isso, observe que o plug-in Accessibility Widget não é compatível com Full Site Editing e temas de bloco, portanto, ele só funcionará se você usar um tema clássico. Você saberá que está usando um tema de bloco se o personalizador de temas não estiver presente no seu administrador do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Accessibility Widget em seu site. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, basta acessar Appearance ” Widget no painel de administração do WordPress. Em seguida, você pode clicar no botão “+” e adicionar o bloco “Accessibility Widget” à barra lateral.

Depois disso, você pode inserir um título para o widget, como “Change Text Size” (Alterar tamanho do texto) ou “Resize Text” (Redimensionar texto).

Em seguida, você precisa selecionar quais elementos HTML ou classes CSS serão afetados pelo widget. As opções padrão são corpo, parágrafo, itens de lista e células de tabela. Essas opções devem funcionar para a maioria dos sites.

O widget permite até quatro opções de redimensionamento. As opções padrão são 90%, 100%, 110% e 120%. Você pode aumentar ou diminuir os tamanhos das fontes inserindo os números no campo “Definir para esses tamanhos”.

A última configuração do widget é o texto do controlador, que é o texto que os usuários verão. Você pode manter as porcentagens padrão para o tamanho do texto ou usar uma letra para mostrar diferentes tamanhos de fonte.

Quando terminar, basta clicar no botão “Update” (Atualizar) para armazenar as configurações do widget.

Agora você pode visitar seu site para ver o widget em ação. É assim que o widget deve aparecer na barra lateral de seu site:

Se você achar que o texto do controlador não é perceptível, poderá alterá-lo usando CSS.

Para fazer isso, basta acessar o administrador do WordPress e selecionar Appearance “ Customize( Aparência “ Personalizar).

Agora você deve ver algumas opções para personalizar seu tema clássico.

Aqui, selecione “Additional CSS”.

Agora, você pode adicionar algum código CSS para estilizar o widget. Aqui está o que adicionamos:

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

Esse CSS adicionará uma borda ao redor do texto do controlador, tornará o texto em negrito e adicionará um pouco de preenchimento. Quando estiver satisfeito com a aparência do widget, basta clicar em “Publicar”.

Para obter mais detalhes, consulte nosso guia sobre como adicionar CSS personalizado no WordPress.

Método 2: Adicionar texto redimensionável no WordPress (todos os temas do WordPress)

Outra maneira fácil de permitir que os usuários redimensionem o texto em seu site é usar o WP Accessibility. Esse plug-in permite que você adicione uma barra de ferramentas ao seu site para alterar o tamanho do texto, independentemente do tema que estiver usando.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WP Accessibility em seu site. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, basta acessar a página WP Accessibility no painel de administração do WordPress.

Na seção “Barra de ferramentas de acessibilidade”, clique na opção “Ativar barra de ferramentas de acessibilidade” e selecione “Tamanho da fonte”. Isso adicionará um redimensionador de fonte à barra de ferramentas.

Se necessário, você também pode ativar as opções de Contraste e Escala de cinza.

Além disso, você pode alterar o tamanho da fonte do conteúdo quando a barra de ferramentas é clicada. Você também pode simplesmente selecionar “Tamanho padrão” no menu suspenso se não tiver certeza do que escolher.

Além disso, recomendamos ativar a opção “Usar folha de estilo de redimensionamento de fonte alternativa”. Quando essa opção está ativada, os usuários podem alternar facilmente entre os tamanhos de fonte padrão e uma versão maior e mais legível do texto.

Sinta-se à vontade para ativar outras configurações no plug-in.

Depois disso, basta clicar no botão “Update Toolbar Settings” (Atualizar configurações da barra de ferramentas).

É isso aí!

Esta é a aparência da nossa barra de ferramentas de redimensionamento de fontes no front end:

Para obter mais informações, leia nosso guia sobre como melhorar a acessibilidade do seu site WordPress.

Torne seu site WordPress ainda mais fácil de usar com estas dicas

Deseja tornar seu site mais fácil de usar e com ótima aparência? Dê uma olhada nestes guias úteis:

• Como adicionar navegação pelo teclado com a tecla de seta no WordPress – Facilite a movimentação das pessoas em seu site.
• Como personalizar as cores em seu site WordPress – Escolha as cores certas para que seu site tenha uma boa aparência e seja fácil de ler.
• Como adicionar uma animação de pré-carregador ao WordPress (passo a passo) – Adicione uma tela de carregamento legal ao seu site.
• Como adicionar facilmente o modo escuro ao seu site WordPress – Permita que os usuários mudem para um tema mais escuro se preferirem.
• Maneiras de criar um site WordPress compatível com dispositivos móveis – Certifique-se de que seu site funcione bem em telefones e tablets.
• Como obter feedback sobre o design do site no WordPress (passo a passo) – Saiba como perguntar às pessoas o que elas acham do design do seu site.
• Como destacar texto no WordPress (guia para iniciantes) – Aprenda a destacar palavras importantes em suas páginas.

Esperamos que este artigo tenha ajudado você a adicionar texto redimensionável ao seu site WordPress. Talvez você também queira conferir nossas escolhas de especialistas dos melhores construtores de páginas de arrastar e soltar do WordPress e nosso guia definitivo sobre como atualizar seu tema do WordPress sem perder a personalização.

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.