WCAG, W3C, WAI, WTF?
What is Web Accessibility and who defines it? Heres a good starting definition:
Building your website in a manner that properly allows more groups of people to use it effectively
That sounds pretty straight forward. So why isn't every website you come across fantastically accessible? Or loaded with accessibility rich design & feature considerations?
Well it’s complicated… No that’s part of the answer - it’s seriously complicated.
Breaking it down
A cursory search of “how to make my website more accessible” would bring you to any number of blog posts or web pages. Around 75% of them would point toward or reference, the massive “Web Content Accessibility Guidelines” or WCAG.
The WCAG is about as easy to understand as a legal document written in a foreign language.
Now this WCAG document is a big fancy grading rubric - yes, like the ones from high school. It can be used to score websites with unique grading criteria.
The ratings are A, AA or even AAA (no relationship to the beef grading system).
Then depending on how many “A’s” your site gets, it could be then granted a medal: of bronze, silver or gold. So simple right? 🙄
As a beginner don't touch this document with a 10 ft. pole. Well, at least until you have learned some of the basics from a more easy-to-understand source. Which is what we will attempt to do here - make understanding accessibility, more accessible (very meta).
What makes up Web Accessibility
In order to make a website easier to use for a group of people you first have to roughly define what that group of people is. This generally gets broken down via the type of disability, here is the list of some from the WCAG website:
- auditory
- cognitive
- neurological
- physical
- speech
- visual
How to make your site more a11y friendly*
Note: a11y is a term used online and in the programming industry to “to make digital accessibility easier.” If you want to read more about this check out this post from The A11y Project
Let's take a look at some examples
Don’t try to do everything at once, start somewhere, that is to say: Which type of accessibility would your site benefit from the most?
Problem: That house looks amazing - Improving for Visual Disabilities
Is you website primarily video based? Like say a videography service for open houses and realtors?
Great, since your website is primarily a visual based one, then you know the visual accessibility of your website is important, and might be a good place to start.
Visually-abled people will be able to tell the home they are thinking about buying.
They can see the home looks amazing from a video walkthrough, but people with a visual disability?
They might not be able to tell much - if anything about the house from the video, depending on the severity of their disability.
Solution: Description of Visual Information or ‘Described Video’
From WCAG’s website:
Description provides content to people who are blind and others who cannot see the video adequately. It describes visual information needed to understand the content, including text displayed in the video.
Adding a simple alternative video description that explains some of the core features of the house, having audio narration like: “a smooth asphalt driveway on a slight incline, up to the door stoop with 2 steps up to the entrance” help out a lot.
These additions would be a valuable thing to know for an elderly person whose vision is deteriorating, or anyone with a visual disability.
Problem: Flashy Website - Yay or Nay?
Is your website quite literally “Flashy” i.e. does it have a bunch of pop out sections? Moving image carousels? Animated Hero images? Grandiose CSS Transitions?
This might seems like a good idea, and probably is in some cases (ask your marketing department, they’ll tell you 🙄 ), but what if someone with a neurological disability happens upon your site?
Solution: Be more ‘Zen’
You can ‘calm down’ your website in a few ways:
Reduce the amount of “flashing” elements on the page
Reduce the frequency with which elements flash, update, transition, or animate
Problem: Speed Kills
Well for driving that's true. As for a website, it might just kill the ability of your user to effectively navigate through your pages, menus, links, and the worst culprit of all: the multi-layered-dropdown-menu dun dun dunnnnn
Say the first menu has 3 items:
- Apparel
- Accessories
- Shoes
But upon hover each of those items has 20 sub-items, and you need to get your cursor from the “Shoes” item to the “Fall Fashion Favourites” fast enough or the menu will think you left, and it will auto-close.
Someone with a cognitive or physical disability may not be able to read the content, or navigate to it in time, before the almighty :hover CSS rule times out.
Solution: Slow it Down, waaaaay down
Consider that :hover selector is not the most a11y friendly way of doing things.
You could instead opt to have a “clickable” menu, where, when you click “Shoes” and a new section listing the type of shoes appears. This helps to meet the WCAG guidelines (1.4.13: Content on Hover or Focus) about hoverable content.
By opting to make a user click, as opposed to hover, you are helping to meet the criteria of the item being “dismissible” and “persistent”. This can give people who need more time to read the room to do so. Or it can allow people with a physical disability the time to navigate to the desired item without having to worry about the menu vanishing.
Conclusion
This was a very small intro to some web accessibility principles, it purposefully didn’t cover some 'basics' likes alt="add your description here".
That information can is readily available about everywhere one looks for a11y related content.
Instead the aim was to introduce what web accessibility means beyond just ES-Lint errors about alt tags.
This article is about what it means to think from a different perspective, and help make the web a more inclusive place for all.
A note from the Author:
The author does not claim to be a smart man, if anything said here was absurd, incorrect, or hard to read, feel free to leave a comment claiming as such; I will diligently try to correct it.
If anyone has links, resources, or other advice about being more a11y friendly please drop it in a comment below!
Photo by Andrea Piacquadio: https://www.pexels.com/photo/young-annoyed-female-freelancer-using-laptop-at-home-3808008/
Top comments (0)