When I was a kid I traveled quite a bit with my family. In our hotel room, my sister would ask me to lower the volume on the TV so she could fall asleep. I wasn’t tired so I would enable the closed captions and read the screen. Over time, I built up a habit of watching TV with the captions on. Nowadays, I prefer it. I grasp more information and notice things that my ears don’t always pick up.
Subtitles not only increase comprehension for people with hearing disabilities; for some, they are an essential part of life. Accessibility is more than just augmenting experiences; for many, it’s about them getting to the table in the first place.
We all deserve equal access to information
In 1972, Julia Child’s “The French Chef” became the first televised program made accessible for the deaf or hard of hearing. Source: Screen capture and composite from “The French Chef” reruns via Amazon.com.In 1972, Julia Child’s cooking show, “The French Chef,” included captions for the first time in television history. The producers wanted to reach a broader audience, including deaf and hard-of-hearing viewers. Nowadays, the FCC requires closed captioning on 100 percent of new television programming and 75 percent of older programming. Closed captioning laws were just the beginning of a more inclusive future. Over time, the government enacted more laws for people with disabilities.
In 1990, United States lawmakers launched the Americans with Disabilities Act (ADA). They sought to prohibit discrimination and enable access for individuals in all areas of public life including jobs, school, transportation, public, and private places. This includes conditions that affect mobility, sight, hearing, speech, touch, and learning disorders.
There are more than 7.7 billion people on this earth, and not one of us is the same. We are all unique and have different needs. We deserve equal access to information. As designers who work in technology, we should make sure that everything we create is accessible and usable. Implementing accessible products and services not only avoids discrimination and lawsuits. It improves usability for all types of visitors. As a result, you will reach a bigger market, have more impact, make more money, and it’s great for SEO.
Fortunately, advancements in technology create opportunities for disabled people to stay engaged in the world and function in society. But how do we scale these experiences?
Scale accessible experiences with design systems
When we talk about scale, we think about systems, organizational patterns, and ways to optimize design. We want to make it easy for everyone who works in product to contribute. Most organizations use a single source of truth to organize components known as a design system.
Design systems are the secret sauce to scale and develop experiences with speed and consistency. They include reusable components and well-documented requirements for buttons, colors, typography, voice, and tone, and anything that your brand stands for.
A single source of truth keeps all brand and UI components in one location, so teams can stay in sync. A design system isn’t created in one shot. It’s a living document that gets updated as teams add features, products, and interface components. One thing is certain – accessibility should be baked into every design system.
Google has over 250 products and services. Everyone who works at Google references Material Design, their design system. Although Google went through extensive tests to meet accessibility standards, designers who use Material should still take the time to test for accessibility. We shouldn’t leave it up to defaults. We have to be proactive to make sure that our designs reach a broad audience of people, not just people who look and act like us. We do this by embedding accessibility into the foundation of our design practice.
We have to be proactive to make sure that our designs reach a broad audience of people, not just people who look and act like us.
Nathan Curtis, a design system advocate, makes a good point when he says that just because there is a single source of truth doesn’t mean that everything has been tested for universal access. It’s up to individuals to know the rules and test components to meet standards.
Image by undraw.co.Learn the basics of accessibility
All designers should learn the essentials of accessibility so they can make sure their products are usable by everyone. Matt May, head of inclusive design at Adobe, trains Adobe designers around the world to build and implement accessible experiences. He ensures that everyone at Adobe has a role for inclusive design. May leads full day training workshops on how assistive technologies work, informs designers about types of bias relating to, for example, geography, race, gender and economic status, and how it affects their ability to use Adobe products.
Adobe’s design system, “Spectrum” ensures consistency across all Adobe’s products.Furthermore, May scales his expertise on inclusive design through Spectrum, Adobe’s design system. For the past few years, he’s worked closely with the Spectrum team to make products easier to use across the board.
May defines rules to ensure people can navigate the site without a mouse, checks that components are labeled properly, and ensures there’s enough contrast. He collaborates with Andrew Kirkpatrick, head of accessibility at Adobe, who validates that all products support universal access on as much as the application as possible.
There are endless resources online to learn about accessibility and inclusive design. Here are a few that stand out.
Teach Access tutorials
Teach Access provides basic training on how to create accessible mobile and web apps.May recommends Teach Access’s tutorials for basic accessibility training. Whether you are new to accessibility or you just need a refresher, Teach Access provides best practices to write and design accessible software. Founded in 2015, Teach Access is a collaboration by tech companies including Adobe, Facebook, LinkedIn, and Microsoft, academic institutions, and accessibility advocates.
webAIM.org
Begin your accessibility training journey with webaim.org. Source WebAIM site screenshot.WebAIM is a non-profit organization dedicated to improving the lives of children and adults with disabilities. The site contains a series of software tools, guidelines, research, and training to create web content for people with visual, hearing, motor, and cognitive disabilities.
Accessibility for Web Design Lynda.com course
Check out “Accessibility for Web Design” on Lynda.com by Derek Featherstone. Image by Lynda.com.Derek Featherstone’s course on Lynda.com called, “Accessibility for Web Design,” is highly recommended by May. In it, Featherstone shares tips on common web interaction flows, accessible component design, and how to assure that people with disabilities can complete tasks.
W3C Web Content Accessibility Guidelines 2.1
Tantek Çelik, Web Standards Lead at Mozilla, recommends that all web creators review the W3C’s Web Content Accessibility Guidelines 2.1. Image by w3c.org.Tantek Çelik, web standards lead at Mozilla, recommends that all web designers, developers, writers, managers, or policy makers review the W3C’s Web Content Accessibility Guidelines 2.1 (WCAG 2.1). This lengthy document will teach you how to present content to people with diverse abilities, without losing information or structure.
The W3C’s WCAG 2.1 Guidelines inform how people should format and create content for the web. It includes documentation, guidelines, info on how to use components, and examples of tested use cases to promote best practices for inclusive design.
Build an accessible design system: Tips to scale and increase access for your product or service
Cat Noone, Founder of Stark, an accessibility plugin for prototyping software, believes that companies should start with inclusivity in mind. It’s never too late to make your products and services accessible. Before integrating components into your design system, make sure to test with the following in mind.
Unplug your mouse and navigate with a keyboard only
Most software contains keyboard shortcuts so users can interact with the application with hot keys and tabs. Unplug your mouse and tab through to make sure you can still navigate through the site.
Yvonne Tevis, from the University of California, recommends launching a screen reader, unplugging your mouse, and turning off the monitor. Then, spend time on the sites you like using only the keyboard with tab/shift tab, arrow keys, enter, and spacebar to get around.
Support assistive technologies and test with real people who use them
Assistive technologies help people who have trouble seeing, hearing, reading, writing, and those with physical disabilities consume the same content. In the digital world, assistive technologies include voice recognition software, screen readers, screen enlargement applications, and text-to-speech applications.
In order to create an equal user experience, seek out people who regularly use screen readers and assistive technologies. It’s not enough to learn how to use a screen reader on your own. Like all great design, it’s important to do research, create a prototype, and test with a person who would actually use your product.
“Learning how to use a screen reader does not make you a screen reader user,” said Adobe’s Matt May. “If you use a screen and a mouse regularly to interact with a computer, you are more likely to browse around what you can already see, and feel like it’s good enough.”
Use the accessibility guidelines provided by the operating system
Don’t reinvent the wheel. Follow the guidelines recommended by the operating system you are designing for. Apple’s Interface Guidelines will tell you exactly how to design an intuitive interface for their platform.
May from Adobe believes that designers should master operating system guidelines to create accessible content. May says “Apple and Microsoft have great documentation to drive accessible products. There are other pieces to it where the techniques and meeting the technical requirements come into play, but the best guidance is to follow what the operating system already gives you.”
He adds, “A lot of the time, people are building things that look like operating system components, but they don’t have the accessibility functionality that the OS gives you. This also means everything they do for internationalization, everything they do for security. It’s really important to use and know what the OS gives you.”
Write useful alt tags
Describe the image and be specific. Keep your words to 125 characters or less. Some of us freeze up when writing alt tags. Tantek Çelik, standards lead at Mozilla, recommends that you describe an image like you’re reading it to someone on the phone.
Tantek Çelik, Web Standards Lead at Mozilla, suggests to create alt tags by asking yourself “How you would describe a photo to someone over the phone?”
Be mindful of contrast
Try Stark for Adobe XD to evaluate whether your design passes the W3C’s Web Content Accessibility Guidelines. You want to make sure that text and images of text have a contrast ratio of at least 4.5:1. Make sure there’s enough contrast to distinguish the foreground from background.
Some people can’t see full color. You can communicate the same message with the following tips:
Four tips to design without color
- Add labels, icons, or explanations
- Add non-color signals to your links like carrots to the end
- Change the type weight, style, or size
- Underline links
Use proper states to indicate active vs. inactive
Material Design from Google indicates that all states should be obviously different from the other to indicate their priority level. https://material.io/design/interaction/states.html.States communicate the status of a user interface element to the user. Give the user proper feedback to know where they are.
Use hierarchy with typography and heading tags
HTML was designed so search engines and people can look at a document and easily understand the structure of content; so, write semantic HTML. Utilize headings to organize your information and communicate the hierarchy of a page.
Layouts should be consistent and clear
Navigation, links, and sections should be easy to identify and discover. Make sure content is predictable, well-organized, and links are obvious.
Accessible design systems in action
Nowadays, most corporations and government associations have a design system. Allison Shaw, senior design manager, design systems at Zendesk, set a high-standard to include accessibility in Zendesk’s Garden design system. Not everyone can see in full color. 1 out of 10 men and 1 out of 200 women around the world suffers from some type of color blindness. Addressing this accessibility concern was one of Shaw’s biggest challenges.
A design system is the right place to start your inclusivity efforts because it’s the foundation of your product.
– Allison Shaw, Senior Design Manager, Design Systems at Zendesk
Shaw began her color explorations by defining a clear objective with a time-bound goal. “Zendesk will correct 100 percent of its color contrast issues to pass Web Content Accessibility Guidelines Level AA by the end of Q2 in 2018.” She explored hundreds of color schemes and checked for contrast to meet requirements. Now Zendesk has a beautiful and accessible design system with a vibrant color scheme.
When creating the Zendesk Garden Design System, Allison Shaw, Senior Design Manager for Design Systems at Zendesk, set a goal to correct 100% of its color contrast issues to pass WCAG Level AA by the end of Q2 in 2018.Test with all types of people
There are endless resources to learn about accessibility so you can create content to reach a broader audience. Start by learning accessibility basics and staying up-to-date on best practices by reading recent website design blogs, and keep going until it’s embedded in your entire design practice.
Test your products on people who look and experience life in a different way than you. Accessibility should not be an afterthought, nor should you rely on another team mate to make sure your design is accessible. As the W3C states, “Web accessibility is essential for some, but useful for all.” Here’s to a more inclusive future!