Blog

How can I tell if my website is accessible: 3 quick ways

Date Posted: June 6, 2016

Previously, I wrote a piece called An introduction to web accessibility. If you’re new to accessibility, you should start there.

3 people with lanyards that say "All Access"

Accessibility is the great promise of the Internet. It’s also a way for organizations to ensure they’re reaching everyone, everywhere and all the time—because accessible websites aren’t just for a small group of people with special needs. Accessible websites are for your mom after she’s had cataract surgery and for your colleague who has a hard time telling her left from her right and for me when I want to watch a video on the bus without headphones.

Accessible websites are also required by law. The Accessibility for Ontarians with Disabilities Act (AODA) legislates that organizations of a certain type and size must ensure their websites comply with website accessibility standards, and this has a lot of companies, non-profits and public sector institutions wondering where to start.

How can you tell if your website is accessible? Here are three ways to help find the answer.

#1 Use an automated testing tool

There are a number of tools available that can help you quickly see if your site has any glaring accessibility errors—things like form fields having appropriate labels, your images having alt text and your document having proper structure. Here are three tools that are quite common:

However, it’s important to note that these testing tools can’t test everything related to accessibility. Items like colour contrast, the effectiveness of your keyboard navigation and how appropriate your alt text actually is are things that an automated tool just can’t pick up. So remember—no errors are great, but that’s only half of the battle.

A collection of images that test for colour blindness

#2 Check colour contrast

Colour is an important tool in design. It can help emphasize content, lead your eye to certain elements of a page and, perhaps most importantly, convey a variety of emotions to your users. But not everyone sees colour the same. What looks like it jumps out to one person may be almost hidden to another. As well, for those who have poor vision, ensuring that text really stands out from the background is critical.

Making sure that your site uses appropriate colour contrast in its design can help eliminate those barriers.

My go-to tool for checking contrast during the design phase is a rather clever single page website by Lea Verou. Simply add a background and text colour and you not only get the contrast ratio, but also whether it meets the relevant criteria according to the Web Content Accessibility Guidelines 2.0 standards, which Ontario’s legislation uses.

Smashing Magazine just published an in-depth article on improving UX for colour blind users recently—if you’re interested in taking a deeper dive, this is a thorough discussion of how colour impacts usability.

#3 Navigate your site without a mouse

Not everyone interacts with computers in the same way. While a majority of users use a mouse and keyboard, there’s a growing group of users who use other methods of navigating websites. But even able-bodied users can change up how they navigate sites. Often when I’m using a laptop and filling out forms, I leave the mouse behind and simply tab through form fields and submit the form with the “enter” key.

Have you ever tried using a website without a mouse? It can be a frustrating experience. Often it’s not clear which link you have selected. Sometimes you get stuck in a form that you can’t exit. Other times, you have to continuously tab through 80 navigation items before you can actually get to the content that you want. Dropdown navigation may or may not work.

Take five minutes, go to your website and simply use your keyboard to navigate throughout your site. Use the tab key to navigate from item to item and use the enter key to “click” on the element that’s selected. Sounds pretty straightforward—but it often isn’t.

Even more testing – use the guidelines

Using the official WCAG 2.0 document will give you a more thorough glimpse at your site from an accessibility perspective, but I find that the document can be rather dry and overwhelming. When referring to the guidelines myself, I always head over to Webaim’s accessibility checklist, which is a little easier to read and also gives some recommendations on what is included in each item.

Being more inclusive with your website can only benefit your organization. By making some changes, which can often be small and easy to implement, you’re opening up your target to a larger audience and demonstrating that you care. The first step in getting there is to be aware of some of the limitations that your site currently has. As the saying goes, “knowing is half the battle.”

About the author

Adam Wills

Adam Wills

PRODUCT DEVELOPMENT / #CODEWRANGLER

Connect with Adam: adam@humancode.ca