How to Check a Website for Accessibility

In the introductory post to this Web Accessibility series we talked about what accessibility is and why it matters.

Armed with some basic information, I’d like to dive into what actually makes a website accessible and what some tools are that you can use to check the accessibility of your website. At the end of this post there’s a handy checklist you can use to check your site.

You ready to do this? Let’s go!

First, a bit of history.

I know, I know. This section may be a snoozer, but I’ll sum up.

Accessibility isn’t just a willy nilly thing – there’s actually an official standard: Web Content Accessibility Guidelines (WCAG). The original version of WCAG (1.0) was established in 1999. Presently the 3.0 guidelines are under development, but for now the generally accepted legal standard is WCAG 2.0.

In addition to WGAC 2.0, WordPress has its own set of criteria used to deem a theme “accessibility ready” (those are the requirements that must be met to have your theme in the .org repository with the tag accessibility-ready).

Both sets of requirements are pretty similar, so, for our purposes, I’ll lump them together when discussing what falls under the umbrella of accessibility.

What Makes a Website Accessible?

Web accessibility is a big pot of soup, with layers of flavor and texture. There are some base ingredients that need to be present to be Web Accessibility Soup, but other ingredients are a little open to the interpretation of the chef and can be added incrementally.

I’m eating lunch as I write this – can you tell?

First, we’ll talk theory, then we’ll talk actual implementation.

The 4 Principles of Accessibility

1. Perceivable – Make web content available for the senses: sight, sound, or touch (until Smell-o-vision and digital bonbons are widely available, we’ll have to stick to these three senses). The most practical way to achieve this is to provide text alternatives for any non-text content.
2. Operable – Make interface elements operable (forms, control, navigation). The biggies here are making keyboard navigation available and giving users time to read or click through content (i.e. imagine a slider that rotates images faster than a user can process or click).
3. Understandable – Make sure content and user interface are understandable. Now this is User Interface 101, accessibility or not. If somebody’s having to guess about where to click, then the design is a failure. Stick to layouts and interfaces that are predictable – if you get too clever with a design, people won’t intuit how to use it. Designers, don’t hate on this one. Accessible does not have to equal boring or ugly.
4. Robust – Content can be used reliably by a variety of user agents, including assistive technologies The bottom line here? Always strive to conform with current web coding standards.

These principles may seem a little daunting — maybe you’re thinking I don’t like the way Web Accessibility Soup smells! But hang with me, and let’s look at some practical ways to address these principles.

Quick Accessibility Checklist

Here are some quick habits you can start with immediately that will move your website toward better accessibility. This list is far from comprehensive, but think of it as a practical starting point. I’ll address the principles above along with the action points you can take.

Here are 10 things you can do to make your website more accessible. Click To Tweet

Make Content Perceivable

1. Remove titles from your links (this adds clutter for screen readers since the title is typically the same as the anchored text)
2. Add meaningful “alt” text to images ( “img1249438743” – not meaningful; “smiling kid holding a red balloon” – meaningful)
3. Make sure all your form elements are labeled (tip: you can hide this with CSS – just needs to be visible in the HTML output)
4. Use good color contrast for text foreground/background (here’s a color contrast checker – shoot for Level AA)

Make the Interface Operable

5. Make page navigation/links possible using only the keyboard (try starting with your cursor in the URL bar and then tabbing your way through – see if your tabs flow in order if you jump around the page)
6. Prevent seizures! No page content flashes more than 3 times per second (really everyone should do this without even trying, unless you’re designing websites circa 1999)
7. Make the purpose of each link obvious from the link text alone

Make it Understandable

8. Clearly identify form errors (via text) and offer an easy way for users to fix and resubmit (if you’re using something like Ninja Forms or Gravity Forms, you’ll most likely be okay by default on this one)
9. If you’ve got the same navigation links across multiple pages, don’t go switching up the order (that’s disorienting to anyone)

Make it Robust!

10. Make sure your code doesn’t throw any significant validation errors (use the W3C validator)

How Can You Check the Accessibility of Your Site?

If you want a full overview of the current status of a live site, run it through the Web Accessibility Evaluation tool. It’ll highlight the good things you’re doing along with the bad to give you a better idea of where you can focus your accessibility efforts.

Accessibility doesn't have to be all or nothing. Start with small steps in the right direction. Click To Tweet

Okay, so the above are some quick-hit things you can do to improve your site’s accessibility (or begin the process of making Web Accessibility Soup, if you will). There’s something important I want to note here: Even though getting a site to fully meet WCAG 2.0 or WordPress “accessibility-ready” standards takes a lot of work, accessibility doesn’t have to be all or nothing. In other words, taking steps toward better accessibility (even if your site’s not fully accessible) is better than not making any effort at all!

Thanks for joining me and please enjoy the next post in this series: Accessibility & the Law.