Accessibility and inclusion
Inclusivity is a design opportunity, and an essential part of the design process is ensuring we’re designing for more people than just ourselves. Inclusion starts with being aware of those that might have challenges accessing your app or use it differently, and extends all the way to you remaining cognizant of how your app portrays people.
If you aren’t approaching design with intent to be as inclusive as possible, it’s time to reconsider. It won’t happen automatically, and by default, you’re likely to make assumptions based on your own worldview and biases. Make sure to take a step back, and remind yourself that we’re designing for humans.
In 2018, the World Health Organization reported that over one billion individuals (15% of the global population) have some form of impairment. That's a potential audience that you can and should reach.
Inclusion is designing services or products to be accessible to, and usable by, as many individuals or groups as reasonably possible while helping to meet the needs of excluded people. Consequently, designing inclusively often improves the product experience for all of your customers.
It's not always possible or appropriate to design one product to address the needs or goals of the world. Just like you wouldn't launch an app to serve the world as a whole with only one language option.
Instead, at the offset, determine a target customer group, and consider building a suite of products or derivative versions of your core product to better serve large populations. Creating a diversity of solutions to problems may lower the barrier to access for the greatest diversity of customers. This is a balance, between successfully serving your customers and trying to help all people. Focus your efforts on solving problems for the most people plausible.
All audiences benefit from inclusive design. If you are creating marketing materials to advertise a company, product, or service, making them easier to read and understand helps all of your viewers. But most importantly, designing inclusively helps disabled and older people.
Every design decision has the potential to include or exclude customers. Inclusive design emphasizes the contribution that understanding customer diversity makes to inform these decisions, and thus to include as many people as possible. User diversity covers variation in capabilities, needs, and aspirations.
It is important to have a well-designed customer journey, so there aren't barriers for your customers as they advance through your product. You'll want to address real and imagined obstacles and remove them for your customers.
Inclusion and intersectionality
Inclusion goes beyond just your customers. It is vital for your work environment too. Project Include offers recommendations for beginning to address inclusion in the workplace.
As you begin to define the groups of customers and coworkers in your path of inclusivity, the concept of intersectionality needs to be considered. Intersectionality describes how institutions of oppression such as racism, sexism, ableism, transphobia, homophobia, xenophobia, classism, etc. are interconnected, and cannot be considered or studied independently of one another.
Accessibility
Accessibility is the degree to which your product is inclusive of and usable by the broadest range of individuals. We see this in our physical spaces, with a ramp for an individual with temporary or permanent limited mobility to use instead of stairs. And while an individual that needs a ramp to access a building is helped, an individual that may have taken the stairs can also use and benefit from a ramp.
It's important not to make assumptions about your customers and their abilities. Not all disabled people identify or consider themselves as disabled. Often people who are older, who have impairments related to aging, would not think to check a box labeled "Disability" on a form or survey.
When talking about access and disabilities, it's okay to be unsure of what language and terminology to use. Ask someone by consulting with disabled people. This goes beyond getting your vocabulary and tone right, this opens an opportunity for you to solicit feedback and even build your audience.
Microsoft’s inclusive design toolkit highlights how we all can benefit from a designer’s focus on accessibility. Here is a table about different types of temporary and permanent disabilities.
One of the many ways to build products for access is to design for someone with color vision deficiency, a condition where a person’s eyes are unable to see colors in normal light situations. People with color vision deficiency have a hard time telling colors apart. A prominent feature of many products is color, but what happens to a button, or another interface element, for someone who has difficulty differentiating colors?
For example, an orange and green color that may appear separate to some could appear nearly identical to individuals with protanopia vision, a type of colorblindness.
Most people who suffer from color vision deficiency are not blind to color but have a reduced ability to see them. However, the most severe forms of these deficiencies are referred to as color blindness.
Color blindness affects millions of people worldwide: it is estimated that 260–320 million total individuals are affected genetically — 1 in 12 men and 1 in 200 women. However, color deficiencies — of all kinds — vary between individuals. The World Health Organization (WHO) identifies 4% of the global population as being visually impaired, 4% as having low vision, and 0.6% as being blind.
There are a variety of classes of color vision deficiency; the most common is red-green color blindness or protanopia. Other color vision deficiencies include protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia, achromatomaly, and low-contrast.
Color vision deficiencies can be acquired, but most are inherited genetically. The genes that influence the colors inside the eyes, called ‘photopigments,’ are carried on the X chromosome. If these genes are abnormal or damaged, color blindness occurs. Sometimes color blindness can be caused by physical or chemical damage to the eye, the optic nerve, or parts of the brain that process color information. Color vision can also decline with age, most often because of cataract — a clouding and yellowing of the eye’s lens.
There are numerous tools and guides available for testing and planning for stark enough contrast levels to maintain an accessible design for multiple types of reduced vision and color vision deficiencies. If you are using Figma in a Chrome browser, Funkify is a Chrome extension that simulates different types of disabilities. If you are designing for the web, the Web Content Accessibility Guidelines (WCAG) should be referenced.
Check out the World Wide Web Consortium’s (WC3) Web Accessibility Initiative and test your existing website with its evaluation tools.
Experience it yourself: Try using your website without a mouse or with a voice or text browser (free options available online). How was the experience? Attaching alt text to every image in the code of your webpage or app is an additional way to create access to a person with reduced vision, navigating their device with a screen reader.
As you'll see in the Hierarchy lesson, designing simple, well-spaced layouts is already a strategy we're using to focus the eye on the most essential information. Through doing that, you're increasing the readability as well. Readability is critical for every design and can be crucial for accessible design.
Readability can be extended through many different strategies, from higher contrast colors, larger text, shorter line length, kerning, leading, typeface choices, and more, which is covered further in the typography lesson.
Usability
Usability is the degree to which a product or service is easy, intuitive, and efficient to use to achieve specific customer goals.
This is the size of the learning curve to understanding how your product or service works, a lack of required instruction to perform desired interactions, and the time or effort it takes to complete these actions like the number of taps necessary.
An example is the layout of a mobile application on larger devices. There is increasingly a smaller percentage of screen area that a person can reach with just their thumb when holding a phone with one hand. Menu bars and search fields are appearing at the bottom of screens more often to increase their usability.
As mentioned in the What is Design? section, the Aesthetic-Usability Effect comes into play here as well. It’s essential to make your product usable regardless of its aesthetics. But you can use them both together to create a product that works well (is usable) and looks like it does too.
Further reading
The Politics of Design by Ruben Pater
Inclusive Design Checklist by Automattic
Inclusive Design at Microsoft
Storytime: Being Color Blind by Pablo Stanley
Accessibility for Everyone by Laura Kalbag
An Introduction to Usability by The Interaction Design Foundation