All About WCAG Compliance & Accessibility Ready WordPress Themes

Accessibility ready WordPress themes follow WCAG (Section508) recommendations for creating websites for people with disabilities.

WCAG stands for Web Content Accessibility Guidelines. They are created by the World Wide Web Consortium (W3C). These guidelines ensure that people with disabilities can use the web. The current WCAG standards are version 2 and AA which refer to the level of accessibility reached.

Level A is the most basic standard, while Level AA is used as a reference for a legal standard in many countries worldwide. Level AAA is most commonly only addressed for special dedicated software.

That is required by law for many public institutions sites in more and more countries. Making site accessible is a quite complicated task.

Table of Contents

What Are Web Content Accessibility Guidelines?

It’s a collection of documents which helps to understand and build accessibility-ready website complying with WCAG standards.

The primary purpose is to provide user-friendly accessibility to websites for the largest number of users with disabilities such as the blind or visually impaired. Such people run the risk of “Digital Exclusion” (no or limited ability to use modern forms of communication).

For example, websites need to use the proper font contrast to make the possibility of reading the text without any difficulties by people with visually impaired weakness.

WACG document v. 2.0 includes and describes 4 different groups: Perception, Functionality, Intelligibility, and Reliability. It also handles 3 levels of availability: A criteria – must be fulfilled, AA criteria – should be complied, AAA criteria – can be met.

# PERCEPTION – presentation of the information and user interface accessible components

The following rules are the most important ones. You can find additional information at WCAG documentation.

Add alternative text for non-text elements, for example ALT for images
Attach subtitles to video/audio
Add the description for icons or other unique site items – e.g., the good example are required forms fields, such elements should be additionally marked with text for example above the field. The color distinction only is not enough
Watch the minimum contrast (should be applied for a page background and text color) ratio should be 4.5 : 1

# FUNCTIONALITY – the interaction should be allowed by user interface components and the navigation

Navigation the site with a keyboard should be possible. The user should have possibility to reach each site element with keyboard
Do not put flashy elements as they could cause epilepsy
The site should include the tool to allow direct access to the specific site areas
Visibility of selected item (it must be clear to the user, at any time, on which active element is he located)

# INTELLIGIBILITY – accuracy of content and service user interface

Correct focus elements usage can’t mislead the user
Don’t put many automatic redirects on the site and avoid sending automatic forms
It’s important to give the user the clear identification of errors by showing relevant error messages after submitting forms, etc.

# RELIABILITY – including assistive technologies provided content must be sufficiently reliable to be interpreted correctly by many different users

Using correct HTML and CSS code is the main point. Because of many hacks for various browsers, it’s quite difficult to meet this rule. The requirement needs to be applied to all devices.

Important points to follow if you want your site to score well for its accessibility:

Headings should be used to define a page’s sub-sections and not simply for visual appeal
You should only have one h1 tag per page
Links should be descriptive and should make sense out of context (use “Continue Reading [Title of Post]” instead of “Read More”)
Buttons and (drop down) menus should be selectable and highlight-able with a keyboard well as a mouse
Your page’s text color must be in high contrast when compared to the background color of the content area
Text should not refer to interactive elements such as links or buttons by color only
Your website should include skip links at the very top of each page to allow users direct navigation to content with only a keyboard
The title attribute for links should only be used if the corresponding text would not be redundant when they are viewed side by side
Forms must be sufficiently labeled outside the form field, and all confirmations and warnings should be easily recognizable
Images and icons should supplement text and content and should not stand alone without alt tags and very descriptive captions or titles
Media such as video, audio, sliders or carousels should not start or change action without user interaction by default
New browser windows or tabs should not be opened automatically, without user interaction

Here are useful tools for checking if your website follows accessible, ready rules:

Accessibility Ready WordPress Themes

PixelEmu is well known theme developer. I have also reviewed their Beauty Salon WordPress theme in past. They are well-known for accessibility ready WordPress themes so let’s look what do they offer.

1. PE Services

PE Services is a responsive multipurpose WordPress theme that follows latest WCAG recommendations for making an accessible website. This WP theme is an excellent choice for any business site because of its design, and it can be a powerful solution for services presentation or company introduction.

The multifunctional purpose of this services WordPress theme makes it an interesting alternative for those who seek a doctor WordPress theme, medical clinic WordPress theme, constructions and architecture WordPress theme or even a car mechanic WordPress theme. PE Services fits perfectly to each of listed categories.

2. PE School

PE School is a WordPress education theme. It is beautifully designed, responsive WordPress theme tailored for school or education websites. It suits well for colleges, schools, the universities, kindergartens, online courses, and similar categories.

Both themes listed above meet the requirements.

The crucial feature for people with disabilities is a possibility to navigate the site using the keyboard. They can navigate through the sections of the website without using a mouse.

Both PE School and PE Services come with the possibility of skipping to the particular site section using only a tab key. That will let the users explore the page quickly.

The important thing is also a visibility of selected item because the user will know which active element of the website is where located. There is also a font size switcher, which gives the 3 degrees of font size. With width switcher, you can adjust the width of the screen.

To ensure optimal readability of the text, themes come with high contrast modes ( Black/White Mode, Black/Yellow Mode, Yellow/Black Mode). There is also a night mode available. It lets the users avoid eyestrain. It can be useful especially when eyes are getting tired quickly.

Free Accessibility Ready WordPress Themes

In the WordPress theme repository, you can search for themes with the “accessibility-ready” tag. These themes have gone through much the same testing process as the bundled core themes.

For every theme with this tag, a member of the WordPress accessibility team has personally checked the theme for keyboard accessibility, color contrast, and a variety of other specific accessibility guidelines.

But using free themes from WordPress repository can’t guarantee that each theme will continue to meet accessibility-ready standards in future updates.

So that is why I recommend you go with PixelEmu accessibility ready WordPress themes where each update will follow guidelines and in a case of any problems you have full support.

Accessibility Ready WordPress Themes Summary

Accessibility is a key aspect of good web design as it benefits both disabled and robust users. Unfortunately, the rule that one size fits all not always concerns the websites. Inaccessible web design can prevent many people from a smooth online experience.

Building a disability-friendly website can be a lot simpler than you think. After getting familiar with all the facts which have been mentioned earlier in this post, many parts of your website can be improved.

Current web design trends encourage large fonts, high contrast modes, keyboard navigation, flexible and responsive layouts that adapt themselves to all different kinds of modern devices.

If you need to achieve the best possible accessibility, I recommend you to use one of mentioned professional WordPress themes because they offer more flexibility.

If an accessible WordPress website is important for your business, be sure to select the plugins that you use for your site carefully. And remember, there are developers available who are more than happy to help you take a plugin and make it accessible for your site.

Ensuring your WordPress site is accessible may seem like a lot of work, but the benefits are worth it. Not only will you make your content more available to those with disabilities, but you will be opening up your site to a larger audience.

I hope that this article has made you more aware of this issue and you will find it helpful in the future when you’ll be creating or redesigning your website!

DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.