Posted on

How to Improve Accessibility on Your WordPress Site

Do you want to improve accessibility on your WordPress site?

When building a website, accessibility often gets neglected, which can create a poor user experience (UX). Ideally, you want your WordPress site to be user-friendly and inclusive to all individuals, regardless of their needs.

In this article, we will show you how to improve the accessibility of your WordPress website.

How to Improve Accessibility on Your WordPress Site

Why Is Accessibility Important for My WordPress Site?

In web design, accessibility refers to techniques used to make a website easier to use for people with disabilities. Some visitors use assistive technologies to navigate the web, like screen readers for people with visual impairments and keyboard navigation for folks who cannot use a mouse.

There are some common best practices that are recommended by experts to make websites more accessible. They help make sites more inclusive and user-friendly for everyone, regardless of ability.

By prioritizing accessibility, more people will be able to navigate your WordPress website and explore your content. If you run an online store, then you will also increase your chances of converting users into customers.

Accessibility is also important for search engine optimization (SEO). Google values websites with good user-friendliness. Besides making your website more responsive for mobile devices, you can also prioritize inclusivity in your web design to improve rankings.

Additionally, if you are a business website owner and the front end of your site is inaccessible, then you could face legal consequences.

The Americans with Disabilities Act (ADA) states that consumers can file a complaint if a site does not comply with accessibility guidelines. What’s more, your reputation could get ruined, which could result in financial losses.

How Does WordPress Make My Website More Accessible?

WordPress has several built-in functionalities to help users make their WordPress websites accessible. For example, by default, you can add alternative text (alt text) and title attributes to images so that screen readers can read them out loud for users with visual impairments.

WordPress has also made it mandatory for all new and updated code in WordPress to follow its accessibility coding standards. This is to ensure WordPress developers comply with best practices for accessibility when creating themes and plugins.

Other than that, WordPress includes features that make it easy for users with disabilities to build their own websites, like the accessibility mode for adding widgets.

For more information, we recommend keeping up with the Accessibility tag on the Make WordPress Core page for more information.

With all this in mind, WordPress is not entirely accessible out of the box. As a website owner, it’s important to take extra steps to help your site meet accessibility standards.

We have broken down this guide into a few easy tips to improve your WordPress website’s accessibility. You can use these quick links to navigate to a specific section:

1. Get Familiar With the Web Content Accessibility Guidelines (WCAG)

First things first, we recommend reading the Web Content Accessibility Guidelines (WCAG). These are the standards laid out by the W3C Web Accessibility Initiative (WAI) for users to make their websites more accessible.

You can check out the WCAG 2.1 and WCAG 2.2 updates for starters. If both documents seem too long to read, then feel free to bookmark this quick reference instead.

2. Use an Accessibility-Ready WordPress Theme

Accessibility-ready themes have met the minimum accessibility standards that the WordPress theme review team has set.

Using an accessible WordPress theme does not mean your website will automatically comply with all accessibility requirements, as you still have to make some tweaks on your own. However, it can give you a jumpstart to making your website more accessible.

At the very least, an accessibility-ready theme will have:

  • Menus that can be navigated using the keyboard alone.
  • Good color contrast that makes the content readable for users with visual impairments.
  • Semantically correct HTML, which helps assistive technologies understand the content and structure of a web page.

If you want to take things a step further, you may also want to check if the theme has ARIA attributes in it. These attributes are like extra information that complements your theme’s HTML to make a website even easier to navigate for assistive technologies.

The easiest way to look for an accessibility-ready theme is by going to Appearance » Themes on your WordPress dashboard. Then, click ‘Add New Theme.’

Adding a new theme in WordPress

From here, select ‘Feature Filter’ and choose ‘Accessibility Ready.’

Feel free to add more filters to find the theme that matches your exact needs.

Selecting the Accessibility Ready filter in WordPress themes page

Now, scroll down and click ‘Apply Filters.’

You will then see some accessibility-ready themes on the screen.

Applying theme filters in WordPress

For more theme recommendations, check out our expert picks of the best WordPress themes.

3. Install a WordPress Accessibility Plugin

A WordPress accessibility plugin adds helpful features for visitors with disabilities to navigate your website.

One WordPress accessibility plugin we recommend is WP Accessibility. Some of the things this plugin can do include:

  • Adding an accessibility toolbar
  • Detecting whether your theme is accessibility-ready
  • Tracking how the accessibility features on your website are being used so that you can assess them

First, you need to install and activate the plugin on WordPress.

Upon activation, you need to go to Settings » WP Accessibility to configure the plugin.

WP Accessibility Settings

Let’s take a look at each section of the settings page.

Add Skip Links

In the first section of the plugin settings, you can use skip links on your website, and this setting is enabled by default. A skip link allows users to jump directly to the content section of a post or page.

This is an extremely useful feature for people using screen readers. Without a skip link, they will have to listen to everything displayed on your website, including your navigation menus, before they reach the content part.

If your theme already uses skip links, then you will see a notification confirming that.

WP Accessibility Add Skiplinks

Accessibility Toolbar

The WP Accessibility plugin comes with an accessibility toolbar.

When you enable it, the plugin will add a toolbar on your website where users can resize fonts or view your site in high-contrast color mode.

This lets your users select the options they need to make the page easier to read.

WP Accessibility Toolbar

To enable the toolbar, simply check the ‘Font size’ and ‘Contrast’ checkboxes.

There are also settings where you can control the toolbar’s font size and placement.

WP Accessibility Toolbar

If you make changes to these settings, then make sure you click the ‘Update Toolbar Settings’ button to store your settings.

This is what the toolbar looks like on our test website.

WP Accessibility Toolbar Preview

Accessibility Fixes

WP Accessibility also provides several accessibility fixes that could solve potential issues on your site. You can go through each option and see if you need it.

Some recommended settings will be checked by default. These options prevent links from opening in new windows, display an error when you submit an empty search submission, and remove the tabindex HTML attribute where it is not needed to simplify keyboard navigation.

WP Accessibility Fixes

If you are using an accessibility-friendly theme that has already enabled some of these features, then you will see a message confirming this at the top of the section.

Don’t forget to click the ‘Update Miscellaneous Settings’ button to store your changes.

Accessibility Features

The plugin also provides a few options to help make your content more accessible.

The first group of settings makes images easier to handle for those using screen readers.

There are also options to display summaries at the top of your posts and pages. This allows those with screen readers to hear a summary of the content before deciding to listen to the entire article.

WP Accessibility Features

If you change any of these options, then please remember to click the ‘Update Accessibility Features’ button.

Testing & Admin Experience

Next, you will find some settings that let you improve the accessibility of your WordPress admin area and help with testing.

This section is more technical, so make sure you consult the plugin’s documentation before checking the boxes.

WP Accessibility Testing & Admin Experience

Make sure you click the ‘Update Accessibility Tools’ button to save your changes.

Remove Title Attributes

This section lets you remove the title attribute from tag clouds.

The title attribute is considered to be useless by some accessibility experts. Most screen readers usually ignore the title attribute and instead read the anchor text.

WP Accessibility Remove Title Attributes

This setting is enabled by default, but if you change it, then make sure you click the ‘Update Title Attributes Settings’ button.

4. Check Your Website’s Color Contrast

Color contrast means the difference between the text color and background color. It’s a very important part of website accessibility because it can affect how readable your website content is for people with poor vision and color blindness.

To meet web accessibility standards, regular text should have a high contrast of at least 4.5 to 1. This means the text needs to be 4.5 times brighter than the background.

For larger text, the requirement is a bit less, at 3 to 1. This means a slightly lower contrast is acceptable. The same rule applies to graphics and user interface elements, such as form input borders.

The WP Accessibility plugin has a built-in color contrast checker that you can use.

In the plugin settings, simply scroll down to the Color Contrast Tester section and choose a foreground color (the color you will use for your text) and its background color.

Then, click ‘Check Color Contrast.’

Checking color contrast using WP Accessibility

The plugin will then tell you if the colors pass or do not pass the contrast test.

Here’s what the result looks like:

WP Accessibility color contrast test results

Alternatively, you can use the free WebAIM Contrast Checker. As with the previous tool, you will only need to select a foreground color and a background color.

This tool not only tests your color contrast but also shows you what the colors may look like as normal and large text, as well as graphical objects and user interface components.

Free WebAIM Color Contrast Checker

For more details, you may like to see our guide on how to pick the perfect color scheme for your WordPress website.

5. Add Alternative Text to Images

Besides being useful for search engines, alt text is helpful for screen readers to describe images to individuals with visual impairments.

Adding a title to an image in WordPress

Previously, we mentioned that WordPress has a built-in feature for adding alt text. The process is pretty easy, and you can read all about setting it up in the following guides:

Expert Tip: If you want to automatically set a consistent alt text format for all of your images, then you can use All in One SEO’s Image SEO tool.

6. Add Labels to All Form Fields

If you have forms on your website, then you will want to make sure that you use the appropriate labels for each form element. This includes form fields, buttons, menus, and so on.

Adding checkout date and time fields to a form

The WCAG recommends adding labels to all form elements to make it easier for assistive tools to identify and relay information about each one to users.

Furthermore, adding clear and descriptive labels is a good web design practice. By helping users understand what each form field is for, user errors are less likely to occur, and more people will be able to submit their forms.

If you are not sure how to create great forms, then we recommend checking out WPForms. It’s the best WordPress form builder that makes it super easy to customize forms to your exact needs, including improving them for accessibility.

WPForms

You can read more about WPForms in our WPForms review. Also, check out these guides on how to create forms in WordPress:

7. Use Proper Heading Tags in Your Content

Heading tags are HTML tags that can mark the titles or subtitles of a web page. This way, your content is much more organized and easier to follow.

These tags also help tools like screen readers generate a navigable outline for users with visual impairments. This will allow them to jump between sections and understand your content’s overall structure.

If you are not sure how to take advantage of heading tags, then you can read our guide on how to properly use heading tags in WordPress.

8. Use Descriptive Anchor Text

Anchor or link text is basically the clickable words or phrases in a link. You can usually tell which text is linked because it will be in a different color.

Often, bloggers will use the link text ‘click here’ or ‘read more’ to direct visitors to a page.

This is not a good practice for accessibility because it doesn’t give any information about where the link goes. This makes it hard for people using assistive technologies to understand the purpose of the link.

That’s why it’s best to use descriptive anchor text instead. This means using words that describe what the content is about when you click the link.

For example, let’s say that you want to add a link to an article about the best WordPress hosting in this sentence: ‘Follow this guide to learn about the best WordPress hosting services on the market.’

Instead of adding the link to ‘Follow this guide’ or anywhere else in that sentence, you should insert it into ‘best WordPress hosting services.’ This way, the user gets an overview of what they will find in the linked content

For more information about links and anchor text, see our beginner’s guide on linking in WordPress.

9. Add Captions or Transcripts to Video and Audio Content

One of the main struggles for users with hearing disabilities is the inability to understand spoken content in videos and audio. That’s why a lot of video content creators and podcasters add captions or transcripts.

At WPBeginner, we strongly discourage you from uploading videos to your own website because they can slow your site down. Instead, it’s best to use services like YouTube or Vimeo, both of which have built-in tools for adding captions.

As for audio content, you may want to consider using a transcription service to convert speech to text easily. This way, you won’t need to manually create a written version of your audio content.

Check out our list of the best transcription services for more information.

10. Do Usability and Accessibility Testing

If you have implemented all the tips from this guide, then the final step is to do usability and accessibility testing on your WordPress website.

This testing can help you identify any remaining issues and help you make your website user-friendly and accessible to everyone.

WebAIM has a Web Accessibility Evaluation Tool (WAVE) that you can use for free.

Simply type in your website’s domain name, and the tool will identify any accessibility-related issues for you.

WebAIM's Web Accessibility Evaluation Tool (WAVE)

You can also use an accessibility scanner. We recommend checking out Accessibility Checker by Equalize Digital. It also comes with a free plugin version to scan unlimited posts and pages on your website.

After installing the plugin, you can simply go to the block editor of your page or post. If you scroll down to the meta box section, you will find an Accessibility Checker that identifies your accessibility issues.

Example of what the Accessibility Checker plugin does

Another option is to perform a UX audit, which basically means checking your website to see if it has a good user experience. Just head over to our UX audit guide for more information.

Last but not least, we encourage you to ask for your user feedback. While testing can get you results, getting feedback from actual visitors who use your site’s accessibility features can provide much more accurate insights.

UserFeedback is the best plugin for this job. It lets you create surveys to collect your users’ opinions and thoughts. There are also templates for website design feedback, so you won’t have to create the survey from scratch.

UserFeedback plugin

For more information, just see our guide on how to get website design feedback in WordPress.

Expert Guides on WordPress Accessibility

Now that you know how to improve accessibility on your site, you may like to see some other guides related to WordPress accessibility issues:

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.

The post How to Improve Accessibility on Your WordPress Site first appeared on WPBeginner.

Posted on

7 Call to Action (CTA) Best Practices for Guaranteed Landing Page Conversions

Did you know that up to 70% of businesses fail to include an effective CTA (call to action) in their marketing?

Unfortunately, when it comes to landing pages, most visitors won’t take action without a clear nudge in the right direction.

I’ve spent years helping businesses create landing pages that convert, and I’ve learned that a well-written CTA can make the biggest difference in turning someone from a casual visitor into a paying customer.

Since effective CTAs drive conversions on your WordPress website or online store, they need to be laser-focused and inspire immediate action.

In this article, I will list the CTA best practices to follow for guaranteed landing page conversions.

Note: This is a guest post by John Turner, the co-founder of SeedProd, the best landing page builder plugin. We publish an expert column on WPBeginner every Thursday. This is an invite-only column, meaning we don’t accept unsolicited guest post offers.

Call to Action (CTA) Best Practices for Guaranteed Landing Page Conversions

I will cover quite a few topics in this post. Here’s a handy list so you can jump to the section you are most interested in:

  1. Add a Single CTA Per Page to Show the User a Clear Path Forward
  2. Use Strong and Compelling Language to Drive Action
  3. Use Benefit-Driven Language to Incentivize the User
  4. Place Your CTA on a Button for More Clicks
  5. Create Highly Visible CTA Buttons That Get Noticed
  6. Support Your CTA With Extra Landing Page Copy
  7. Use A/B Testing and Analytics to Improve Your CTA

1. Add a Single CTA Per Page to Show the User a Clear Path Forward

Let’s start with the most important CTA best practice. Typically, you should only have only one call to action on a page.

If you want to move your WordPress website visitors to take action, then you need to be crystal clear on what that action is and state it clearly.

Avoid the temptation to add multiple calls to action to a landing page. This can confuse your readers, and they may have difficulty deciding between the options.

This is known as choice paralysis. When faced with multiple choices, a person may hesitate because they are not sure which option is best. The best way to move forward isn’t clear.

In my experience, only having one CTA per page will have more impact on increasing conversions than anything else. In fact, limiting your landing page to a single CTA can increase clicks by over 371% and grow sales by a huge 1,617%.

So, make sure you include a single, clear call to action. This presents a straightforward path for the user to move forward, resulting in more conversions. Or, if you have a long page and want to include multiple calls to action, then make sure that they have the same CTA message.

2. Use Strong and Compelling Language to Drive Action

If you want your visitors to act on your CTA, then you need to use actionable language that clearly tells them what they need to do next.

That means using strong action verbs, such as ‘get’, ‘start’, ‘shop’, ‘download’, and ‘subscribe’.

I find that action verbs convey a sense of confidence and authority. They tell users what you want them to do in a clear and assertive way.

Here are a few good examples of action-packed CTAs:

  • Get Exclusive Access
  • Start Saving Today
  • Shop New Arrivals
  • Download Your Free Guide
  • Subscribe for Free Updates

Make sure you keep your CTAs short and sweet so they are easy to scan and digest. ‘Get a free reader’ is a great example of a short, action-oriented CTA from Square.

Example of a CTA That Uses Action Language

Wherever possible, you should also use urgency or scarcity language. This offers a powerful incentive for the user to take action now:

  • Claim Your Discount Before It’s Gone
  • Hurry, Limited Time Offer!
  • Don’t Miss Out on This Deal!
  • Reserve Your Spot Now (limited availability)

Always be creative and customize your call to action to the specific campaign. Compared with vague, generic CTAs, customized CTAs convert 42% more visitors.

3. Use Benefit-Driven Language to Incentivize the User

Using benefit-driven CTAs with emotional language can create a desire that motivates the user to actually act.

When crafting your call to action, you will want to make sure you briefly highlight the benefits you are offering and explain what the users will gain by taking action. If they can see what’s in it for them, then they will be more motivated to click.

To do this well, you need to understand what motivates your target audience and you may want to use benefit-driven verbs like ‘unlock’, ‘discover’, ‘boost’, and ‘save’.

Let’s say that your current CTA simply says ‘Download Now’. This lets your users know what to do but doesn’t offer any motivation.

A better call to action would be ‘Download Your Free Guide Today’. This highlights the benefit and adds urgency.

Another example is Aura’s landing page. They use the benefit-driven CTA ‘Get Protection Now’.

Example of a Benefit-Driven CTA

Notice the words just above the call to action. They support the CTA by mentioning another benefit of saving 70% and the word ‘today’ adds urgency. I will show you how you can strengthen your CTA with supporting copy later in this article.

Here are some more examples of benefit-driven CTAs you can use as inspiration:

  • Unlock Exclusive Discounts
  • Boost Your Productivity
  • Save Big Today
  • Build Your Skills

When you incorporate benefit-driven language like this, you speak directly to the user’s needs and desires. This transforms your CTA from an instruction into a compelling invitation.

4. Place Your CTA on a Button for More Clicks

Placing your CTA on a button is a simple way to boost conversions. A button is highly noticeable, easy to customize, and clearly wants to be clicked.

Studies show that this works well. In fact, a company called Copyblogger reported a significant 45% increase in clicks when they switched to CTAs in the shape of a button.

You can easily add a call to action button to your landing pages using the WordPress block editor or a page builder plugin.

For example, SeedProd templates let you create landing pages easily and already contain a call to action button. It’s also super easy to customize its color, text, and appearance to match your campaign.

Before we move to my next point, I want to share my favorite tip about making your CTA buttons more effective. Studies show that buttons with an arrow icon at the end can increase conversions by a further 26%.

You can see in the screenshot below that we do this on our own website. We also add a sense of urgency by using the word ‘Now’.

Example of a CTA Button With an Arrow

Notice that we made the button more visible by using a contrasting color and placing it in multiple locations. That brings us to our next point.

5. Create Highly Visible CTA Buttons That Get Noticed

It goes without saying that no one will click a button they don’t see. Luckily, there are lots of ways to make your call to action unmissable.

The best way to make your CTA button stand out is to use a bright color that contrasts with the color scheme of your landing page. Make sure the button text is large and readable.

You will find simple settings to do this in the block editor and landing page plugins like SeedProd.

Customizing a CTA Button in SeedProd

Try different sizes and positions to see what looks best. Plus, make sure you place the button high enough on the page that your visitors don’t have to scroll before they see it.

If you created a long-form landing page, then it’s important to place your call to action at intervals throughout the page. This will make sure that your readers can always see the call to action as they scroll down the page and you will also reinforce its message.

I also like to get the maximum clicks from my CTA buttons by making them accessibility-friendly. You can add alt text to the CTA button to make it visible to people using screen readers. That’s 7 million users in the United States alone.

6. Support Your CTA With Extra Landing Page Copy

Because the copy of a good CTA button is short and focused, you will need to reinforce the value it offers with some extra text on the landing page.

This shouldn’t be too long and should appear near the call to action. Here’s a great example from the OptinMonster website.

Example of Supporting Copy for a CTA

Notice their supporting copy ‘Watch the video’ appears right under the CTA button. Video content works well on landing pages because it provides helpful information without complicating the page with too much extra written content.

You will need to make sure that any supporting copy is consistent with the CTA. This will create a seamless user experience that reinforces the message of your call to action.

For example, let’s say you decided on this benefit-focused CTA button:

Get 15% Off

Then the supporting text could say ‘Claim your limited-time discount of 15% off’, and the page title might say ‘Black Friday Week 15% Off Everything’.

By keeping your landing page copy short and simple, you can keep the focus on your call to action and maximize conversions.

7. Use A/B Testing and Analytics to Improve Your CTA

Finally, I recommend testing different calls to action to discover the best variation for your website. You can try changing up the wording, using different colors and shapes, and experimenting with button placement.

To measure which CTA version works best, you will need to perform A/B split testing. This is where you create different versions of your call to action and other landing page elements to test how they affect user behavior.

Just remember to test only two versions of your CTA at a time to make sure the measurements are accurate and helpful. This will let you see clearly if one button style works better than the other or which CTA copy gets the most attention.

View test results

For example, a company called Unbounce did split testing on two very similar calls to action. The first said ‘Start your free 30-day trial’ and the second ‘Start my free 30-day trial’. They were surprised to learn there was a 90% increase in click-through rate with such a small change in the second version.

You can try similar experiments with different CTAs on your website. You may not see a 90% improvement, but you can test CTA variations to see which one works better.

I also like to use an analytics solution or heatmap tool to monitor the on-page behavior of my website visitors. This shows me what my users do before they click the CTA and gives me ideas on optimizing my landing page and call to action button.

I hope these insights help you understand some CTA best practices so you can grow your landing page conversions. You may also want to see these WPBeginner guides on how to create a WooCommerce popup to increase sales or the best social proof plugins for WordPress.

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.

The post 7 Call to Action (CTA) Best Practices for Guaranteed Landing Page Conversions first appeared on WPBeginner.