WordPress accessibility

WordPress Accessibility: How to create an accessible website

Accessibility in WordPress is an important component when creating websites that is still not discussed enough. How accessible is the popular CMS? Why is accessibility so important? And how can you make your WordPress website accessible for everyone?

Access for all: facts about accessibility

WordPress powers more than 35 percent of all websites. E-commerce websites, large online publications, news channels, blogs and business websites use WordPress because it is easy to use.

And precisely because WordPress is so popular, it has a major impact on web accessibility. However, accessibility is not always the main focus when developing and redesigning a website. Instead, many WordPress users are concerned with choosing the right theme, improving their SEO ranking and ensuring that their website loads quickly. There's nothing wrong with that - but it should be just as important that your WordPress website is accessible to everyone. 

According to statistics from Interactive Accessibility, 56 million Americans live with a disability. In addition, the Pew Research Center states that 54 percent of adults with disabilities in the U.S. use the Internet regularly. And that's just the United States. Worldwide, these numbers are rising.

If you ignore the issue of accessibility, you are already excluding 20 percent of the world's population from being able to use your website. In short, neglecting accessibility is not good for your business. But more importantly, it's terrible for creating a fairer and more just world. 

So if you've ever wondered how to create an accessible website with WordPress, then this guide is for you. We'll answer some key questions, including:

  • What is web accessibility?
  • Is WordPress accessible "out of the box"?
  • Which tools and plugins help you to create an accessible WordPress website?

What is web accessibility anyway?

Web accessibility refers to the tools that enable people with disabilities to use the web and make it accessible. This is particularly relevant for disabilities that can affect the way people access and use the web, including:

  • Visual impairments
  • Acoustic impairments
  • Language impairments
  • Cognitive disabilities 
  • Neurological disabilities
  • Temporary disabilities (such as a broken arm)

This list includes age-related disabilities - and even disabilities resulting from a slow internet connection. One of the main reasons why accessibility is so important is the increasing role of the internet in our daily lives: from accessing information and the latest news to shopping for groceries and keeping in touch with our loved ones.

Other reasons why accessibility on the Internet is important: 

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 was not always accessible: Just a few years ago, users who relied on assistive technologies on the web had significant problems navigating the admin dashboard.

WordPress Accessibility: How to create an accessible website

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 together with the media library and the Theme Customizer have become much more accessible. In addition, numerous keyboard shortcuts have been added to WordPress Core to speed up the editing and formatting of posts and pages. 

The coding standards for WordPress accessibility were added to the WordPress core manual in March 2016. Since then, themes and plugins must pass a strict accessibility test in order to be classified as accessible.

What is the Core Contributor Handbook?

The manual defines the coding standards that 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. Although WordPress is striving to comply with the Authoring Tool Accessibility Guidelines (ATAG) 2.0, there are other problems that stand in the way of 100% accessibility: 

  • Theme and plugin developers from third-party providers do not always adhere to the Accessibility Guidelines. As a result, most accessibility problems in WordPress can be traced back to non-accessible 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).
WordPress Accessibility: How to create an accessible website

Tips for accessible WordPress websites

When creating an accessible website, there are certain principles set out in the Web Content Accessibility Guidelines. You should definitely use them to ensure that everyone can use your WordPress website. 

Checklist for the accessibility of WordPress websites

  • Perceptible: All users must be able to perceive the components of the information and user interface.
  • Operable: Regardless of which device users use to access your website, the user interface components and navigation must be operable.
  • Understandable: All users must be able to understand the information and 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 these four key principles, here are some of the guidelines you need to follow when creating an accessible website with WordPress. 

Guidelines to ensure that your WordPress website is visible

  • Links and buttons should not be distinguished from the rest of your content by color alone.
  • Offer Braille support and provide text alternatives for visual and audio content, such as images and videos.
  • Set the text width and line width to sizes that maximize readability.
  • Make sure that there is sufficient contrast between your text and the background. In other words, please do not use bright red text on a black background.
  • Audio and video content should contain transcriptions, captions or sign language.
  • Animated GIFs, flashing animations and other content that could cause seizures and physical reactions should be avoided.

Guidelines to ensure that your WordPress website is operable

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

Guidelines to ensure that your WordPress website is understandable

  • When designing, think of different viewports and change the position and display of the main elements accordingly.
  • Use headings to define different subsections of a page.
  • Avoid using jargon, difficult terms and abbreviations. Instead, make sure that your content is written clearly and concisely.
  • Links must be descriptive and make sense even without context. For example, it is better to have a button or a link with the text "Learn more about our services" than simply "Learn more".

Guidelines to ensure that your WordPress website is robust

  • Insert skip links at the top of each page.
  • Make sure that your form fields have appropriate labels. Your forms should also include warning and confirmation messages that are easy for colorblind people to see.
  • Use tabindex to insert an element that normally does not receive focus, such as div or span, into the navigation order when it is used for interaction.
  • Downloadable media such as PDF documents, audio or video content should have a description indicating that a download is starting.
  • Non-standard interactive elements, such as accordions or tabs, should have a meaning according to the WAI-ARIA roles.

"*" indicates required fields

I would like to subscribe to the newsletter to be informed about new blog articles, ebooks, features and news about WordPress. I can withdraw my consent at any time. Please note our Privacy Policy.
This field is used for validation and should not be changed.

WordPress accessibility plugins and tools

If you follow the above guidelines, your website will be accessible. However, it is not always so easy to keep track of all these rules and guidelines.

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

WP Accessibility

WP-Accessibility

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

Main features of WP Accessibility:

  • Add skip links with user-defined destinations
  • Add outline to the keyboard focus state
  • Remove tab index from focusable elements
  • Add long descriptions to images
  • Force alt attributes for images in the Classic Editor

WP Accessibility also fixes accessibility issues in WordPress Core, such as removing superfluous 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 installations. The WordPress plugin makes it easier for you to activate certain functions and make your website more accessible. 

Main features of AccessibleWP Toolbar:

  • Activate keyboard navigation so that users can navigate your website using their keyboard,
  • Users can deactivate CSS3 animations
  • Users can change website colors to colors with better contrast
  • Users can change the website colors to grayscale colors
  • Users can increase or decrease the font size on your website

The best WordPress accessibility plugin for: Businesses that want to have a more accessible website but maintain 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

The popular WordPress accessibility plugin, One Click Accessibility, was originally developed for the Pojo framework and is now compatible with all WordPress themes. The plugin has a rating of 4.5 stars and more than 30,000 active installations. 

Key features of One Click Accessibility: 

  • Users can activate or control font size, contrast, underlining of links, readable fonts with an accessibility toolbar
  • Activate 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 free of charge 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.

Main features of WordPress Accessibility Helper: 

  • Add skip links
  • Set the font size according to your wishes
  • 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 can be downloaded for free. 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 checks your website for web accessibility issues and provides you with a detailed report. The assessment is based on the Web Accessibility Standards according to Section 508 and WCAG 2.1 LEVEL A/AA. 

Main features of WP ADA Compliance Check Basic: 

  • Evaluate your website for web accessibility issues
  • Run accessibility reports
  • Receive easy-to-understand instructions on how to resolve accessibility issues
  • Automatic correction of accessibility problems (only in the Premium version)
  • Problems identifying in theme files (only in the premium version)

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

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

Access Monitor

Access monitor

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

Main features of Access Monitor: 

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

The best WordPress accessibility plugin for: Organizations that want an easy, free way to identify accessibility issues on a regular schedule. 

Price: Access Monitor can be downloaded free of charge from the official repository. 

A note on WordPress plugins and accessibility

It's important to note that plugins, just like WordPress themes, can be submitted by anyone and go through an optional accessibility check during the review process. Therefore, many WordPress plugins do not comply with digital accessibility guidelines - and using them can result in your website no longer being accessible. 

Common examples of such plugins are slider or carousel plugins that are set to autoplay or pause with keyboard interaction. Another example is a form plugin that doesn't have properly labeled fields. With this in mind, you should re-test your WordPress website for accessibility every time you install a new plugin. 

WordPress themes and accessibility

If you go to the official WordPress repository and filter your search for accessible themes, you will unfortunately find that there are only 108 themes that are marked as accessible. 

As mentioned above, thanks to the efforts of the Make WordPress Accessible team, theme builders can submit their theme for an optional accessibility check during the review process. 

To receive the "Accessibility-Ready" tag, a theme must fulfill a set of digital accessibility guidelines listed in the Theme Review Guide and the official WordPress Codex. 

Developing accessible WordPress websites

Let's be honest: most WordPress users will opt for a premium theme from third-party providers, third-party marketplaces or a completely custom theme. 

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

Underscores

Underscores was developed by Automattic and is a starting point for most of the themes available on WordPress.com. The theme contains several accessible functions. 

Genesis by StudioPress

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

GeneratePress

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

WCAG Theme

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

Astra

Astra is a popular theme with free and premium versions that is characterized by an accessible tag, compatibility with popular page builder plugins and fast loading times.

Astra provides you with an accessible foundation for your WordPress website and speeds up the development time and process. 

Further resources on WordPress accessibility

When it comes to WordPress and accessibility, there is a wealth of information on the internet. If you want to find out more about accessibility, 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 the 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 making WordPress more accessible.
  • WAVE Web Accessibility Evaluation Tool: Use this tool to test your WordPress website for accessibility. After a scan, the tool will show you problems that you need to fix in order to meet the accessibility guidelines. 
  • Powerful: When you start building your website in Sketch or Adobe XD, this plugin helps you ensure that your website projects are accessible from the start. 
  • Accessibility Color Wheel: This tool allows you 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 allows you to 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. This means that you can use it to check any website for accessibility. The tool then creates a detailed report that you can use to improve the accessibility of your website.

Conclusion: How to ensure the accessibility of your WordPress website

WordPress as a platform already offers you some accessibility features out of the box - but it's still not completely accessible. If you want to develop accessible websites with WordPress, you need to keep a few things in mind: 

  • Follow the official Web Content Accessibility Guidelines and the WordPress Accessibility Guidelines outlined in the Theme Review Manual. 
  • Start with an accessible WordPress theme to shorten the development time and create a solid foundation for an accessible website. 
  • Use WordPress accessibility plugins and tools to test your finished website and make sure it's accessible for everyone.

By implementing the tips above, 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 of Raidboxes. 

Your questions about WordPress accessibility

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.

Did you like the article?

With your rating you help us to improve our content even further.

One comment on "WordPress Accessibility: How to create an accessible website"

Write a comment

Your e-mail address will not be published. Required fields are marked with *