Meeting WCAG accessibility standards in software design

When you set out to build a new web product, the importance of meeting WCAG accessibility standards from the start can’t be understated. Not only does it ensure your product is available to a wider range of users, it can also help you to build a cleaner and easier to understand interface right off the bat.

Technology is an undeniably important component of everyday life, so it’s essential to make sure that everyone has access to the technology you’re building and providing. The Web Content Accessibility Guidelines (WCAG) are a set of standards that, when properly met, ensure software applications and websites are accessible to people with a variety of disabilities. 

While the laws surrounding web accessibility are a little murky, there has been a slate of lawsuits against companies in recent years, citing Title III of the ADA, which says that “places of public accommodation” must provide “equal access” to goods and services. And the internet is, after all, one of the most public utilities we have access to.

Analyzing accessibility needs for your users

When you’re in the beginning phases of designing your software, it’s important to consider who will be using it, and what their needs may be. Can it be easily accessed by someone who needs to use a screen reader to assist with a visual impairment? Do your videos have automatic captions so they can be shown to someone with a hearing impairment? Aside from catering to specific needs, is your site or product easy to understand for the majority of people who will be using it? Needlessly complex designs and features should be limited in order to make your product as accessible as possible for any and everyone.   

Incorporating accessibility requirements into the design process

Once you have identified the types of users and their accessibility needs, you can incorporate them into the design process from the outset, limiting the need for changes down the road. Think about features like parallax scrolling, for example. Yes, it looks cool when different elements are appearing on the page at different rates, based on scrolling habits, but did you know that for people with vestibular disorders, which affect a person’s balance, that can send them into a dizzy spell? Your disclaimers may not feel important enough to print in a large font, but what if that particular disclaimer is important for someone with low visibility to be able to read? Incorporating good accessibility measures into your original designs will ensure that you are providing an equal (and equally engaging) experience for everyone, regardless of ability, device, or platform.

Implementing accessibility features throughout development

Designing your site or product to be accessible isn’t enough; you need to ensure your development team is also doing what they can to get those designs right, and keep the accessibility rolling across the board. This means ensuring the right elements and styling are being used, as well as designing a component library that leaves no room for error when future features are added or updated. 

It’s easy enough to nest everything into a <div>, style the div, and call it good. But for someone using a screen reader, how do they know that this div is actually a headline, and that one is a button if they’re all just a bunch of styled divs?

<p class="movie-header">Want to see how it works?</p>
<div class="movie-button">Watch video</div>

.movie-header {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 1em;
.movie-button {
  height: 2.5em;
  width: 5em;
  background-color: #cr137d3;
}

<h1>Want to see how it works?</h1>
<button>Watch video</button>

Similarly, using correct headings isn’t just good practice for SEO, it also helps to assign importance to the information on a page for someone who isn’t able to see the height difference between words. 

Testing for WCAG compliance

So what does compliance look like, anyway? According to the WCAG, there are three levels: A, AA, and AAA. Generally speaking, we’re all aiming for AA compliance. The single A is the bare minimum you should have in place, while AAA is so stringent that it’s close to impossible to ensure every part of your product or site meets those requirements. Like Goldilocks and the three bears, WCAG AA compliance is just right. 

The two ways to conduct a compliance test are manual and automated. In the manual instance, you compare the elements and pages of your site against a checklist created by the WCAG. For an automated test, you can load your URL into one of many testing programs to find out what level of accessibility you meet, where you can improve, and what changes can be made to increase your WCAG compliance. 

Understanding the importance of planning for accessibility

With some lawsuits over web accessibility reaching into the hundreds of thousands of dollars, it’s important to ensure your product meets accessibility standards. And when you incorporate them from the outset, you can show that it has always been your intent to make your product available and usable by the widest possible web of users. This not only saves you from costly lawsuits, but saves on design and development costs by not having to circle back as a reaction.