WordPress Accessibility: Making Your Website Usable by Everyone

The internet is deeply integrated into the way our world works, employed in nearly all sectors: from education and politics to business and healthcare.

When browsing online, it’s likely that the first thing you’ll notice about a website is its design, quickly followed by graphics and content elements. What you probably don’t think about is WordPress accessibility.

When it comes to your business website, accessibility must become a higher priority.

So, What Is WordPress Accessibility?

WordPress accessibility refers to the practice of making your WordPress website and its contents accessible to all users, including those with disabilities—specifically those with visual impairments.

Many websites often sacrifice WordPress accessibility for a beautiful design. Though design is absolutely important, you don’t want to compromise too much function.

As a brand, you want to provide a positive user experience to all users, including those with disabilities. Also, it’s important to remember that accessibility issues are not limited to only those with disabilities.

Web Accessibility Initiative points out that certain changes to your website’s design can benefit many different groups of people:

• People using devices with small screens, different input modes, etc.
• The elderly
• People with “temporary disabilities,” including a broken limb or lost glasses
• Users with “situational limitations,” such as those accessing a website in a bright location or in an environment where they cannot listen to audio
• People who have a slow internet connection

Why You Should Care About WordPress Accessibility

As lawmakers look to amend and evolve the Americans with Disabilities Act (ADA), it is important to get ahead of the curve to protect yourself and your company.

The ADA was passed in 1990 to protect the civil rights of those with disabilities from discrimination. It covers a wide range of topics, including transportation, telecommunication, employment, and even building codes, such as requiring modern buildings to have ramps for wheelchairs (or similar features).

Because the law was passed before the digital revolution really caught fire, lawmakers are seeking to amend the language used. They are specifically looking at the term “access barriers”, which was originally intended to mean physical barriers. The idea is to expand that meaning to now include information barriers, such as those that can exist online.

Recently, there has been a slew of cases against companies with websites that were deemed inaccessible.

Disney, Netflix, and Target have been served such lawsuits; Target was required to pay $6 million in damages. As of 2017, there have been 751 ADA and web accessibility cases filed since the Seyfarth Shaw law firm started tracking such cases in 2015. 423 of those cases came from the first eight months of 2017 alone. Most of the defendants have been retail companies.

Before you think you’re small enough to slip under the radar for those slinging lawsuits around over issues of WordPress accessibility, there are still many other reasons you’ll want to make changes to your website.

A survey by the Pew Research Center shows that people with disabilities are three times less likely to go online than their counterparts without disabilities. This poor showing online can likely be linked to the fact that 71% of people with disabilities leave a website if it isn’t accessible, which is a shame because people with disabilities represent $7 trillion in disposable income annually. That’s a huge market being turned away due to design issues.

Additionally, there are SEO benefits for being accessibility compliant. Google and other search engine providers reward accessibility-compliant websites in an effort to encourage more websites to increase their accessibility.

Making Your WordPress Website More Accessible

There are a wide range of accessibility ideas provide in Web Content Accessibility Guidelines 2.0 (WCAG). Using accessible WordPress themes can simplify the process.

However, if you’re only wanting to make limited changes to your current WordPress website, you can look at using the WordPress accessibility plugin, as well as changing colors, contrast, image ALT text, content headers, text alternatives, and more.

Install the WordPress Accessibility Plugin

The easiest first step you can take is installing and activating the WP Accessibility plugin. While most accessibility issues cannot be addressed without directly changing your theme, the plugin offers many useful features for getting on the right track with WordPress accessibility.

Among its features is the ability to enable skip links, which are internal page links that allow users to skip directly to the content. This is particularly helpful for people using screen readers. It also lets you add a toolbar that allows users with vision impairments to change the font size, contrast, and grayscale of your website.

Additionally, it removes title attributes from images inserted in content, which most screen readers fail to identify, often reading the anchor text instead.

Color Contrast

There are more than 2.7 million color blind people in the world. These people have one of three types of color blindness: total color blindness, two-color vision, and deficient color vision. To be sure that your website design works with or without color, be conscious of color ratios and contrast.

Use high-contrast color options, such as black and white, to make your site more readable. The WCAG 2.0 recommends a contrast ratio of 4.5:1 for body text. If your website still needs a little more flair, you can lean on the use of patterns or textures to further increase contrast.

Image ALT Text

Image ALT text describes the appearance and function of an image on a page.

It was originally designed to increase accessibility, as screen readers are unable to interpret a picture without ALT text. However, it has since been used as part of SEO strategies with targeted keywords to be identified and recognized by search engine crawlers.

If you’re in the habit of using ALT text as a way to stuff keywords into your site, you’ll want to stop, or at least amend your process, as it can ruin the experience for people using screen readers. Thankfully, clearly describing the image (assuming it’s relevant to what you do) should still end up containing useful keywords. In general, no ALT text is better than irrelevant ALT text.

Content Headers

A lot more people will skim your content than read it word for word. Content headers will not only let users skip to the parts they are most interested in, but the headers can also break large text blocks into more readable sections, helping screen readers determine the context of each section.

Text Alternatives

If you have a multimedia website that includes videos, as well as audio files, such as podcasts and audiobooks, it’s best to include subtitles or transcripts. This can help those who are deaf, as well as those who are in a public place and are unable to play the media files out loud, to enjoy the experience.

Explicit Form Fields

When creating forms for your website, it may be tempting to place the field labels inside the field for aesthetic purposes. However, some screen readers cannot access the text when it is inside the field. So, keep things simple and put the form labels outside form fields.

Keyboard Accessible Links and Menus

There are some people that cannot access websites using a mouse because of motor skill disabilities. They rely on their keyboard to navigate sites, using the tab key to move forward and shift+tab to go back.

The issue that most commonly arises for these users is that the top items on a drop-down menu are accessible but submenus are not. You can remedy this by assigning shortcuts or access key capabilities. For example, pressing “1” will take you to the homepage, “2” to the about page, and so on.

Test for WordPress Accessibility

If you’re unsure of the quality of your WordPress accessibility, you can test it.

Though Web Accessibility Initiative does not endorse any specific tool, you can find a list of accessibility tools on their website. Give a couple of them a try and see how your site stacks up. The Google Chrome extension, Web Accessibility Evaluation Tool (WAVE) is another way to assess your website’s accessibility.

Examples of Websites Doing Accessibility Well

There are plenty of websites that have been designed with care and an awareness of accessibility. The website for the Pyeongchang 2018 Winter Olympics is an example of such a website with only two errors and 264 correctly labeled elements. Apple does a hair better, garnering only a single WAVE error.

Final Thoughts: WordPress Accessibility: Making Your Website Usable by Everyone

The internet is deeply ingrained in nearly every part of our lives, from shopping and socializing, to setting up appointments with healthcare professionals and work. Unhampered by disabilities, it is easy for the vast majority of users to take for granted the ease with which they are able to navigate the internet.

However, not only to get ahead of possible changes in the law but also to simply ensure a better user experience for all of your potential visitors, it’s important to design or modify your website with accessibility in mind. In addition to opening your doors to these people, you also will reap the rewards of better SEO by following the accessibility guidelines provided by Web Content Accessibility.

How are you incorporating accessibility into your WordPress designs? Let us know in the comments!