How to Add a Font Resizer in WordPress for Accessibility

As a WordPress professional catering to diverse audiences, ensuring accessibility is essential. An estimated 15% of computer users have some form of visual impairment that makes reading online content difficult.

Adding the ability to resize text enhances the user experience for those with disabilities while boosting compliance.

In this comprehensive guide, we‘ll explore why a WordPress font resizer matters for accessibility and how to properly implement resizeable text on your site.

Why Add a Font Resizer in WordPress?

Offering text resizing improves accessibility and the reading experience for those with visual impairments.

Consider this data:

• Over 217 million people have moderate to severe vision impairment globally [source]
• In the US alone, over 24 million adults report experiencing vision loss [source]
• Only around 13% of websites facilitate resizing of text [source]

A text resizer makes content more readable for those with low vision by allowing text enlargement without negatively impacting site layout and flow.

More Than an Accessibility Mandate

Many perceive accessibility as an obligation rather than an opportunity. But enhancing access delivers tangible benefits:

• Expanded reach: Improve ability to engage audiences with disabilities
• Increased ROI: Gain competitive edge and loyalty from underserved demographics
• Future-proofing: Align with emerging regulations and requirements
• Social good: Contribute to a more inclusive online ecosystem

Too often, companies take a reactive vs proactive stance on inclusive design. But promoting accessibility should be a priority rather than an afterthought.

Average Cost of Web Accessibility Lawsuits [Source]

Litigation continues rising. Combine legal risks with rewards of expanding your audience, and the case is clear.

The option to resize text serves your business interests while improving experiences for those with disabilities. It‘s a rare win-win for social good and the bottom line.

Step-by-Step Guide to Adding Resizeable Text

You have two options for adding text resizing in WordPress:

1. Plugin Method

We recommend the Accessibility Widget plugin. It adds resize controls through a widget:

Pros

• Quick and easy setup
• Fine-tune font sizes
• Style widget through CSS

Cons

• Basic styling
• Third-party dependency

2. Code Method

Alternatively, use custom code in your theme‘s functions.php file:

Pros

• Granular styling control
• No external dependency

Cons

• More complex setup
• Relies on customization expertise

Overall, the plugin approach is best for most users. But custom coding allows endless customization if you have the skills.

Below we explain both methods step-by-step:

Method 1: Adding Resizeable Text through Accessibility Widget Plugin

Follow these steps:

1. Install and activate the Accessibility Widget plugin
2. Navigate to Appearance → Widgets
3. Click Add a Block and select Accessibility Widget
4. Enter widget Title
5. Choose HTML elements for resizing
6. Set font size percentages
7. Customize controller text
8. Click Save to store configured widget

Next, insert the widget into your sidebar or other widget area.

The final step is testing different screen sizes to ensure a smooth responsive experience.

For detailed configuration guidance, see our .

Method 2: Coding a Text Resizer into Your Theme

The coding approach involves using wp_enqueue_script to add JavaScript controlling text resize behavior.

Add this to your theme‘s functions.php file:

function sr_custom_script() {

  wp_enqueue_script( ‘sr-custom-js‘, get_template_directory_uri() . ‘/js/text-resizer.js‘, array(‘jquery‘), ‘‘, true );

}

add_action( ‘wp_enqueue_scripts‘, ‘sr_custom_script‘ );  

Next, create a text-resizer.js file with jQuery to handle text sizing functionality:

jQuery(document).ready(function($) {

    $(‘#sr-controls .sr-small‘).on(‘click‘, function () { 
        $(‘.sr-resize‘).css(‘font-size‘, ‘0.8em‘);
    });

    // Other font size handlers

});

And finally, add the following HTML markup to your theme where you want the controls to appear:

<div id="sr-controls">
   <div class="sr-small">A-</div>
   <div class="sr-medium">A</div> 
   <div class="sr-large">A+</div>
</div>

This allows Visitors to click small/medium/large buttons to resize text. Styling through CSS allows full customization privileges.

For more details on implementing through code, check out this [great guide].

Whichever method you choose, providing visitors the ability to scale text facilitates accessibility and demonstrates your commitment to inclusive web design.

Recommended Text Resizing Tips

• Use relative resizing rather than absolute font sizes
• Allow resizing of at least 200% without breaking layout
• Ensure color contrast ratio stays sufficient
• Confirm consistent behavior across devices/browsers
• Clearly communicate functionality through icons and labels

Conclusion & Next Steps

I hope this guide provided an insightful overview of why and how to add a text resizer in WordPress. Facilitating font scaling significantly improves accessibility for the visually impaired while benefitting all visitors.

Here are some recommended next steps as you work to boost accessibility:

• Audit site content using automated checkers
• Optimize color contrast
• Add ARIA attributes for screen readers
• Improve link context through descriptive anchor text
• Provide captions and transcripts for multimedia

By taking a proactive approach to inclusive design, you can expand your audience reach while contributing to a more just online ecosystem.

To learn more WordPress accessibility best practices, check out our upcoming webinar [link]. Questions or suggestions? Feel free to reach out!