Before we dive into the best practices of website accessibility, let’s talk about why the subject is worth your time.

You might be skeptically wondering: is this yet another buzzword, trend, or money sink? The reality is that web accessibility is an important part of your site’s basic functionality, something that’s become mandatory for businesses of any size. Let’s look at two of the main reasons why.

It’s Good for Business

Every business owner knows the importance of customer service, but think about this: what level of service can you provide when your customer can’t even get through the door? When you don’t have an accessible website, you risk alienating part of your customer base.

Search engines also take your site’s digital accessibility into consideration. Every business wants to rank higher on Google, and the art of search engine optimization (SEO) can seem cryptic. Luckily there’s a big overlap between improving your on-site SEO and making your accessible. I’ll elaborate more on this later.

And remember this: when you have an accessible website, it doesn’t just benefit a few. It improves the user experience for all your customers.

It’s the Law!

You’ve probably heard of the ADA (the Americans with Disabilities Act), a federal law that prohibits small business owners, enterprise companies, and local governments from discriminating against individuals with disabilities. This ensures equal access to the web for everyone whether they have cognitive disabilities, physical impairments, or another concern. The Department of Justice’s website for the ADA states:

The ADA guarantees that people with disabilities have the same opportunities as everyone else to enjoy employment opportunities, purchase goods and services, and participate in state and local government programs.

When you think about what disability access looks like in the real world, wheelchair ramps or braille on ATMs might come to mind. The Department of Justice is very clear that the ADA doesn’t just apply to brick-and-mortar businesses:

The Department has consistently taken the position that the ADA’s requirements apply to all the goods, services, privileges, or activities offered by public accommodations, including those offered on the web.

Title III is the section of the ADA that specifically addresses the requirements for businesses, and the Department of Justice has already several pursued legal action against major companies for their websites violating the ADA, including Rite Aid and H&R Block.

I’m not a lawyer, but personally, I’m not going to take any chances with ADA compliance!

What Does Website Accessibility Look Like?

Now that we’ve established that web accessibility is a big deal, I’m sure that you’re ready to dive into the details of how to bring your company’s website up to speed. But let’s stop for a moment and ask, “What are the accessibility barriers that someone with a disability might have in using a website?” It can be easy to take for granted how a person might interact with your website. For example, consider the following website features:

• A banner image with details on a new promotion, including pricing and dates.

• A password input form gives a green message when successful, and a red one-on error.

• Your brand colors are white and light blue, so decide to design your website with light blue colored text on a white background.

• An embedded video showing off your latest products.

These seem like perfectly normal, run-of-the-mill website features, right? Keep these examples in mind as we now look at the barriers that disabled individuals face on the web.

The Fundamentals of Accessibility

The ADA gives a few examples on its website of common pitfalls that many websites fall into:

• No alternative text for images.

• Using only color to convey information.

• Poorly contrasting colors.

• Videos that lack captions.

• A lack of keyboard navigation.

These are some of the big accessibility problems I see all the time, and if your company website can master all five it really will stand out.

Alternative text (commonly just called alt text) refers to the text that is associated with an image that replaces that image if it fails to load correctly or is read by a screen reader when encountering the image. Because images are already the biggest bottleneck in a site’s loading speed, make sure that vital information isn’t relegated to images. Instead of having text baked into images, it can easily be overlayed on top, making it easier for screen readers while also appearing immediately for all users, even if the image may load later on slower mobile networks.

One of the most common vision-related disabilities is color blindness, with red/green color blindness being the most common. This doesn’t mean that your website can’t use color communicatively at all. For example, green and red can still represent success and failure, but instead of just using colored text, consider a green checkmark and a red cross mark, thus conveying meaning both through color and imagery. Just don’t forget to include alt text as well!

Poor color contrast can make your site unusable for customers with low vision or visual impairments. This is a trap I’ve seen many businesses fall into, especially if their brand colors are lighter shades of blue or pink, which are particularly difficult to read on a white background. Even as someone without visual impairments, sometimes I have trouble making out the text on such sites. So, how can you make your site accessible without abandoning your branding? Let’s look at a real-life example: the University of North Carolina’s website.

Instead of poorly contrasting blue text on a white background, the site’s designers have used a blue background with white or black text. The rest of the page’s content simply uses black text on a white background.  I’ll let you in another little secret: this isn’t Carolina blue. The trademark light blue has been replaced by a slightly darker blue to meet accessibility guidelines, and I bet few visitors are bothered by the switch. If you’re still worried about branding, consider this: could you pick out the exact shade of Microsoft or IBM blue from a color palette lineup?

The last point I’d like to touch on is that of keyboard navigation. For someone used to navigating the web with a mouse or touch screen, it might come as a surprise to learn that some users must depend entirely on a keyboard to interact with their browser. You can try it out yourself by using TAB to cycle through elements on a site, SHIFT+TAB to move backward, and ENTER to interact with a link or button. If you notice that important interactive components are being skipped, your web developer will need to make these specifically keyboard targetable.

Let’s Hear from the Experts

Beyond the basic tips that you can find from the Department of Justice, the Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), are an incredibly comprehensive set of best practices that cover every imaginable facet of web accessibility. If you aren’t familiar with the W3C, they’re an international organization responsible for creating and maintaining the standards of the web, including fundamental building blocks like CSS and HTML. Want to really dig into every possible accessibility concern? I strongly encourage a look at the full WCAG. This includes an even greater variety of accessibility concerns like seizure-inducing lights and the reading level and use of jargon in your site’s content.