WordPress -Accessibility

WordPress Accessibility - How to create an accessible website

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

Access for Everyone - Accessibility Facts

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

And precisely because WordPress is so popular, it has a great influence on web accessibility. However, the topic of accessibility is not always at the forefront 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 all. 

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. 

So if you've ever wondered how to create an accessible website with WordPress, 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 create an accessible WordPress website?

What is web accessibility anyway?

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)

Also included are disabilities that come as a result of aging, or even impairments due to a slow internet connection in certain areas. 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 "out of the box" accessible? 

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

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 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 manual defines the coding standards that WordPress developers must meet when adding their posts to 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).
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 make sure that everyone can use your WordPress website. 

Checklist for WordPress website accessibility

  • 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 these four key principles, here are some of the guidelines you need to follow when creating an accessible website with WordPress. 

Guidelines to ensure your WordPress website is noticeable

  • 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 that your WordPress website is usable

  • Refrain from using CAPTCHA or provide several ways to solve them as they can pose 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 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 WordPress website is comprehensible

  • 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 site.
  • 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 WordPress 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 div or span, 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.

"*" indicates required fields

Consent*
This field is for validation and should not be changed.

WordPress Accessibility Plugins and Tools

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 WordPress accessibility plugins from the official WordPress pluginrepository. It has a 5-star rating and more than 30,000 active installations. The pluginaddresses and fixes common accessibility issues 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 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 pluginAccess Monitor has a 5-star rating and 400 installations. The plugindoes not add any 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

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 are slider or carousel plugins set to autoplay or pause with keyboard interaction. Another example is a form plugin that does not 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

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. 

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 accessible WordPress websites

Let's face it, most WordPress users will opt for a premium-theme third party, third party marketplace or a completely custom design. 

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

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

GeneratePress

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

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 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 provides you with an accessible foundation for your WordPress website and speeds up the development time and process. 

More resources on WordPress Accessibility

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 how to create accessible plugins, themes and widgets, and how to make 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 WordPress website for accessibility. After a scan, the tool will show you issues that you need to fix to meet 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.

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 is still not completely accessible. If you want to develop accessible websites with WordPress, you need to consider a few 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.

By following the advice 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'll be creating, don't hesitate to sign up for a free trial at 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?

Your rating helps us improve our future content.

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

  1. Thank you for letting us know, Basia!. It seems to be a technical problem with the translation, we will try to fix it asap. 🙂
    Best regards,
    Leefke

Post a comment

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