How to Build an Accessible Website with WordPress (+ Tools to Use)

Maddy Osman Last updated on 19.10.2020
12 Min.
WordPress -Accessibility
Last updated on 19.10.2020

WordPress accessibility is a vital component of website building that’s not discussed enough. But how accessible is WordPress? Why is accessibility so important? And how can you build an accessible website with WordPress?

Access for Everyone: Accessibility Facts

WordPress powers more than 35% of all websites. E-commerce sites, major online publications, news outlets, blogs, and business websites use WordPress because it’s easy to use.

WordPress has a wide impact on website accessibility because of its popularity. However, accessibility is not always at the forefront of a website owner’s mind. Instead, most website owners are concerned with choosing the right theme, improving their SEO rank, and making sure their website loads fast. There’s nothing wrong with that — but making sure your WordPress website is accessible to everyone should be equally important. 

According to statistics compiled by Interactive Accessibility 56 million Americans live with a disability. Additionally, Pew Research Center indicates that 54 percent of adults with disabilities in the USA use the Internet regularly. And that's just the United States. Globally those numbers go up.

When you ignore accessibility, you’re excluding 20% of the world’s population from being able to use your website. In short, forgetting about accessibility isn't good for business. But more importantly, it’s terrible for creating a more just and equitable world. 

If you’ve been wondering how to build an accessible website with WordPress, this guide is for you. We’ll answer a few key questions, including:

  • What is web accessibility?
  • Is WordPress accessible out of the box?
  • What tools and WordPress accessibility plugins can be used to help build an accessible WordPress website? 

What is web accessibility?

Web accessibility refers to the tools that make it possible for people with disabilities to access and use the web. This is specifically relevant to disabilities that can have an impact on how people access and use the web, including:

  • Visual impairments
  • Auditory impairments
  • Speech impairments
  • Cognitive disabilities 
  • Neurological disabilities
  • Temporary disabilities (such as a broken arm)

It also includes disabilities that happen as a result of aging and even those living in areas with a slow internet connection. One of the most important reasons why accessibility matters is the Internet’s increasing role in our everyday lives — from accessing information and the latest news to buying groceries and staying in touch with our loved ones.

Here are a few additional reasons why internet accessibility matters: 

Given the importance of the internet in a modern world, the web must be accessible to everyone, regardless of their status or ability.

Is WordPress Accessible Out-of-the-Box? 

WordPress wasn’t always accessible. Just a few years ago, users who relied on assistive technologies to browse the web had significant issues navigating the admin dashboard in WordPress.

How to Build an Accessible Website with WordPress (+ Tools to Use)

Since then, a lot has changed. For starters, a small group of volunteers working together on the Make WordPress Accessible Team has significantly improved WordPress accessibility.  

As a result of their work, the admin area , along with the Media Library and Theme Customizer, is a lot more accessible. Numerous keyboard shortcuts were also added to the WordPress core to speed up the editing and formatting of posts and pages. The 

The WordPress Accessibility Coding Standards were added to the WordPress Core Handbook in March 2016. As a result, themes and plugins now have to pass a rigorous accessibility review to be considered accessibility-ready.

What is the Core Contributor Handbook?

The Handbook defines the code standards which WordPress developers must meet when adding their contributions to the WordPress core and submitting themes and plugins to the official repository.

Although major changes and improvements were made, WordPress still has a way to go in terms of accessibility. While WordPress aims to conform to the Authoring Tool Accessibility Guidelines (ATAG) 2.0 , there are a couple of issues that prevent it from being 100% accessible: 

  • Third-party theme and plugin developers don’t always follow the accessibility guidelines which means most of the accessibility issues in WordPress stem from inaccessible themes and plugins.
  • The new Gutenberg-editor editor had 90 accessibility problems at the time of its release, with only 22 accessibility issues remaining unresolved at the time of writing this article.
How to Build an Accessible Website with WordPress (+ Tools to Use)

Tips for Building Accessible WordPress Websites

When you are building an accessible website, there are certain principles set forth by the Web Content Accessibility Guidelines that you can use to ensure anyone can use your site. 

Website Accessibility Checklist

  • Perceivable: Users have to be able to perceive the information and user interface components.
  • Operable: No matter what device or method a visitor is using to access your site, the user interface components and navigation must be usable.
  • Understandable: All website visitors must be able to understand the information and the user interface.
  • Robust: Visitors as well as various user agents (including assistive technologies) must be able to read and understand the content on your website. 

Based on those four key principles, here is a breakdown of some of the guidelines you need to follow when building an accessible website with WordPress. 

Guidelines to Ensure Your Website is Perceivable

  • Links and buttons shouldn’t rely on colors alone to be distinguished from the rest of the content
  • Provide support for braille and text alternatives for visual and audio content, like images and video.
  • Set your text width and linewidth to sizes that maximize readability.
  • Make sure there is enough contrast between your text and the background. In other words, no light red text on a black background, please.
  • Audio and video content should include transcripts, captions, or sign language.
  • Animated GIFs, flashing animations, and other content that could cause a seizure should be avoided.

Guidelines to Ensure Your Website is Operable

  • Refrain from using CAPTCHA or provide several ways to solve them as they can pose problems for many people.
  • Links shouldn’t open content in a new window without notifying the user or without user interaction.
  • Make sure users can access your buttons and menu items (as well as drop-down menus) via keyboard and mouse. 
  • Media elements such as video, audio, carousels, or sliders shouldn’t be set to autoplay or change without user interaction.

Guidelines to Ensure Your Website is Understandable

  • When designing, keep different viewports in mind and change the position and presentation of the main elements accordingly.
  • Use headings to define different subsections of a page.
  • Avoid using jargon, difficult terms, and abbreviations. Instead, make sure your content is written in a clear and concise manner.
  • Links have to be descriptive and make sense even without context. For example, it’s better to have a button or a link that says Learn more about our services instead of just Learn more.

Guidelines to Ensure Your Website is Robust

  • Include skip links at the top of each page.
  • Make sure your form fields have corresponding labels. Your forms should also include warning and confirmation messages that are easy to recognize, even for people who are color blind.
  • Use tabindex to add an element that does not normally receive focus, such as or into the navigation order when it is being used for interaction.
  • Downloadable media such as PDF documents, audio, or video content should have a description that indicates a download will start.
  • Non-standard interactive elements, such as accordions or tabs, should have the meaning provided with WAI-ARIA roles.

Best WordPress Accessibility Plugins and Tools to Make Accessible Websites With WordPress

Following the guidelines above will ensure that your website is accessible. However, keeping track of all these rules and guidelines is not always so easy.

Luckily, there are a number of WordPress accessibility Plugins and tools to help you build accessible websites faster without skipping a step. 

WP Accessibility

WP-Accessibility

WP Accessibility is one of the best WordPress accessibility plugins on the official WordPress Plugin Repository. It has a 5-star rating and more than 30,000 active installs. The plugin addresses and fixes common accessibility issues in WordPress themes. 

Key features of WP Accessibility:

  • Add skip links with user-defined targets.
  • Add an outline to the keyboard focus state.
  • Remove tab index from focusable elements.
  • Add long descriptions to images.
  • Enforce alt attributes on images in the Classic editor.

WP Accessibility also fixes accessibility issues found in the WordPress core, such as removing redundant title attributes from page lists, category lists, and archive menus.

Best WordPress accessibility plugin for: Companies with existing websites that would like to make it more accessible.

Price: You can download WP Accessibility for free from the official repository. 

AccessibleWP Toolbar

WPAccessible Toolbar

AccessibleWP Toolbar, formerly known as Accessible Poetry, has a 4.5-star rating and more than 4000 active installations. The WordPress Plugin makes it easy to enable certain features and make your site more accessible. 

Key features of AccessibleWP Toolbar:

  • Enable keyboard navigation so users can navigate your site using their keyboard.
  • Allow users to disable CSS3 animations.
  • Allow users to change site colors to colors with better contrast.
  • Allow users to change site colors to grayscale colors.
  • Allow users to increase or decrease the font size on your site.

Best WordPress accessibility plugin for: Companies that would like to have a more accessible website but retain a brand-specific color scheme and overall aesthetic. 

Price: You can download AccessibleWP Toolbar for free from the official repository. 

One Click Accessibility

One-Click-Accessibility

A popular WordPress accessibility plugin, One Click Accessibility, was initially developed for the Pojo framework and has since been made compatible with all WordPress themes. The plugin has a 4.5-star rating and more than 30,000 active installations. 

Key features of One Click Accessibility:

  • Allow visitors to enable or control the font size, contrast, links underline, readable fonts with an accessibility toolbar.
  • Enable skip links.
  • Add outline focus for focusable elements.
  • Remove target attributes from links and add landmark roles.

Best WordPress accessibility plugin for: Websites that were originally built within the Pojo framework.

Price: One Click Accessibility is free to download from the official repository. 

WordPress Accessibility Helper

WordPress -Accessibility Helper

WordPress Accessibility Helper has a 5-star rating and more than 10,000 active installations. This plugin offers a free version with a robust set of features. The premium version adds even more features, including the ability to control modal windows and popups, add accordions, and customize logos.

Key features of WordPress Accessibility Helper

  • Add skip links.
  • Reset font size and set font size to your preference.
  • Check pages and posts for accessibility errors.
  • Set custom colors for better/darker contrast.
  • Underline or highlight all links.

Best WordPress accessibility plugin for: Companies that need a robust plugin to make accessibility a key feature of their website and business. 

Price: WordPress Accessibility Helper is free to download. You can purchase the Pro version for $80, which allows you to install the plugin on one site and get three months of support. 

WP ADA Compliance Check Basic

WP-ADA Compliance Check Basic

WP ADA Compliance Check Basic will check your website for web accessibility issues and give you a detailed report. The evaluation is based on the Section 508 and WCAG 2.1 LEVEL A/AA Web Accessibility Standards. 

Key features of WP ADA Compliance Check Basic

  • Evaluate your website for Web Accessibility issues.
  • Run accessibility reports.
  • Get easy-to-follow instructions for fixing accessibility issues.
  • Automatically correct accessibility issues with the premium version.
  • Identify issues found in theme files with the premium version.

Best WordPress accessibility plugin for: Companies that want to focus primarily on the legal guidelines of website accessibility, or companies interested in the time-saving feature of automatic correction with the premium version.

Price: WP ADA Compliance Check Basic can be downloaded for free and is limited to 25 posts or pages. The premium version starts at $165 for one website and grants you a year of support and updates. 

Access Monitor

Access Monitor

The Plugin Access Monitor plugin has a 5-star rating and 400 installations. The plugin won’t add any accessibility features to your website but rather allow you to check how accessible your website currently is. It also runs an automated accessibility check of your website powered by the Tenon.io web accessibility service. 

Key features of Access Monitor

  • Schedule weekly or monthly accessibility reports.
  • Test a specific set of pages.
  • Learn about accessibility issues that can be definitively determined by machine.

Best WordPress accessibility plugin for: Companies that want a simple, free way to identify accessibility issues on a regular schedule. 

Price: Access Monitor is free to download from the official repository. 

A Note About WordPress Plugins and Accessibility

It’s worth mentioning that like WordPress themes, plugins can be submitted by anyone and go through an optional accessibility check during the review process. As such, many WordPress plugins don’t meet accessibility guidelines, and using them can lead to your website being inaccessible. 

Common examples of such plugins include sliders or carousel plugins that are set to autoplay or break with keyboard interaction. Another example is a form plugin that doesn’t have properly labeled fields. With that in mind, be sure to re-test your website for accessibility whenever you install a new plugin. 

WordPress Themes and Accessibility

If you go to the official repository and filter your search for accessible themes, you’ll see that there are only 108 themesthat are tagged as accessibility-ready. 

WordPress -Themes

As mentioned earlier, thanks to the efforts of the Make WordPress Accessible Team, theme authors can submit their theme for an optional accessibility audit during the theme review process. 

To get the accessibility-ready tag, a theme must meet a number of accessibility guidelines outlined in the Theme Review Handbook and the official WordPress Codex remaining unresolved at the time of writing this article. 

Developing Accessibility-Ready WordPress Websites

Let’s face it: most WordPress users will opt for a third-party premium theme from third-party marketplaces or a completely custom design. 

If you’re a developer tasked with creating an accessible WordPress website, there are a few themes that you can use as a starting point.

Underscores

Underscores

Underscores was developed by Automattic and is a starting point for most themes available on WordPress.com. The theme includes several accessibility-ready features. 

Genesis by StudioPress

Genesis

Genesis by StudioPress is a popular premium framework that can be used to develop your own accessible Genesis child theme. Alternatively, you can use one of the existing child themes with accessibility-ready features.  

GeneratePress

GeneratePress

GeneratePress is another popular theme that is accessibility-ready and can be used as a starting point for your design.

WCAG Theme

WCAG-Theme

WCAG Theme was specifically developed with accessibility in mind and complies with the Section 508 & WCAG 2.0 AA. It also has full keyboard support. 

Astra

Astra

Astra is a popular theme with free and premium versions that boasts an accessibility-ready tag as well as compatibility with popular page builder plugins and fast loading times.

Using the themes above will give you an accessible foundation for your WordPress website as well as speed up your development time and process. 

More WordPress Accessibility Resources

When it comes to WordPress and accessibility, there's plenty of information available on the web. If you'd like to learn more about it, here are some good places to start your research:

  • Making Accessible WordPress Themes: A presentation by Joseph Karr O'Connor from 2013 WordCamp held in Montreal. The presentation covers accessibility in general and how it applies to WordPress, including creating accessible plugins, themes, and widgets as well as making your content more accessible.
  • WordPress development tools and accessibility plugins: A list of tools and resources provided by the Make WordPress Accessible team that will help you test and improve accessibility features on your websites.
  • Make WordPress Accessible homepage: The official blog of the Make WordPress Accessible Team where you can read the latest news and contribute to make WordPress more accessible.
  • WAVE web accessibility evaluation tool: Use this tool to test your website for accessibility. After a scan, the tool will show you issues you need to fix to meet the accessibility guidelines. 
  • Stark: If you start your website build in Sketch or Adobe XD, this plugin will help you ensure your website projects are accessible from the start. 
  • Accessibility Color Wheel: With the help of this tool, you can choose colors that have enough contrast and meet accessibility guidelines. You can also see how people who suffer from color blindness will see your chosen colors. 
  • Axe Chrome Extension: If you use Chrome, this extension allows you to check any website for accessibility issues with a click of a button.
  • The A11y Machine: You can download the A11y Machine from GitHub. This tool serves as an automated accessibility testing tool that tests any website for accessibility issues. It then produces a detailed report you can use to improve the accessibility of your website.

Final Thoughts: How to Ensure WordPress Accessibility

WordPress as a platform offers a lot of accessibility out of the box, however, it’s still not fully accessible. If you want to develop accessible websites with WordPress, there are several things to keep in mind: 

  • Follow the official Web Content Accessibility Guidelines as well as the WordPress accessibility guidelines outlined in the Theme Review Handbook. 
  • Start with an accessibility-ready WordPress theme to cut down on development time and set a solid foundation for an accessible website. 
  • Use WordPress accessibility plugins and tools to test your finished website and ensure it’s accessible for everyone.

By implementing the tips above, you’ll be well on your way toward building accessible websites and making the internet easier for everyone to use. And if you need fast and secure WordPress hosting for all of those accessible websites you’ll be making, don’t hesitate to sign up for a free trial with RAIDBOXES. 

Your questions: WordPress accessibility & accessible websites

Do you have any questions for Maddy? Use the comment function below. More tips on web design and development? Follow us on Twitteror Facebook , or subscribe to our newsletter.

Picture: Unsplash

Maddy Osman is an SEO Content Strategist who works with various clients in the field of WordPress and web hosting. Her background in WordPress web design contributes to a well-rounded understanding of SEO and how to connect brands to relevant search prospects.

Related articles

Comments on this article

Write a comment

Your email address will not be published. Required fields are marked with * .