How to Add a Font Resizer in WordPress for Accessibility

Do you want to allow your visitors to resize the text on your WordPress website?

The purpose of offering a font resizer is to provide an easier way for visitors with low vision to adjust font size without breaking a website’s layout. This helps boost accessibility.

In this article, we will show you how to add resizeable text for site visitors in WordPress.

Why Add Resizeable Text to Your Website?

Finding the right font for your WordPress website is important because it plays a massive role in making your site attractive and helps visitors read your content.

However, sometimes it might not be enough to select the best font for your website. If the font size is small, people will have a hard time reading your articles and eventually abandon your site.

An easier way of improving readability is by offering visitors the option to resize the main text on your website. This allows users to adjust the text size according to their liking and spend more time on your site.

Even though you can use the browser’s built-in zoom feature by pressing CTRL and + key, it increases the size of every element on the page and not just text. This may break the website’s layout and not provide a great user experience.

That said, let’s see how you can easily add resizeable text for your visitors in WordPress.

Video Tutorial

If you’d prefer written instructions, just keep reading

How to Add Resizeable Text in WordPress

The easiest way of allowing users to resize the text on your website is by using a WordPress plugin like Accessibility Widget.

It’s a free WordPress plugin that lets you add an option to your site’s sidebar to change the text size. The plugin is lightweight and very easy to use.

The first thing you need to do is install and activate the Accessibility Widget plugin on your website. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, simply go to Appearance » Widget from the WordPress admin panel. Next, you can click the ‘+’ button and add the ‘Accessibility Widget’ block to your sidebar.

After that, you can enter a title for the widget like ‘Change Text Size’ or ‘Resize Text’.

Next, you need to select which HTML elements or CSS classes will be affected by the widget. The default options are body, paragraph, list items, and table cells. These options should work for most websites.

The widget allows up to four resize options. The default options are 90%, 100%, 110%, and 120%. You can increase or decrease the font sizes by entering the figures in the ‘Set to these sizes’ field.

The last widget setting is controller text, and this is the text users will see. You can keep the default percentages for the text size or use a letter to show different font sizes.

Once you are done, click the ‘Update’ button to store your widget settings.

You can now visit your website to see the widget in action. This is how the widget should appear on your website sidebar now:

If you feel the controller text is not noticeable, then you can change that by using CSS. For example, add this CSS code to your theme’s stylesheet:

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

This CSS will add a border around the controller text, make it bold, and add a little padding. For more details, please see our guide on how to add custom CSS in WordPress.

We hope this article helped you add resizeable text option to your WordPress site. You may also want to check out our guide on how to improve your WordPress site performance and the best WooCommerce plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.