How Accessible Is Your Website? Here’s How You Can Find Out

Published:

By: Drew McManus

Did you know that a routine boilerplate included in many grant agreements stipulates the receiving organization agrees that their website complies to accessibility standards? Granted, I have yet to see a funder yank a grant for failing to comply, but that doesn’t mean you should bury your head in the sand. Fortunately, we’re going to look at a couple of free tools you can use to help you meet and exceed recommended accessibility standards.

What Are Web Accessibility Standards?

If you aren’t already familiar with web accessibility standards, drop by the Web Content Accessibility Guidelines (WCAG) 2.0 site. Although not overwhelming, there is a good bit of material there, some of which you’ll need to speak with your developer about. At the same time, there are some critical elements that are very easy for anyone to check, such as color contrast is distinguishable for visually impaired site visitors.

[box]Handy Resource: you can find a thorough WCAG 2.0 compliance checklist at https://webaim.org/standards/wcag/checklist [/box]

Simple Color Contrast Checker

Webaim.org’s color contest checker is as straightforward as it gets. You plug in two colors via their six-digit hex code value and they’ll show you if the contrast between the two passes WCAG2.0 standards.

Webaim.org’s color contest checker

  1. Enter the hex codes for foreground and background colors.
  2. Confirm if the contrast is enough at regular and large font sizes to pass.
  3. If any item triggers a “fail” select the “lighten” or “darken” options for either option until the fail is cleared. The system will automatically generate the new hex codes if you need to copy.

Wave Accessibility Evaluation Tool (WAVE)

If you need to dive in deeper, WAVE is a tool you can use to check an entire webpage for the WCAG 2.0 compliance. Just punch in the URL and it does the rest! You’ll see a number of icons marking items of note along with a left sidebar that provides a results overview. Selecting any icon will produce a popup with additional information.

Wave Accessibility Evaluation Tool

Wave Accessibility Evaluation Tool

  1. Summary tab
  2. Details tab
  3. Documentation tab
  4. Outline tab

For most users, the first two tabs will produce the most actionable info.

You’ll also notice that you can view the page with native styles, styles filtered out, or with a color contrast checker activated that works much like the one from Webaim.org.

The site provides a wealth of interconnected reference material, for instance:

Wave Accessibility Evaluation Tool

  1. If one of your elements triggers a low contrast alert…
  2. selecting the “more information” link will open…
  3. the “Documentation” sidebar tab which in turn…
  4. often includes a corresponding link to the compliance checklist referenced above.

Simply put, “I didn’t know” will never be an excuse!

Drew McManus
Author
Drew McManus
In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower. With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists. For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.
Author Archive

Leave a Comment