Have you seen the font resizing buttons on some popular sites? The purpose of those buttons is to provide an easier way for visitors with low vision to adjust font size without breaking a website’s layout. Even though you can use the browser’s built in zoom feature by pressing CTRL and + keys, it increases the size of every element on the page not just text. In this article, we will show you how to add resizeable text for site visitors in WordPress.

First thing you need to do is install and activate the Accessibility Widget plugin on your website. Upon activation, simply go to Appearance » Widget and drag / drop the Accessibility Widget in a sidebar.

You can enter a title for the widget. 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 here. The last widget setting is controller text. This is the text users will see. Usually, letter A is used to represent font resize option. Once you are done, click on the Save 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 now:

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

This CSS will add a border around the controller text, make it bold, and add a little padding.

We hope this article helped you add resizeable text option in your WordPress site. You may also want to check out our guide on how to improve accessibility on your WordPress site.

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