Quick experiment. Open your website, move the mouse out of reach, and try to check out with the Tab key only.
Did you get stuck? A lot of people do, and a lot of owners never find out, since they always use a mouse and everything seems fine to them. That gap is what web accessibility is about. Below, I’ll cover what the term means, what US law says, and a handful of fixes that won’t eat your whole weekend.
What is web accessibility?
In other words, it’s ensuring that users with disabilities are able to access your website. That includes visual impairments, auditory impairments, shaky hands, dyslexia, ADD/ADHD, epilepsy and memory problems.
Think of three visitors. A blind woman hears your page through a screen reader. A man with a tremor can’t point a mouse, so he jumps between links with his keyboard. A teenager with poor eyesight enlarges everything to triple size. When your page falls apart for any of them, don’t blame the visitor. Blame the page.
Most of this isn’t hard to build, honestly. It’s regular HTML used the right way: buttons made with button tags and headings made with heading tags. Software that helps people can only work with what your code actually says.Also, disability isn’t always permanent. A broken wrist does it. So does a sunny sidewalk, or a baby asleep on your shoulder with the sound muted.
Why web accessibility matters, even if you only care about sales
Picture a shopper who can’t finish checkout. Does she call you? Nope. She closes the tab and buys somewhere else, and nothing in your reports tells you why. I’d say that quiet loss is the biggest cost here. And apart from money, it’s plain unkind to make someone fight a form.
Plenty of other people get a lift too. It aids captioning in a noisy environment. Good heading tags work when reading through the content. Headings are good for search engines as well as link text and alt text, so both web accessibility and SEO require the same thing.
Fixes you can make this weekend
Alt text should be done first because it takes only minutes. Alt text is a brief description of an image. This brief description of the image is announced by the screen reader.Explain the purpose of the picture on the page. Use a more descriptive term instead of “Cake image lemon cake bakery best cake.
If an image is only there to look nice, leave the alt text blank so it’s passed over.Now try your site with a keyboard. Tab goes forward. Shift+Tab goes back. Enter clicks.All links and buttons must be easily reachable, and all must clearly display when selected. That outline?.
Lots of stylish websites overlook contrast.Light gray on white looks nice and reads poorly. According to WCAG Level AA, text must have a contrast ratio of 4.5 to 1 or more; there are many free online tools that can show you how yours ranks right now. Don’t use color alone either. A red field with no explanation leaves some people guessing, since red and green can look the same to them. Write out the problem.
Forms would be another area for me to focus more on. Everything needs to be labeled, as the placeholder disappears as soon as the user starts typing into the field. Headings should be logical. Link text needs to make sense – “see pricing” is better than “click here”. Videos should have captions and controls. Last, tap through the site on your phone. Hitting the wrong link by accident means they’re too close together.
I’ve collected more of these on Premium Tech Blog, along with further reading on web accessibility.
The rulebook: WCAG
The Web Content Accessibility Guidelines, or WCAG, come from the World Wide Web Consortium (W3C). You can browse the WCAG overview, though it’s long, and I suspect most people give up partway. The one thing to remember is POUR: perceivable, operable, understandable, and robust.
Turn that into questions. Can people take in what’s on the page? Can they use it? Does it make sense? Will it still work after the next browser update?
WCAG has three levels: A, AA, and AAA. Most organizations go for AA. W3C says plainly that AAA can’t be met for every kind of content, so I’d leave it alone and make AA your target for web accessibility.
Web accessibility and US law
In the US, the main law is the Americans with Disabilities Act (ADA). The Department of Justice says it covers businesses open to the public and state and local governments, websites included. It also says you can pick how to comply and calls WCAG a helpful guide. The ADA guidance on ADA.gov reads more easily than you’d expect.
I’m not a lawyer, and this area keeps moving.If there is a fear that your company may be facing legal action, make sure to purchase a consultation from a lawyer on ADA website compliance. No matter what the choice is made, it is always cheaper to prepare for web accessibility than it is to correct issues afterward.
Checking your work
Run a free web accessibility checker first. Within a minute it flags missing alt text, weak contrast, and fields with no labels. WAVE from WebAIM is a well-known one.
Still, a tool has limits. It can’t judge whether your alt text is any good, and it’ll let “image” slide. So spend ten minutes testing by hand. Start Narrator on Windows, VoiceOver on Apple products. Zoom at 200 percent. Use only Tab. Repeat the process after each major update due to plug-ins that may create problems in an unannounced fashion. Document your observations, the user(s) affected, and the time required for the correction. You now have a list of tasks.
Where to start
Open your homepage. Run the checker. Press Tab and see where you land. Fix the three worst problems, then go through your five busiest pages. Leave yourself a reminder for a few months from now, because sites drift when no one’s watching.You can find more on web accessibility and other site basics at Premium Tech Blog.
FAQ
What does being web accessible mean?
Web accessibility involves designing the site for easy use by individuals with disabilities as well as by all others.
What does WCAG stand for?
Web Content Accessibility Guidelines (WCAG) is a short form of the phrase. It is the primary international standard which covers four principles: perceivable, operable, understandable and robust.
Does the Americans with Disabilities Act (ADA) apply to my website?
The Justice Department says it is if it is open to the public. An attorney will be able to explain how that applies to you.
What do you need to do to make your site accessible?
Start using an online tool, such as WAVE. Then, conduct a manual inspection of the site with only keyboard and screen reading software and zooming the page.