I’m a big fan of the podcast 99% Invisible, and have even blogged about how an earlier episode of theirs related to web design. I’ve got another one to share now!
Episode #308, “Curb Cuts”, looked at the “curb cut effect”, in which an accessibility accommodation proves useful to just about anyone.
Curb cuts are the sloped and paved sections of sidewalk that go down to the street:
Appropriately, this image of a curb cut from Wikipedia is named “pram_ramp.jpg”!While they came into existence to help people in wheelchairs or other physical impairments safely enter and exit the street, they make the sidewalk safer and easier to use for people with strollers, carts, bicycles, and more. (I was excited to learn that Kalamazoo in my home state of Michigan had some of the earliest curb cuts in the 1940s.)
I’ve really come to think of accessibility as one part of the usability spectrum, and the curb cut effect shows why. Accessibility accommodations on websites are critical for certain people to allow for any level of access, but they often make the websites easier to use for everyone.
You should listen to the entire episode as it paints a much fuller and human picture of the people who fought hard for curb cuts and shares other interesting examples and historical anecdotes. (Guerilla sidewalk ramp building!) It’s just a great podcast in general.
Although it’s mentioned briefly at the end of the podcast, I want to share at least some of the many examples of the curb cut effect in web design. Remember, these are accessibility techniques that are required for some people to access your website but will help almost everyone.
Examples of the Curb Cut Effect in Web Design
Video & Audio Captions
What it is: A written transcript of audio or video content, including closed or open captioning
Who gains access: Anyone who can’t hear the video for any reason (deaf, broken audio, too noisy)
Who else benefits: Showing text may increase comprehension and gives all viewers more options for how to consume information
Headings
What it is: A technical way to outline a page (More information about headings)
Who gains access: Screen reader uses can navigate pages much faster and more accurately
Who else benefits: The visual appearance of headings breaks information up into easier-to-read sections. Search engines use headings to better understand website information.
Alternative Text
What it is: A text description of an image (More information about alt text)
Who gains access: Anyone who can’t see the image (including people with low vision or viewing broken images)
Who else benefits: Search engines use alt text to understand images better. Alt text for images in emails often show up in snippet previews or before a user has approved loading of images.
Color Contrast
What it is: A minimum difference between the color of text and it’s background (More information about color contrast)
Who gains access: Anyone with impaired vision or certain types of colorblindness
Who else benefits: Low-contrast text is harder to read. Glare on screens or bad monitors also make low-contrast text nearly impossible to read.
What else?
There are lots of other examples, but these are some of the best! If you know of others, share them in the comments!
Accessibility Isn’t Just for “Those People”
The curb cut effect really shows that when you care about accessibility, you make your site better for everyone.
I frequently get asked questions like “so how many people on my site really need this?” or “what percentage of people on my site actually are disabled?” Not only do these questions belittle the value of people, but they miss the big picture.
Accessible sites are easier for everyone to use and they tend to be more technically sound too!