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

Maddy Osman Last updated 10/19/2020
12 Min.
WordPress -Accessibility
Last updated 10/19/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 gets more than 35 percent of all websites up and running. E-commercesites , large online publications, news channels, blogs and business websites use WordPress because it is 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 from Interactive Accessibility, 56 million Americans live with a disability. In addition, the Pew Research Center states that 54 percent of U.S. adults with disabilities use the Internet regularly. And that's just the United States. Globally, these numbers are on the rise.

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 all, regardless of 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)

A lot has changed since then. First, a small group of volunteers - the so-called Make WordPress Accessible Team - significantly improved the accessibility of WordPress .  

As a result of their work, the admin area has become much more accessible along with the media library and Theme Customizer. In addition, numerous keyboard shortcuts have been added to WordPress Core to speed up the editing and formatting of posts and sites . 

The coding standards for accessibility of WordPress were added to the WordPress Core manual in March 2016. Since then, Themes and Plugins have to pass a strict accessibility check in order to be classified as accessible at all.

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 have been made, WordPress still has some work to do in the area of accessibility. While WordPress strives to comply with the Authoring Tool Accessibility Guidelines (ATAG) 2.0, there are other issues that stand in the way of 100% accessibility: 

  • 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 had 90 accessibility issues at the time of its release. (At the time of this writing, only 22 issues remain unresolved).
How to Build an Accessible Website with WordPress (+ Tools to Use)

Tips for Building Accessible WordPress Websites

When you create an accessible website, there are certain principles that are laid out in the Web Content Accessibility Guidelines. You should definitely use them to make sure that everyone can use your website. 

Website Accessibility Checklist

  • Perceptible: All users must be able to perceive the components of the information and user interface.
  • Usable: Regardless of what device users use to access your website, the user interface components and navigation must be usable.
  • Understandable: All users must be able to understand the information as well as the user interface.
  • Robust: Both users and various user agents (including assistive technologies) must be able to read and understand the content of the 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
    insert
    an element that normally receives no focus, such as
    or , into the navigation order when 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 meaning according to 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.

Fortunately, there are a number of Plugins and tools for more WordPress , which can help you create accessible websites faster - without forgetting important steps. 

WP Accessibility

WP-Accessibility

WP Accessibility is one of the best WordPresss Accessibility Plugins from the official WordPress Plugin repository. It has a 5-star rating and more than 30,000 active installs. The Plugin addresses and fixes common issues regarding accessibility in WP-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.

The best WordPress Accessibility Plugin for: Companies with existing websites that want to improve their accessibility.

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 4,000 active installs. The WordPress Plugin makes it easy for you to enable certain features and make your website 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.

The best WordPress Accessibility Plugin for: Businesses that want to have a more accessible website, but maintain a branded color scheme and overall aesthetic. 

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

One Click Accessibility

One-Click Accessibility

The popular WordPress -Plugin for accessibility, One Click Accessibility, was originally developed for the Pojo Framework and is now 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.

The best WordPress Accessibility Plugin for: Websites originally created within the Pojo framework.

Price: One Click Accessibility can be downloaded for free 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. The Plugin offers a free version with a comprehensive set of features. The premium version offers 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.

The best WordPress Accessibility Plugin for: Businesses 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 a website and get three months of support. 

WP ADA Compliance Check Basic

WP-ADA-Compliance-Check-Basic

WP ADA Compliance Check Basic checks your website for web accessibility issues and provides you with a detailed report about it. The assessment is based on the Web Accessibility Standards Section 508 and WCAG 2.1 LEVEL A/AA. 

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.

The best WordPress Accessibility Plugin for: Businesses that want to focus primarily on web accessibility legal guidelines, or businesses interested in the time-saving auto-correct feature with the premium version.

Price: WP ADA Compliance Check Basic is free to download and limited to 25 posts or sites . The premium version starts at $165 for one website and gives you one year of support and updates. 

Access Monitor

Access Monitor

The Plugin Access Monitor has a 5-star rating and 400 installations. The Plugin does not add any accessibility features to your website, but allows you to check how accessible your site currently is. It also performs an automatic accessibility check of your website, which is controlled by the web accessibility service Tenon.io

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.

The best WordPress Accessibility Plugin for: Businesses that want a simple, free way to identify accessibility issues on a regular schedule. 

Price: Access Monitor can be downloaded for free 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

Unfortunately, if you go to the official repository of WordPress and filter your search for accessible Themes , you will find that there are only 108 Themes, which are marked as accessible. 

WordPress -Themes

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

To receive the "Accessibility Ready" tag, a Theme must meet a set of digital accessibility guidelines listed in the Theme Review Manual and the official WordPress Codex

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 of the WordPress .com available Themes. The Theme contains several accessible 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 childThemes with accessible features.  

GeneratePress

GeneratePress

GeneratePress is another popular Theme, which is accessible and can be used as a starting point for your design.

WCAG Theme

WCAG-Theme

WCAG Theme was designed specifically with accessibility in mind and complies with Section 508 & WCAG 2.0 AA. In addition, it has full keyboard support. 

Astra

Astra

Astra is a popular Theme with free and premium versions that features an accessible tag, compatibility with popular page builders Plugins and fast loading times.

Astra gives you an accessible foundation for your WP site and speeds up the 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 WordCamp 2013 in Montreal. The presentation covers accessibility in general and its application in WordPress , including creating accessible Plugins, Themes and widgets, and making your content more accessible.
  • WordPress Development Tools and Accessibility Plugins: A list of tools and resources provided by the Make WordPress Accessible team to 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 help make WordPress more accessible.
  • WAVE Web Accessibility Evaluation Tool: Use this tool to test your site for accessibility. After a scan, the tool will show you issues that you need to fix to meet the Accessibility Guidelines. 
  • Strong: When you start building your website in Sketch or Adobe XD, this Plugin will help you make sure your website projects are accessible from the start. 
  • Accessibility Color Wheel: Use this tool to choose colors that have enough contrast and meet accessibility guidelines. You can also see how people who suffer from color blindness will see the colors you choose. 
  • Axe Chrome Extension: If you use Chrome, this extension lets you check any website for accessibility issues with a single click.
  • The A11y Machine: You can download the A11y Machine from GitHub. This tool serves as an automated accessibility testing tool. That is, you use it to test any website for accessibility. The tool then creates a detailed report that you can use to improve the accessibility of your website.

Final Thoughts: How to Ensure WordPress Accessibility

WordPress as a platform already offers you some accessibility features out of the box - but is still not fully accessible. If you want to develop accessible websites with WordPress , you have to consider some things: 

  • 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.

If you implement the above tips, you'll be well on your way to creating accessible websites and making the internet more usable and accessible for everyone. And if you need fast and secure WordPress hosting for all the accessible websites you're going to create, don't hesitate to sign up for a free trial at RAIDBOXES

Your questions: WordPress accessibility & accessible websites

What questions do you have for Maddy? Feel free to use the comment function. Want more tips on web design and development? Then follow us on Twitter, Facebook or via our newsletter.

Contributed image: 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.

Comments on this article

Post a comment

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