How we got here...Where we are...Where we are going
The 21st century has provided us with more connectivity than our ancestors could have dreamed of. From the emergence of the iPhone to voice technology, most of us do not go a single day without interacting with a digital device of some kind.
Throughout this book, we will look at designing with accessibility in mind for the digital age. Examining some practices related to code, design principles, user research, usability testing, planning and implementation, and what a more accessible future might look like.
This book takes the approach of looking at the user experiences. As a user experience designer, my focus is on being an advocate for the user and making sure the product is fitting the needs of the user.
In recent years, there has been more of an emphasis on making products more accessible and inclusive. But what does it mean to design inclusive and accessible experiences? You could ask five different people and they would give you five different responses.
My personal definition is that people either feel good using a product or they don’t.
Imagine if 90% of the web sites or mobile apps you use today locked you out. Everyone else continues to experience the convenience of mobile banking, the connectedness of social media, and the freedom of online shopping, but, for you, they’re inaccessible.
For the 57 million people with disabilities in the United States, this is their everyday experience. People with visual, auditory, motor, speech, and cognitive disabilities rely on various assistive technologies and alternate methods of interaction to use digital documents and web and mobile apps.
People with visual disabilities may rely on screen readers, braille displays, zoom functions, or high contrast colors to get value from what’s displayed on screen. People with auditory disabilities often rely on captions or transcripts for video content. People with motor disabilities might require speech-to-text software or keyboard-only interactions. People with speech disabilities require a nonvocal means of interaction. And, finally, people with cognitive disabilities often require thoughtful and organized layouts with clear direction.1
Easily used or accessed by people with disabilities: adapted for use by people with disabilities.
Often times, accessibility is viewed as a series of checkboxes to complete; it doesn’t have to be that way. Accessibility is not only about compliance, it is also about usability. We first need to look at our potential users. Who will be using your product? Think about ALL of your potential users and who they could be.
As Kat Holmes said, “Design is much more likely to be the source of exclusion than inclusion.”
Visual: Blindness, low vision, color blindness
Hearing: Deaf and hard of hearing
Motor: Inability to use a mouse, slow response time, limited motor control
Cognitive: Learning disabilities, distractability, inability to focus on large amounts of information
The social model of disability is utilized in this book. The social model of disability says that disability is caused by the way society is organized, rather than by a person’s impairment or difference. It looks at ways of removing barriers that restrict life choices for disabled people. When barriers are removed, disabled people can be independent and equal in society, with choice and control over their own lives.
Disabled people developed the social model of disability because the traditional medical model did not explain their personal experience of disability or help to develop more inclusive ways of living.
(An impairment is defined as the limitation of a person’s physical, mental, or sensory function on a long-term basis.)
Changing attitudes to Disabled People
Barriers are not just physical. Attitudes found in society, based on prejudice or stereotype (also called disablism), also disable people from having equal opportunities to be part of society.
Medical/Social Model of Disability
The social model of disability says that disability is caused by the way society is organized. The medical model of disability says that people are disabled by their impairments or differences.
Under the medical model, these impairments or differences should be “fixed” or changed by medical and other treatments, even when the impairment or difference does not cause pain or illness.
The medical model looks at what is “wrong” with the person and not what the person needs. It creates low expectations and leads to people losing independence, choice, and control in their own lives.
A wheelchair user wants to get into a building with a step at the entrance. Under a social model solution, a ramp would be added to the entrance so that the wheelchair user is free to go into the building immediately. Using the medical model, there are very few solutions to help wheelchair users to climb stairs, which excludes them from many essential and leisure activities.
A teenager with a learning difficulty wants to work toward living independently in their own home but is unsure how to pay the rent. Under the social model, the person would be supported so that they are enabled to pay rent and live in their own home. Under a medical model, the young person might be expected to live in a communal home.
A child with a visual impairment wants to read the latest best-selling book to chat about with their sighted friends. Under the medical model, there are very few solutions, but a social model solution ensures full text audio recordings are available when the book was first published. This means children with visual impairments can join in with cultural activities on an equal basis with everyone else.2
In the subsequent chapters, we will discuss these areas of accessibility in more detail and some of the assistive technologies used in order to facilitate digital experiences for people with disabilities.
Some of the areas we will cover in this book include the standards used for accessibility set forth by the Web Accessibility Initiative (WAI) in Chapter 2. If you find something annoying with digital experiences, it is not accessible; there are cases discussed in Chapter 3. There will be an overview on web content accessibility guidelines 2.0 and 2.1 as well as the internalization of accessibility in Chapter 4.
Who: Who is using your product?
What: What are they doing?
Where: Where are they doing it?
When: When are they doing it?
Why: Why are they doing it?
How: How are they doing it?
W5H
Examining the W5H can be helpful after an idea has been brought forth and before it is built. Often times an idea for a product is created without much thought when it comes to the users of the product and, in particular, people with disabilities. Keep in mind in the 21st century people are quick to respond if your product does not work for them.
Microsoft Inclusive Design toolkit showing permanent disability (person with one arm), temporary disability (person with an arm injury), and situational limitations (person holding a baby in one arm) www.microsoft.com/design/
Inclusive Design means making your product available to as many users as possible. Technology is a part of life and as such, we no longer go a day without it. Many people have a role in the design of technology and we are all creators. Chapter 7 will show some case studies related to different types of digital experiences such as web, mobile, and emerging technologies like augmented reality.
As an adjunct professor, I get the pleasure of teaching students about user experience (UX) design. Whether you are planning for a lesson or the launch of a new product, you will need to consider planning and implementation. In Chapter 8, we will get into detail about creating a more inclusive culture and what to plan for.
What UDL is and is not
UDL is ‘A way to optimize teaching to effectively instruct a diverse group of learners.’ ‘Based on insights from the science of how people learn.’ ‘Flexible in how students access material, engage with it and show what they know.’ UDL is not… ‘A curriculum or technology platform.’ ‘One method of teaching all students. A variety of methods are used to give all students an equal opportunity to succeed.’ ‘An “us” vs. “them” resources. UDL benefits all kids, not just those who struggle.’ www.understood.org/~
The truth is that one size does not fit all when it comes to learning and creation. We cannot create experiences for everyone; however, we can create experiences that people can access. Thinking about users and their needs whether they are in a classroom or out in the world using your digital product, there is a way to meet their needs.
The UCD process—research, concept, design, develop, and test. www.cambridgeconsultants.com/insights/untangling-ux-part-1-design-thinking-vs-ucd
Design thinking approach—empathize, define, ideate, prototype, and test. www.cambridgeconsultants.com/insights/untangling-ux-part-1-design-thinking-vs-ucd
In this book, I take several different approaches including universal design, design thinking, and the EVVCC (empathy, vision, values, communication and context) approach which is discussed in more detail in Chapter 5.
We Can All Create More Inclusive Experiences
We tend to think about ourselves the most, and if we are not thinking about ourselves, we are thinking about things from our organization's perspectives. It may be difficult to think about how other people may do things. We don’t know if anything works until we try it out. Chapter 9 will layout testing of ideas and products and best practices.
The four quadrants of an empathy map www.nngroup.com/articles/empathy-mapping/
Empathize—Learn about your audience: Who is my user? What matters to my audience?3
Define—Create a point of view: What are their needs?
Brainstorm—Come up with creative solutions: Wild ideas encouraged!4
Build a representation: How can I show my idea? Prototype is a rough draft!
Share and ask for feedback: What worked? What didn’t?
True Story
Text message from a daughter to a father who has color blindness
We will address how to handle color contrast in Chapter 3.
NFL Image Color Rush Uniforms
On the left, the Buffalo Bills wearing red jerseys with blue and white stripes on the shoulders and on the side of the pants. On the right are the New York Jets wearing green jerseys with black and white strips on the shoulders and the side of the pants
There was a problem that occurred for some people while watching the game: they could not tell which team was their team due to the colors the teams were wearing. One team was wearing red and green. For people with red–green color blindness, they were unable to see which team was their team.
What are the different types of color blindness?
The most common types of color blindness are inherited. They are the result of defects in the genes that contain the instructions for making the photopigments found in cones. Some defects alter the photopigment’s sensitivity to color; for example, it might be slightly more sensitive to deeper red and less sensitive to green. Other defects can result in the total loss of a photopigment. Depending on the type of defect and the cone that is affected, problems can arise with red, green, or blue color vision.
Red–Green Color Blindness
Protanomaly: In males with protanomaly, the red cone photopigment is abnormal. Red, orange, and yellow appear greener and colors are not as bright. This condition is mild and doesn’t usually interfere with daily living. Protanomaly is an X-linked disorder estimated to affect 1% of males.
Protanopia: In males with protanopia, there are no working red cone cells. Red appears as black. Certain shades of orange, yellow, and green all appear as yellow. Protanopia is an X-linked disorder that is estimated to affect 1 percent of males.
Deuteranomaly: In males with deuteranomaly, the green cone photopigment is abnormal. Yellow and green appear redder, and it is difficult to tell violet from blue. This condition is mild and doesn’t interfere with daily living. Deuteranomaly is the most common form of color blindness and is an X-linked disorder affecting 5% of males.
Deuteranopia: In males with deuteranopia, there are no working green cone cells. They tend to see reds as brownish-yellow and greens as beige. Deuteranopia is an X-linked disorder that affects about 1% of males.
Blue–Yellow Color Blindness
Tritanomaly: People with tritanomaly have functionally limited blue cone cells. Blue appears greener, and it can be difficult to tell yellow and red from pink. Tritanomaly is extremely rare. It is an autosomal dominant disorder affecting males and females equally.
Tritanopia: People with tritanopia, also known as blue–yellow color blindness, lack blue cone cells. Blue appears green and yellow appears violet or light grey. Tritanopia is an extremely rare autosomal recessive disorder affecting males and females equally.
Complete Color Blindness
People with complete color blindness (monochromacy) don’t experience color at all, and the clearness of their vision (visual acuity) may also be affected.
Cone monochromacy: This rare form of color blindness results from a failure of two of the three cone cell photopigments to work. There is red cone monochromacy, green cone monochromacy, and blue cone monochromacy. People with cone monochromacy have trouble distinguishing colors because the brain needs to compare the signals from different types of cones in order to see color. When only one type of cone works, this comparison isn’t possible. People with blue cone monochromacy may also have reduced visual acuity, nearsightedness, and uncontrollable eye movements, a condition known as nystagmus. Cone monochromacy is an autosomal recessive disorder.
Rod monochromacy or achromatopsia: This type of monochromacy is rare and is the most severe form of color blindness. It is present at birth. None of the cone cells have functional photopigments. Lacking all cone vision, people with rod monochromacy see the world in black, white, and gray. And since rods respond to dim light, people with rod monochromacy tend to be photophobic—very uncomfortable in bright environments. They also experience nystagmus. Rod monochromacy is an autosomal recessive disorder.5
Tweets from viewers of the NFL game between the Buffalo Bills and New York Jets
A and B. Image A shows through a simulator what the game looked like for people with color blindness. Image B shows “Color Rush” uniforms in colors including white
According to CBS.com, the NFL admitted that when the league was putting the “Color Rush ” uniforms through the testing phases, it forgot to account for color-blind fans. After consulting with experts, the NFL changed the colors of the uniforms and added the color white because people with color blindness can distinguish white from other colors.
These examples provided go to show that user experiences are everywhere. User experience tends to be platform agnostic, and it requires us to look beyond our screens and see the world in ways which we can improve things for our users.
Many of us use the web to find what we are looking for, whether it be the latest news or a new outfit. The web is a good place for us to start to look at accessibility and to consider how some may use the web.
Where to Begin?
One of the first things I like to do when I go to a web site is to check and see if I can keyboard through the web site on my laptop or desktop. Meaning, could I actually maneuver through this web site without using a mouse? Have you ever tried it? You should!
You might ask yourself, who doesn’t use a mouse? There are plenty of people who solely use a keyboard to get around the web: People who don’t have the dexterity to use a mouse, people who like to only use keyboards because they find it faster to use a keyboard, and people who are visually impaired.
Where do we go from here and what can we create? In Chapter 10, we will take a look at some past innovations and future opportunities. The future is created by what you do today. Let’s take a look at using the web with only your keyboard.
Go to a web site and try to only use your keyboard. See if you can tab through and notice which elements are highlighted as you go through the site.
Can you see where you should focus? Are things highlighted? Are you lost?
What may be difficult could be impossible for someone with disabilities if the access is not done properly for the device or the tools someone may use.
Conclusion
In this chapter, we covered the definitions that will be used throughout the book for accessibility and inclusivity. As a reminder, accessibility means approachability and inclusive design means making products for everyone.
One way to approach the creation of digital products is to use the W5H approach: who, what, where, when, why, and how you might approach the product. The use of design thinking or user-centered design are approaches that put the user first when creating a product.
In the next chapter, we will look at some practices related to web development in relation to headings, contrast, and navigation.