In our latest Lunch & Learn at Liquid, I talked about the concept of Inclusive Web Design, and why designing for accessibility really means designing a better experience for everyone.
- Inclusive Design means more than just accessibility.
- Physical impairments are categorized as visual, hearing, motor, or cognitive.
- Physical impairments are not necessarily permanent — someone could be recovering from surgery or they may have recently experienced a concussion, for instance.
- Inclusive Design also means being cognizant of users’ technical limitations — their network and their device.
- Inclusive Design is more effective and cost-efficient when phased in naturally rather than completed as a one-off checklist.
- It’s generally a good idea to deliver your message with as little added bulk or noise as possible.
- You can perform your own baseline accessibility tests on your own, easily and for free.
Here are some highlights of the talk:
Inclusive Design: More than just accessibility
0:16: The theme of the talk: “Accessibility is not about designing for the few. It is about designing for us all.” — Paul Boag
1:08: Everyone’s talking about accessibility, but let’s take it a step further and talk about inclusive web design—design practices that make everyone’s life better.
1:48: Why am I talking about inclusive design? It’s my job as a UX Designer to make the experience better and more comfortable for everyone.
2:35: There are a lot of assumptions and myths around accessibility, like the idea that it’s an edge case that only affects a small subset of people.
2:54: Anyone who can’t use your website comfortably (for any reason!) is a lead you’ve lost.
3:14: People have high expectations. The industry is getting better and customers expect things to be usable.
3:36: You can’t know everything about the end user. Google Analytics gives us a lot of information about visitors, but can’t detect if someone’s tired or recovering from surgery.
4:06: Nearly 1 in 5 people in the US has a disability, according to the U.S. Census.
4:21: This is the theme: Everyone benefits.
4:25: A real-world example: Ramps! (Remember the one from the Lehigh Valley Mall?) They’re designed to help people who can’t use stairs, but they have benefits beyond that — strollers and luggage, for instance. Same goes for modern doorways and door handles, LED signage, and curb cuts in sidewalks. These all have one thing in common: they improve life for everyone.
6:00: According to Google (the company, not the search engine!), physical impairments fall into four main categories: Visual, Hearing, Motor, and Cognitive.
6:14: This is usually what comes to mind first when we talk about physical impairments. 8.1 million people in the United States have difficulty seeing—2 million of those can’t see at all. Visual impairment also includes low-vision users and colorblindness.
7:04: We can help people with visual impairments (specifically low-vision users) by minding color contrast and font size.
7:28: This helps everyone! Have you ever tried to use your phone outside? Sunlight and glare make the screen hard to read. You’ll appreciate apps and websites that use improved readability through better color contrast and font size.
8:41: Designing with color contrast and font size in mind helps aging eyes. I share some figures from Adam Morse’s brilliant article, The Veil of Ignorance:
At 20 years old, your retina receives 100% of the light that hits the eye.
At 40 years old, only 50% of the available light enters the retina.
For an 80 year old, 25% of the available light passes through the retina.
9:22: Have you ever had to zoom in to fully read text on a web page? Lots of attendees agreed that some websites have used such small font sizes or poor color contrast choices that zooming in became a necessity. Far fewer people indicated they needed to zoom out because text was too readable — it just doesn’t happen!
10:32: PDFs, images, and videos don’t have the same level of accessibility as web pages tend to have.
10:54: Everyone benefits from using web pages. It’s easier to recall information that’s housed on web pages. Search engines can more easily crawl web pages than other types of content. It’s easier to maintain web-based content than it is to manipulate images and PDFs.
11:39: Another benefit everyone enjoys by using web pages: avoiding the dreaded PDF applications!
12:04: Showing buttons and notifications in context helps people with visual impairments. For example, place error messages where they’re more visually relevant, rather than at the top of the form. Of course, this helps everyone.
13:16: 7.6 million Americans have some level of difficulty hearing.
13:30: Accompany text with video content — this means adding captions and transcripts as text alternatives to videos.
13:55: Adding text alternatives to videos helps everyone. How about noisy offices? Private spaces? Forgot your headphones? Looking to resume your place and pick up where you left off? Don’t forget search engines!
14:56: Use simplicity in text and structure of your page—use a logical, linear layout. Make it easy to get to the point! Think about how you can simplify the layout of your page and be more predictable.
15:50: Ask users for their preferred communication type in contact forms. Not everybody can use a phone comfortably.
16:20: Asking users for their preferred contact method also benefits everyone! Isn’t it annoying to get a phone call when you’re not expecting it?! I’m going to choose receiving an email over a phone call every time. This is a great way to reduce friction and give users what they want. People value their time, and might not want to be interrupted.
16:48: 9.4 million Americans have difficulty with at least one task that’s part of daily living. (Using websites and mobile apps are part of daily life!)
17:11: Use large, clickable buttons and well-spaced elements. The intended action should always be very obvious. If it’s tough for someone to use the mouse, it’s naturally easier to select something that has a larger click target (this helps mobile and touchscreen users, too).
17:37: This also indicates what’s important. People scanning websites are looking for the clear action that resonates with them.
18:12: Not everyone can comfortably use a mouse—this could be permanent or temporary—so it’s a good idea to design for keyboard-only usage. Let people navigate using the tab and arrow keys.
18:42: Being conscious of keyboard-only usage helps everyone, particularly when you’re tabbing through forms. It’s never fun to have to alternate between the keyboard and mouse, or select fields individually.
19:09: Remove friction by providing shortcuts. Remember, not everyone can comfortably navigate around—and not everybody has the time or desire to do so.
19:28: Cards Against Humanity’s checkout page is a great example of using a shortcut to help end users. When you’re entering your address, you only need to enter your postal code—they figure out the city and state and save you a few seconds.
20:10: Be reasonable when it comes to the number of fields you’re asking users to complete in contact forms. Do you really need to know three phone numbers, a job title, and a fax number in your first contact with the end user?
20:45: Cognitive impairments can include dyslexia, the autism spectrum, and users with depression and anxiety.
21:09: Use plain, simple, predictable language. Get to the point! Think about the added benefit of clarity for people who aren’t native speakers of your language, or even people who are new to the field.
22:15: Cut down on jargon! Let’s try a writing exercise. Let’s say we have this mouthful on a web page:
“Through the synergistic onboarding process, we are creating open dialogue to escalate the audience into true brand enthusiasts. At a high level, the best practice is to leverage a scalable platform with our audience, thinking out of the box to establish concepts, being proactive to set benchmarks. At the end of the day, we’ll circle back and give 110% to create a robust solution to engage our audience. The 30,000-foot view is that we want to drill down, streamline, and move the needle to create a win-win game changer for all constituents and stakeholders.”
22:55: It says nothing! It creates confusion. I’d say it hurts more than it helps. Let’s rewrite it in plain, simple language:
“We take our Lunch & Learn sessions and customize them for your business with our Lunch & Learn To Go program.”
Much more concise and to the point — everybody understands.
23:17: Use descriptive buttons. How does the button hold up without context? Is button text like “learn more” sufficient in explaining what happens when you press a buttton? (Usually not.)
24:15: Being descriptive in labeling buttons is helpful for everyone. People look through and pick out what’s relevant to them when they’re consuming web pages.
24:35: Use images and diagrams to support — but not replace — text. Infographics are great supplements to web content (remember, as long as they’ve got an all-text alternative).
25:35: Avoid stock photos and purely decorative items, however. They dilute from your message and don’t add value.
25:53: Images and diagrams can help people who are in a hurry and need a quick takeaway. Similarly, think about when you’re tired and don’t feel like reading text — a video might be a good supplement.
26:14: Microsoft’s Inclusive Design principles are terrific:
1. Recognize exclusion
Exclusion means solving problems using our own biases.
2. Learn from diversity
We get insight from when people have different perspectives.
3. Solve for one, extend to many
All the examples we just walked through are evidence of this.
27:30: This is when it starts to click! Inclusive design can help everyone.
27:50: In the same way we don’t know everything about the end user’s physical conditions, the same applies to the users’ environment and devices.
28:10: Network speed is an obvious example of a technical limitation. Slow WiFi, 3G (or worse), and data caps affect everybody.
29:00: Devices are also a technical limitation. Not everybody has the latest phone with the highest resolution screen and fastest processing speeds. We must be cognizant and considerate of what’s reality for many people. Responsive Web Design helps with this.
29:38: How do we design for technical limitations? Get rid of bulk. The less page weight, the better. The less time it takes to download something and get content in front of someone, the better. People aren’t typically patient!
Inclusive Design Tactics
30:13: Inclusive Design is the next layer of Responsive Web Design. Where Responsive Web Design takes screens and devices into consideration, Inclusive Design takes people into greater consideration.
30:30: It’s more cost-effective to build with inclusivity and accessibility in mind, compared to retrofitting for it. That means subscribing to an inclusive mindset and putting the “accessibility checklists” aside.
30:50: Amy Hayes on the cost and importance of accessibility:
Estimates suggest that companies can expect to pay about 10 percent of their total website costs on retrofitting for accessibility compliance, compared to a relatively minimal 1–3 percent spent if accessibility features are phased in throughout natural websites updates.
31:40: Good design is how it works, not how it looks. A good product has to work reliably for everybody before it can look good.
32:00: When thinking of color contrast, aim for a WCAG 2.0 value of 4.5:1 or higher (AAA). Use Colorable to find and test accessible color combinations — it’s a great tool created by Brent Jackson, one of my favorite web designers.
33:40: Typography is another tactic for inclusive design. Here are a few quick tips:
- Increase the text size — 16px CSS minimum for body copy is a good rule of thumb.
- Use a CSS line-height (leading) value of around 1.5. It’s easier to maintain your place.
- Use left-aligned text instead of center-aligned text. It’s not easy for everybody to read text that doesn’t have a predictable pattern for positioning words.
- Avoid using all caps. Novice designers like to use all caps because it’s more predictable — but in reality, our eyes look for shapes and patterns to determine words. A better alternative to headings in capital letters is to use a larger font size or heavier weight.
- Break up blocks of text into more digestible pieces. Remember, people scan web pages and pull out information that’s important to them.
- Be willing to pass on web fonts.
36:07: Web fonts are another thing for users to download — people just want your content!
36:40: More and more people are including web fonts on their websites, which slows overall download time, particularly on low-speed connections.
37:13: Avoiding web fonts can help us avoid the Flash of Invisible Text (FOIT).
37:33: Minding site speed is helpful for technical limitations. Users value their time.
37:54: Have you ever immediately left a Google search result page that didn’t give you exactly what you asked for? (I know I have!) For example, my dog ate chocolate — not OK. Naturally, I went to Google for the answer (I probably should have called a vet), and was reminded of some of the frustrations of looking for answers.
38:40: Misleading content is a big frustration.
38:50: Slow load time. If someone’s in a hurry, they’re out.
39:14: Interstitial ads that say you can continue to the site if you sit through an ad. No, thanks! Thankfully Google’s doing something about these sites and penalizing them for forcing users to sit through ads before they reach the content Google promised.
39:35: Pay walls — finally finding what you needed, then being hit with a credit card form to get what you were expecting.
39:56: Walls of text — if somebody’s in a hurry, they’re going to find a result that has the content that’s easiest for them to consume. People value time.
40:16: Email signup forms — the annoying pop-ups that appear when you’re trying to read something. How can I know if I want more content like this if I can’t read the content because of your email popup?! (And how about when they guilt you into closing the window?!)
41:02: Multi-page slideshows — loading 16 pages instead of one. People value their time and want content, not more ad impressions.
41:23: In-margin ads — taking up every pixel on the screen and adding as much noise as possible. More junk and clutter that nobody needs. I have to spend my precious data downloading these!
42:00: App downloads — we’ll give you what you want, but you have to download the app.
42:15: People will leave your site if you don’t give them what they want in a way that they can easily consume.
“When information is cheap, attention becomes expensive.”
42:40: Sometimes, the answer is a commodity — people just want the answer or content. If you reduce friction and stop excluding people, you naturally gain attention.
43:00: The average page weight has grown to around 3 MB — that’s crazy! Are we forgetting why we have web pages in the first place?
43:53: What can we cut out to trim page weight and site speed?
44:05: Third-party sharing widgets and plugins add bulk. You can cut those (people don’t use them) or find less bulky alternatives.
44:56: Stock photos for decorative purposes add bulk. Thankfully, mobile design and responsive web design has cut down on things like this.
45:30: On-site comments can safely go away — this is a relic of the mid-2000s. The content itself is often toxic, and the plugins add weight to the page. Let the conversation happen on social media.
46:18: Think twice before using complex animations and carousels. (My distaste for carousels is well-documented!) These clutter web pages, make life difficult for people with motor disabilities, and do a poor job retaining attention — people simply don’t pay attention to them.
47:18: Be mindful of touch-friendliness — making labels clickable alongside checkboxes, for example. The bigger the click target, the better!
47:52: Make a rule: supplement — but not replace — text with videos and downloadables. This takes work, but it creates value for people who use your website.
48:27: I love the A11Y Project Pattern Library, which contains pre-made accessible code snippets for developers, like keyboard-friendly navigation, for instance.
48:54: There’s an SEO benefit to inclusive design. Faster site speed, better usability, and more indexable content are all pluses in Google’s eyes (and users’ eyes).
Tests You Can Do
49:35: Unplug your mouse. Can you still do everything with your keyboard alone?
49:55: Turn off images in your browser. Is your message delivered the way you intended? This will help reveal if you’re still using image-based text or poor alt attributes on images.
50:26: Disable CSS in your browser. Is your site still navigable? Is content still consumable?
51:01: Check your videos for transcripts or captions. Can someone consume the entirety of your video’s message without sound enabled? Most Facebook videos don’t use sound, though that’s a user behavior.
51:43: Are field labels in forms clickable? Create bigger tap targets on your forms. Try clicking the label itself (like “Name” or “Email Address”) and seeing if the intended field becomes active.
52:07: A finger is less accurate than a mouse. An adult finger pad is 10mm. Consider including extra padding on your links. This helps people with motor disabilities and people using touchscreen devices.
52:33: Check your link text for vagueness. Avoid “click here” and “learn more”. Is the link text descriptive? Is the link destination obvious? Can the link text stand on its own?
The Veil of Ignorance by Adam Morse
This is what sparked my interest in inclusive design. It’s a quick read, but I highly recommend reading and reflecting on it. Adam Morse is one of my favorite web designers.
Selfish Accessibility by Adrian Roselli
When you’re introducing accessibility and inclusive design to your organization, if you’re still facing the argument that it’s an edge case and that your customers don’t have physical disabilities, Adrian Roselli makes a good case that I echoed in this talk — everybody can benefit.
Thanks to everyone who attended the talk. I hope you learned something and gained value from attending. I believe (and hope) we’ll hear a lot more about inclusive design in the near future, which is a win for everybody.
Need a little more help getting started? Contact us to talk about performing an Inclusive Design Audit on your website or application to assess your current accessibility state and outline actionable recommendations to improve the experience to be more inclusive.
About Steve Luvender
Steve Luvender is a Senior User Experience Designer at Liquid Interactive, where he works with organizations to design and implement solutions that delight people and create business results.