Summary
Accessibility guidelines are the minimum requirement. They don't ensure a good user experience. It's like a chocolate chip cookie recipe. Five people can follow the same recipe and get five different outcomes. Some will be better than others. To ensure a great user experience that's accessible, involve people with disabilities.
Are you a fan of the Great British Baking Show? There’s an accessibility lesson we can learn from the show. In every episode, the bakers get the same recipe. It’s not a complete recipe. Nonetheless, they’re all making the same thing. Almost every single time, the results are different.
Go to any recipe website. Do a search for a favorite treat. These websites usually have main images associated with the recipe. Users who try the recipe share their own images. Browse those images. The results are not identical.
How One Recipe Has Many Outcomes
I’ve baked my share of desserts. Some of them, I’ve baked many times. Even though I used the same recipe, I occasionally will have a batch that turned out differently than previous batches.
It could be because I used a different brand of product. Yes, the ingredient brand matters even if it’s sugar. Sugar is sugar, right? My experience has been that using a different brand of sugar, butter, or any of the basics can change the outcome. Luckily, I learned this at a young age from my mom.
It could be the weather. Sometimes humidity and extreme temperatures can affect the results.
It could be I forgot a step that is not in the recipe. A good example is toasting nuts. Many recipes with nuts say nothing about toasting them. Yet, toasting those nuts makes a huge difference in the taste. That’s something I learned from other people’s advice and experience.
Where am I going with this? A recipe provides the minimum to get the results. Experienced bakers picked up things along the way that helped them level up the recipe.
Hence, accessibility guidelines like Web Content Accessibility Guidelines (WCAG) and checklists are like recipes. They help with minimum compliance but don’t guarantee a good user experience. You still need the recipe to make sure you don’t skip a step.
Accessibility Lesson: Restaurant
I don’t remember where I heard this true story. It’s a powerful example of how something can comply with the Americans with Disabilities Act (ADA) and be a terrible user experience. Imagine four friends going to dinner at a restaurant. Can you picture the friends in your head? Watch them work their way to the front door of the restaurant.
Now, add steps in front of the restaurant. One of those friends cannot use the steps. Why do you think that’s happening? Most people won’t picture one of their friends being in a wheelchair.
The restaurant is in compliance with the ADA. They have a ramp. Rather than a ramp to the front door, their ramp goes to the back door. This is where employees enter the restaurant.
If you were that one friend who had to go around the back, how do you think it will make you feel? Imagine rolling into the backdoor and the employees notice you rolling through the employee-only area into the seating area of the restaurant. That’s not a good feeling. It can make a person feel isolated and singled out.
Legally, the restaurant met the minimum requirement and they’re in compliance. But do you think the patron will ever want to return after that experience? The restaurant is likely to lose more than one customer. As a show of solidarity, the patron’s friends will never return to the restaurant.
Accessibility affects more than those with disabilities. It affects their friends and family. It affects people experiencing temporary or situational impairment. Before my mom fell, she didn’t use a wheelchair to get around. Now, she has to use one while she heals from her injuries. She would not be able to go through the restaurant’s front door either.
Accessibility Lesson: Color Contrast Requirements
Checking the color contrast ratio of the content is an easy thing to do in creating great user experiences that are accessible. The color contrast ratio looks at the contrast between the text and its background.
The color contrast ratio measures the contrast difference between two overlapping or adjacent colors. It could be colors in an image or logo. It could be the color of a webpage’s background and its text.
Contrast ratios range from 1:1 to 21:1. WCAG 2.1 AA accessibility guidelines recommend 4.5:1 for text and images of text. The exception is for large-scale text, which can have a contrast ratio of 3:1. Large-scale is defined as having at least 18 points or 14-point bold or font size. If you want to go above and beyond these, then aim for at least 7:1.
Are those ratios confusing? You’re not alone. I’m not good with ratios and other math-ish things. Fortunately, there are many color contrast checkers out there to make it easy to check. Select two colors and the color checker provides an instant pass / fail report card like the following image.
The image tests the black and gold pair, which are the colors of Purdue University. Boiler up, y’all! It has a contrast ratio of 8.1:1.
Color Contrast Activity
I posted the following image with 14 color pairs. The correct answers are upside down. I made the text size as big as I could without making it too easy to see the answers. Cover the lower left corner to avoid spoilers. I’ve also put the answers in the next section.
WCAG 2.1 AA requires small text to have a color contrast ratio of 4.5:1 and a large text ratio of 3:1.
The font size in this image is big enough to be considered large text. Can you figure out which passes or fails the color contrast test for WCAG 2.1 AA regular text and large text?
To avoid spoilers, don’t continue reading until you’ve finished this activity.
To be fair, it is tricky to determine how effective the color pairings are in this image. You have colors side-by-side that may throw off how they look. So, here are a few stand-alone examples.
The darker lime green background and white text fail on every count.
The darker red background and black text pass everything. Would you say this is a good user experience? Red as a background is harsh for a lot of folks.
Many websites use white as a background and grey for the text. It’s not a good user experience because it’s like reading in a fog. This fails everything except WCAG AA for large text.
The black background and grey text surprised a lot of people. They thought it failed. Many said they couldn’t read this. The only thing it failed was WCAG AAA (highest level of compliance) for regular text.
This shows how color combinations that pass the minimum requirement aren’t always a great user experience.
Color Contrast Answers
Here are the answers to the color contrast activity. Any surprises? The biggest surprise for a lot of people was No. 1. They couldn’t believe the black with grey passed both ratios. It’s an excellent lesson on how the minimum does not guarantee a great user experience.
Passes both: 1, 4, 6, 7, 9, 11, 12, 14
Passes large, fails regular: 5, 8
Fails both: 2, 3, 10, 13
Accessibility Lesson: Captioning Requirements
WCAG covers captions for recorded audio and video. Here’s what W3C Web Accessibility Initiative (WAI)’s WCAG 2.1 success criterion 1.2.2 states:
“Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.”
Notice the success criterion simply indicates captions are provided. It says nothing about accuracy, synchronization, speaker identification, or anything else that is in captioning best practices.
Yet, W3C WAI has a guide on captions and subtitles. In reference to automatic captions, the guide says: ” Automatically-generated captions do not meet user needs or accessibility requirements unless they are confirmed to be fully accurate. Usually, they need significant editing.”
There is nothing in the success criterion about caption accuracy. Adding captions or providing a media alternative for text in audio and videos is the bare minimum. Quality matters in captions. They can make or break the viewing experience.
Yes, Stranger Things captions were impressive. However, the captioners got carried away in Season 4, which affected the viewing experience for some of us. There were way too many captions for sounds, some of them weren’t needed. It took away from the action on the screen. I felt like I was watching captions the whole time.
Accessibility Lesson: Cookie Contest
Someone following a recipe may do the bare minimum. They use cheaper generic products and expired or old products. (For example, older spices lose their potency.) They may pull out the baked item exactly when the recipe says to do it. But it could be under- or overcooked. Ovens can affect baking time.
When I bake cookies, I’ll have at least two rounds of baking. The cookie sheet can only hold so many cookies. The timing is not always the same for all rounds of baking. One may be done in 11 minutes, another in 10, and the last in nine minutes. This happens despite using the same oven for all of them.
How’s this for the ultimate lesson on how one recipe can have different outcomes? I entered the same recipe in a cookie contest two years in a row. That’s because my oven was malfunctioning the first time I made them for the contest. All my baking knowledge couldn’t save the cookies. Not long after that, I got a new oven. I submitted the recipe again and the Oaxaca Fudge Bars won!
Here’s an example of what happens when you get feedback on cookies. My grandmother loved to make poppyseed cookies. Grandma’s cookies didn’t turn out exactly the same every single time. Some batches resulted in a darker light brown cookie. Other batches were pale-colored. Then, some cookies were thin and others thick.
My sister preferred them pale and thick. I preferred thin and darker. Grandma listened and made both kinds. We were both happy. I entered those cookies into a cookie contest. They were neither pale nor dark, thick nor thin. They were in between.
This is what it means to include people with different disabilities throughout the product development life cycle. Of course, you can’t begin to cover every possibility in terms of preferences and feedback. But you can get enough to cover the bulk of the target populations.
Go Beyond Accessibility Compliance: Hire Disabled Folks
Recipes and accessibility guidelines provide the minimum. They don’t guarantee delicious cookies and great user experiences. If you want your product or service to be accessible and provide great user experiences, then involve people with disabilities throughout the development process.
A powerful way to design great user experiences that are accessible is to create a committee or a brain trust consisting of disabled people. Companies regularly ask them for feedback from beginning to end and beyond. Companies pay them for their time.
Better yet, hire people with disabilities and give them the tools to thrive. This levels up from “Nothing about us without us” to “Nothing without us.” This means disabled folks are already working in their organization.
There’s one caveat. For those who work for the company, being a member of this committee should not be on top of their responsibilities. Either reduce their responsibilities to add the committee or pay them separately for the committee work.
You may have heard this phrase. “Diversity is being invited to the party. Inclusion is being invited to the dance floor.” I disagree.
Diversity is being invited to the party. This is where the company hires the employee.
Inclusion is being on the party planning committee. The company happily provides employees with the tools they require to thrive in their roles. It lets them bring their full selves to the table. They encourage them to lead and have a say.
Accessibility and Disability Awareness Speaker
A great way to make progress in your accessibility journey is to provide company-wide training or to bring in a speaker. I can do a series of presentations and training sessions. Contact me or get to know me.
Featured image by Bing Image Creator.