If you’re a frequent visitor then you know I write about what I’m working on and lately it’s been all about web accessibility and WCAG compliance. So maybe you have a client and they want or need to be WCAG compliant to satisfy their legal department, bragging rights, or just because it’s the right thing to do. Well, this is how you do it. Some sites are easier than others but whether you’re developing single page apps, hybrid apps, or plain old static sites it’s not as hard as you might think. Here is how to make your site accessible and WCAG compliant regardless of its complexity.
What is WCAG?
WCAG is a W3 “standard” that’s really a living document and changes as the HTML spec changes. It defines different success criteria for things like links, images, form elements, and other common HTML elements with suggestions of techniques for how to make your code compliant. Is WCAG certification possible? I’ll answer that at the end of the article.
Use common sense
The first thing you need to do is use your common sense and best judgement to know which areas of your site are most vulnerable to bad accessibility and difficulty for those with visual impairments. If you don’t know what to look for here are some common areas to look at, the low hanging fruit:
- Images should have alt text
- Non standard form submission elements (links that make XHR requests) should be appropriately labeled using ARIA roles
- Navigation lists should be easily tabbed through. Your main navigation should have skip links visible only to screen readers that bring you to the main content area when clicked
- The markup you write should be ordered in an obvious way. Your layout may move elements around but if you disable CSS and the information on your page is out of order then you’re doing it wrong
Tips for React users
Some things like
tabindex are camel cased when using React. When using React look up these element attributes to ensure that there isn’t a different syntax for use with React. React fully supports WCAG, it’s just that JSX sometimes requires minor changes to it before it gets transpiled to vanilla JS and rendered as HTML.
Use a linter
There are plenty of linters out there. Some will run in your terminal like your app tests. Others run in the browser. Still others are browser extensions. Wave is one extension that will catch a lot of accessibility errors and warnings. NPM has a wide variety of linters if you just search.
Think about the context
Linters, browser extensions, and other tools will give you conflicting and sometimes contradictory results. It’s up to you to decide when an error or warning is really worth acting on or whether it’s something that can’t or isn’t worth fixing. You know your site best so be sure to interpret any warnings in the context of the your site. Your goal is to have as few warnings as possible but you cannot be 100% compliant unless your site is very simple.
How to be WCAG certified
You can’t be. There’s no such thing as a WCAG certification. Your goal is to make the site as accessible as possible but it’s rare to get zero warnings or errors. You’ll always be ignoring some errors for practical reasons and other times you’ll find that linters aren’t able to truly replicate what a screen reader sees so you’ll need to do one more thing to be sure.
Learn to use a screen reader
Actually, you’ll need to learn two screen readers at a minimum.
All Macs come with VoiceOver, a great screen reader built right into the Mac and activated by pressing Command and F5 to turn it on or off. Using VoiceOver you can tab and use the arrow buttons to move around the screen and have each element read to you. It takes a bit to get used to so I recommend going through the tutorial first.
On Windows most people with disabilities use JAWS with Internet Explorer. Luckily, JAWS offers an unlimited free trial with the caveat that you can only use it for 40 minutes at a time. The controls are similar to VoiceOver but you may need to look up the docs to get a real feel for it. If you’re on a Mac visit modern.ie and run their free virtual machines in VirtualBox, another free VM runner.
You can’t be totally compliant. If you have a requirement to be WCAG compliant then you basically have to make a good faith effort and that qualifies as compliant. Besides that you can only fix what the client asks for. If you’re lucky you’ll have access to professionals who will audit the site for you and tell you which areas of your site aren’t compliant after you think you’ve covered everything and after that you can decide based on your circumstances which suggestions are reasonable and which you just can’t accommodate.
So unfortunately the short answer is that you cannot be conformant. There is no official certification. Follow these tips and you’ll get about as close as you can. Just don’t be lazy and blow off things you may find annoying. There’s a sizeable portion of the web being surfed by the visually impaired and you don’t want to exclude them from your site especially if you’re selling something. Good luck.