Introduction to ADA compliance for WordPress
It takes a lot of thought and effort to develop a professional WordPress site, we know since that’s what we help agencies do. You need to think about the many interacting parts. The copy, the imagery, the functionality, and how to make the overall design pull all of that together and make it catchy for the typical user. But what about users who are not so typical? Have you heard about ADA compliance for WordPress?
It’s a hot topic for website owners and the WordPress community alike. At WordCamp US 2019 in St. Louis, multiple sessions were dedicated to discussing ADA compliance for WordPress websites and web accessibility in general.
The Americans with Disabilities Act (ADA) and the Web Accessibility Initiative (WAI) both aim to protect people who will be viewing your web content by setting standards to ensure internet resources are easy to use for all.
All clear so far, but now it gets a bit trickier.
ADA has been part of US law for quite some time and was instituted in 1990. It came as an aftermath of the Civil Rights Act of 1964 in an effort to protect people with limited ability against discrimination. Since then, multiple revisions and changes were made to the original act. However, when it comes to web resources we are still in somewhat murky waters.
“When it comes to web resources we are still in somewhat murky waters.”
Internet resources fall under ADA Title III, which states: “Title III prohibits discrimination on the basis of disability in the activities of places of public accommodations”. But when it comes to websites, in particular, it’s still somewhat unclear.
There is lots of room for interpretation in the law, with some courts deciding that a website is part of public accommodation, and others tying it to a physical location (like the Winn-Dixie case). Other courts simply do not protect web surfers at all.
Despite the ambiguity in the way ADA can be interpreted, it’s best to be in the know. Even more so, because it is a strict liability law there are no excuses for not complying with it. Now, let’s figure out who could be at risk of violating the ADA.
Who does ADA Title III apply to?
In general, the aim of ADA is to make the Web a place where everybody can browse and enjoy. It can sometimes be a challenge. Think of it this way. If your website was a building, it would need to offer equal entry to everyone. You’d need to invest in wheelchair ramps or handrails to accommodate for everyone. That is exactly why you need to make your websites ADA compliant too.
“The aim of ADA is to make the Web a place where everybody can browse and enjoy.”
A very recent case (January 3rd, 2019) sees Beyonce’s own website being sued for violating the ADA (sources: The Guardian, Law.com). A blind fan claimed that the website’s “exclusively visual interface” presented “numerous barriers which limited her accessibility to the goods and services offered on the website.” We’re still on the edge of our seats to see how that one rules out, but there are a number of reasons why Mary Connor’s case holds ground. But Beyonce’s site isn’t the only site under investigation.
“A very recent case (January 3rd, 2019) sees Beyonce’s own website being sued for violating the ADA.”
The Seyfarth Shaw report of 2018 shows that Title III ADA cases have increased by 33% in 2018, going from 7,663 to 10,163 in just a year. ADA lawsuits, filed in federal and state courts, have targeted the websites of retailers (including Winn-Dixie Stores Inc. supermarkets), restaurants (including Domino’s Pizza Inc.) and universities (including Harvard and MIT). This is a huge increase and means that more and more business owners have to give even more thought to create their website.
Making websites ADA compliant can take hours and hours of work for developers, so it isn’t cheap for digital agencies to ensure the websites they build will always comply. If your website is large and has lots of images and video content, you will need to spend even more time to make it equally accessible to everyone.
So when you’re just starting a new website build it might be low on your priority list, but keep in mind that it’s probably more time consuming to fix afterward.
In most cases it appears that the court will force you to adjust your website if you lose, thus paying the development costs and then to also pay charges to the users who have had issues using your site. After that, count in the lawyer fees too and you’re looking at quite a significant sum to pay.
Let’s figure out the basics of what ADA is.
What is ADA compliance for WordPress sites?
Simply put, following ADA Title III means making sure that your website is equally accessible to all users. A WordPress site is, of course, judged like any other website, and the CMS has the functionality you need to make the site compliant. If parts of the site present significant challenges to people with disabilities and limit their access, you are in effect violating Title III of the Act.
Notable examples are: if you have a lot of audio material without transcripts, the dominance of visual cues without sufficient audio-support for people with limited vision, or lacking keyboard controls.
As we mentioned before, the law itself doesn’t seem to focus specifically on Internet resources, making them somewhat a byproduct of the wording. That could be part of the reason why there isn’t a set legal standard in place.
The most up to date set of guidelines (at the time of writing) to grade a website’s accessibility is WCAG (Web Content Accessibility Guidelines) 2.1. So simply put, if you conform to the WCAG 2.1 guidelines (practical), you comply with ADA requirements (theoretical).
So what are those practical WCAG guidelines exactly? Let’s take a look.
How to meet the WCAG 2.1 success criteria
The way WCAG 2.1 works is having a set of success criteria that are split into different levels called A (basic), AA (intermediate) and AAA (advanced).
Usually, it’s enough to go for the AA level of conformance. Some of the AA steps require more development insight and work, while others are simple steps you can take when adding content. To provide specifications to a developer to follow level A doesn’t require too much effort.
Commonly, the AA level is used as a point of reference for a site that is reasonably accessible to the general public. All in all, reaching AA level according to the WCAG 2.1 (but not the higher AAA level) means successfully applying 50 requirements listed as success criterion to your website. If you do manage to get all of those done, checked and complete, that means you’re probably in a way better shape than most websites.
Now, we’ll outline the basic principles and suggest the most basic steps you can take to make your website more accessible.
Perceivable
“Information and user interface components must be presentable to users in ways they can perceive.”
Taken from the WCAG 2.1 section including the criteria for this group, the excerpt itself sounds simple enough. You help visually impaired people navigate and “hear” the site if they use screen readers, and manage the visual aspects of the site to be adjusted on-demand. More detail in the WCAG 2.1 itself.
This particular principle includes some points on audio and contrast, as well as general rules for images. These points are more related to how you handle your media files and content internally than to development. Here’s one great tip to keep in mind though.
One step to dramatically increase accessibility is to add alternative text tags to all of the images on the site. If your site has a ton of pages, make sure to add alternative text to at least the homepage, as well as your 5-10 most visited pages. That will help improve your score quite a bit and make the user experience smoother.
“One step to dramatically increase accessibility is to add alternative text tags to all of the images on the site.“
Operable
“User interface components and navigation must be operable.”
So… if they work in the Opera browser it should be good enough?
Excuse my lame pun. Basically the principle above means that your user base needs to be able to use the keyboard to navigate around the site. For example, level AAA for this principle means there are literally no exceptions to this rule and every single part of the site is easily usable with only a keyboard and default keys.
Understandable
“Make text content readable and understandable.”
This doesn’t mean using Simple English for every page on the site, although I’m sure some readers would appreciate information being easier to understand.
The Understandable criteria include making your website accessible for screen readers and making sure that text is easily readable with assistance tools.
The first and most basic step is setting the language of every page to a default value, like American English, or whatever language your site mainly uses. That’s level A, and at level AA you need to make sure the language in each part of a page can be determined as well. All other requirements in this category are only for AAA levels and refer to things such as explaining abbreviations and not using jargon.
Predictable
“Make Web pages appear and operate in predictable ways.”
Make sure that it is easy to navigate and use your site. When a user is carefully working on filling out a contact form, your website shouldn’t do things like automatically submit form results when selecting a different field, or changing focus to a radio button. It is only acceptable if you have some prior warning.
More advanced steps include helping the user in case of errors and helping prevent basic errors automatically, whenever possible. Ever had a typo in your search request in Google? Notice how the search engine helps you correct the typo automatically and gives you the results on the fly.
Robust
“Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”
This guideline is related more to development and making sure your code is clean and organized in an efficient way.
Elements should have start and end tags, and every element on a page should have Names, Roles and unique IDs set. This is important to ensure accessibility APIs are able to read the page properly.
Those are the main principles of WCAG 2.1. You can find more details on the official website. Don’t forget to use the additional links that show how to follow those standards, there are some great examples there.
Tools to check your WordPress site for ADA compliance
Now we know some basic information and actions to take to improve web accessibility on your site. But how can you feel sure that you’ve succeeded with setting up your site to be accessible?
Luckily, there are tools and plugins you can use to run a quick machine check on your WCAG 2.1 compliance. They are actually quite sophisticated and will probably find more than a few errors right away.
Google Lighthouse web accessibility test
Google Lighthouse is a tool readily available to any Google Chrome users among their Developer Tools. To start checking for accessibility issues, simply right click on a website and open up Inspect. Once there, go to Audits.
You’ll see there are many different tests you can run there, but today we are looking for accessibility only. Make sure that is the only audit you are running right now.
After running the test itself, you’ll have to wait for a bit before you see the end result. There are some suggestions on areas of improvement and a nice overall rating from 1 to 100, based on your result. We scored 73/100, not too bad but room for improvement.
WAVE web accessibility evaluation tool
WAVE is a great tool that you can use both as an extension to Chrome or by simply pasting the link to WAVE itself.
It will show you the errors on the site inline on the site, indicating the exact places and elements that have possible issues. You can then read more about the alerts you get and also find some info on how to fix them.
WP ADA Compliance Plugin
There are other tools that can further help you test for accessibility issues with WordPress specifically in mind. WP ADA Compliance Plugin allows you to install a plugin on your WordPress site, run a scan of all pages and see how you’re doing. Empty anchor tags, missing form labels, incorrect heading order, etc. are all evaluated and you can see how many errors you have on your site.
The plugin gives you a handy to-do list filled with links to the affected pages, the types of error and even links to the code that is producing the issue. I find it most convenient to click the link to review the code since it shows you exactly which element that the issue is referring to.
Here’s a full list of the types of accessibility issues that the plugin helps you identify, as shown in their documentation:
- Skip nav links
- Multiple ways failure
- Empty anchor tag
- Iframe missing title
- Img missing alt
- Img empty alt
- New window tag
- Redundant anchor text
- List incorrect markup
- Background image
- Incorrect heading order
- Color contrast failure
- Redundant title tag
- Ambiguous anchor tag
- Missing headings
- Img missing alt media
- Missing form label
- Animated image
- Duplicate title
Big thanks to Alumni Online Services for allowing us to test their web accessibility plugin, we now have some work cut out for us to improve the accessibility of our own website.
Conclusion
With a quick intro to ADA compliance for WordPress, you are in a great place to make sure your website is living up to the requirements for accessibility. Most of the work falls on the web designer for ensuring enough contrast between text and background, the developer for making the code clean and correct, and the person editing content and ensuring images have alt tags.
For most websites, it’s enough to learn these aspects of usability and apply them smartly across the site. The AA level for WCAG success criteria has 50 requirements that you go through and make sure your team is aware of. Then you run a tool to ensure that you didn’t miss anything. Some errors will probably still remain, but the overall result should be good.
If you have a site that is very important for the public to access, such as governmental, banking or other high-interest categories you should probably get an expert team to help you do it right. That way, your visitors are guaranteed fair treatment in the delivery of information.
Disclaimer: The information in this article is meant to help readers navigate the landscape of web accessibility compliance, and is not intended to represent the complete legal requirements that may be applicable to websites. Please refer to other documentation and consult with experts to ensure that your work complies with the regulations mentioned in this article.
