WordPress Accessibility: Making Your Site Accessible to Everyone

When building a WordPress website, you already have a lot of things in your mind. Optimizing images, installing the best plug-ins, making the website load blazing fast, integrating social media icons, installing Google Analytics, and of course writing top-notch quality content once the site goes online – these are just a few of the tasks that need to be done. However, there is one thing that is very important yet often overlooked: WordPress Accessibility that is about optimizing your WordPress site for better accessibility.

Given the fact that nearly 15 percent of the world’s population suffers from some type of physical or mental disability and use assistive technologies – such as screen readers and refreshable Braille displays – to surf, navigate and interact with the web, making your WordPress site accessible and usable by everyone is the best thing you can ever do. Through this blog post, you will learn what web accessibility actually is and how you can implement it on your WordPress site. So, without any further ado, let’s get right to the main point!

What is Website Accessibility?

In simplest terms, website accessibility refers to the practice of making a website and its contents accessible to everyone, including people with visual, auditory, motor, cognitive, or any other kind of disability. Often abbreviated as A11y, where 11 represents the letters between a and y in the word accessibility, web accessibility emphasizes on providing all users equal access to a website’s information and functionality.

The key principles of what makes a website fully accessible to all users are outlined in the Web Content Accessibility Guidelines (WCAG) 2.0 regulated by W3C. According to these guidelines, a website should have the following characteristics in order to be accessible to users with disabilities:

• Perceivable: Information and UI elements must be presented in a way that users can easily perceive them.
• Operable: User interface components and navigation must work under a variety of different circumstances.
• Understandable: Users must be able to understand the operation of the user interface and all the information presented on the site.
• Robust: The site content must be readable and understandable by a wide variety of user agents, including assistive technologies.

Needless to say, these accessibility principles apply to any website online, including those powered by WordPress!

How You Can Make Your WordPress Site Accessible to Everyone

Offer Text Alternatives for Non-text Content:

While supplementing your content with multimedia is a great way to make it even more valuable, engaging and interesting, not every user has the ability to see or hear audiobooks, podcasts, videos, images, and graphics. To make your WordPress site accessible to users with such disabilities, don’t forget to provide text alternatives for all non-text content on the site. Add appropriate Alt text and captions to all your images and offer transcripts for time-sensitive content like audios and videos.

Offer Keyboard Support and Input Assistance:

Some users are unable to access web pages using a mouse or trackpad due to their motor skill disabilities. They rely on the keyboard or keyboard-like devices to navigate through a website and use the tab key to move forward and a combination of Shift+Tab to go backward. To make your WordPress site accessible to such users, make sure you’re able to access Links, Buttons, Menus and Form fields by tabbing through a web page.

Use Clean, Structured Content And Semantic HTML:

Having a solid content and code structure pleases everyone, whether it is a human or a search engine bot. Structure and format your content with HTML elements like heading tags, bulleted lists, blockquote, skip links etc to make it look better and help assistive technologies find what and where everything is. This practice not only makes the content easy to process for screen readers but also helps sighted users easily scan down the page to find information.

Implement ARIA Landmarks and Roles:

ARIA, which stands for Accessible Rich Internet Applications, help screen reader users navigate directly to structural regions of a web page – enabling them to know what part of the web page they are currently in. These attributes can be added to your HTML in the same way as you add classes to an HTML web page. Using ARIA landmark roles, you can define which section of a web page user should skip and which section he should jump straight to. For optimal effect, make sure to implement ARIA landmarks and roles with clean and semantic HTML.

Be Careful with Colors and Contrast:

Did you know there are over 2.7 million color blind people in the world, which is about 5% of the total population? To make your WordPress site work both with and without color, be careful about the color ratios and contrast. Use high contrast color options, such as white and black, to make your WordPress site accessible to people with visual limitations. According to the WCAG 2.0, the ideal ratio of the contrast between the background and foreground colors for body text is 4:5:1. To add a little more flair to your website, you can take advantage of patterns or textures to further increase contrast.

Use an ‘Accessibility-Ready’ Theme:

Using an accessibility-ready theme is probably the simplest and easiest way to make your WordPress site accessible to all users. Head over to official WordPress theme directory and you’ll be able to find over 120 free themes tagged accessibility-ready there, including Twenty-Fourteen created by Automattic itself. These themes not only fulfill the usual theme review guidelines but also meet accessibility standards defined by WCAG 2.0. In case you’re not in the mood to change your current theme, you can hire a WordPress developer to make it accessibility-ready.