Let’s talk about Designing Accessible Digital Products

Let’s move past the bounds of inaccessible explanations for the accessible design

Published in

Fizday Design Paper

7 min readSep 17, 2020

A few years back, I had a knee surgery that led me to walk with help of supports for the next 8 months. The period of 8 months was a hard way to make me realize two things:

Importance of the small packages of happiness in life
We are not at all respectable to the people that requires the most respect — our disabled population

We’ll be talking about accessible design in this article, which is heavily inspired by the Design Talk by Garima Mehta & Karan Kapoor that I attended lately.

How should we perceive a disability?

There are two schools of thoughts when it comes to the perception of disability:

The Medical Model of Disability rest on assumptions of what a Disabled person ‘can’t do’ because of their impairment; for example: “She cannot walk, therefore she will never be able to work”.

The Social Model of Disability holds that people with impairments are ‘disabled’ by the barriers operating in a society that exclude and discriminate against them.

While the Medical Model is technically correct, the Social Model is more appropriate when different contextual planes are overlapped.

Why do we need to know about this?

We, as humans first, and designers later, should know that most of the disability is designed. This is an outcome of a lot of complex phenomena of designing things according to the stakeholders, general users and marketing team.

This leads to the failure of design caused due to a unilateral approach towards design. As a large segment of the population is not even considered here, hence it leads to the less usage of that application.

As designers we “presume” our wants and needs, hence we start excluding people that might be in the same room as us. This might include vision, auditory, limb or other such disabilities.

Inclusive design practice by Microsoft

Inclusive design: A design methodology that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives. Designing inclusively doesn’t mean you’re making one thing for all people. You’re designing a diversity of ways for everyone to participate in an experience with a sense of belonging.

The disability is not always permanent but could occur due to variety of temporary(like a fracture, cataract operation) or situational (lower screen brightness in sun, lower auditory response after moving out of a concert) changes.

Meeting grandparents

Each of us has a set of people around us from whom we can understand the problem faced by disabled people. Various minor or major indications of disability are visible as we all age. Our grandparents are the greatest examples of this.

Squinching the eyes to better read the text, need to hear at higher volumes, low mobility and a lot of other factors that include our family’s dearest members to this bracket of disabled people.

Accessible design does not help only disabled people but also the following set of people

Seniors Citizens
People from Rural area
People from remote areas
People from the different cultural background.

Here is a video by Apple that one must see to understand the role of various assistive technologies used to uplift the digital experience for the disabled population.

Why should we care?

We got to know about the social and humane reasons till now, but for those who care about monetary reason, they should know about Purple Pound.

According to wearepurple.org

“The Purple Pound refers to the spending power of disabled households which is defined as a household in which at least one of the members have reported a disability. The key stand out statistics are as follows:

More than 1 in 5 potential UK consumers are disabled
The number of disabled people in the UK is increasing — from 11.9 million (in 2014) to 13.3 million
The prevalence of disability rises with age
3 in 4 disabled people and their families have walked away from a UK business citing poor accessibility and/or poor customer service
Nearly three-quarters of disabled online consumers will click away from a website due to inaccessibility.”

Want a famous example of a disabled person who might have influenced you in one or another way?

Mark Zuckerberg

According to The New Yorker, Zuckerberg is red-green colourblind, which means the colour he can see best is blue. That also happens to be the colour that dominates the Facebook website and mobile app.

“Blue is the richest colour for me,” he told the magazine. “I can see all of blue.”

What accessibility practices are?

Accessibility practices include the following

Empowering the population
Making them independent
Equal access to information

It is a designer’s as well as the developer’s job to apply the best available accessibility practices for a specific target audience. No matter if it is a tangible, digital product or a service, it should ways be accessible to all.

International laws

ADA — The Americans with Disabilities Act

The Americans with Disabilities Act (ADA) gives civil rights protections to individuals with disabilities similar to those provided to individuals on the basis of race, color, sex, national origin, age, and religion. It guarantees equal opportunity for individuals with disabilities in public accommodations, employment, transportation, state and local government services, and telecommunications. The ADA is divided into five titles (or sections) that relate to different areas of public life.

Title I — Employment
Title II — State and Local Government
Title III — Public Accommodations
Title IV — Telecommunications
Title V — Miscellaneous Provisions

WCAG — Web Content Accessibility Guidelines

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

WCAG is primarily intended for:

Web content developers (page authors, site designers, etc.)
Web authoring tool developers
Web accessibility evaluation tool developers
Others who want or need a standard for web accessibility, including for mobile accessibility

WAI — Web Accessibility Initiative

The WAI (Web Accessibility Initiative) and XHTML standards are technical guidelines set by the W3C (World Wide Web Consortium), an internationally recognised internet body. These guidelines ensure that a website can be accessed by people in as many different situations as possible, for example, people using screen readers and people viewing websites through devices other than a computer such as tablets and mobile phones.

The Misconception

A lot of young people miscalculates disability by saying it usually happens to the older generation. Just for reference, people with disabilities make up an estimated one billion, or 15% of the world’s population. About 80 per cent are of working age. And while the working-age is more informed and provocative, they deal the seclusion in their way.

Between 2017 and 2018, website accessibility lawsuits increased over a shopping 170%, and they continue to rise. Several well-known brands were sued for violating the accessibility laws such as Dominos, Lacoste, Airbnb and Starbucks.

Design Consideration During Development

Html tags
Alt tags
Autocaptioning — Netflix started captioning, Youtube

Design Consideration During Design

Color

Color Contrast for better visibility. Must be at least 4.5.
Color should not be only signifier — Use different line types and hatches to ensure better accessibility for people with color blindness.
Avoid problematic color combinations — orange green, red green, blue and purple, red and brown, blue and green, light blue and yellow etc. for people with different color blindness conditions
Avoid yellow color — very distressing color for Autistic people.

Videos and animations

Anything that flashes more than 3 times under 1 second can be really disturbing for people with Autism. It can also lead to seizures or motion sickness for some people.

Text

Line length — 50–60 characters on desktop and 30–40 on mobile.
Must check color contrast, specifically for buttons, header and form input labels.

Tools

WebAIM

WebAIM’s goal is to help make the web more accessible to individuals with disabilities. We can’t do that on our own. Since 1999, we have helped build a large community of developers, web masters, individuals with disabilities, and others who share this goal with us. In the sharing of resources and information, the web accessibility community benefits. WebAIM provides several ways for you to both learn and share with others.

Colorsafe.co

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Stark — Plugin for Figma, Adobe XD & Sketch

Baked right into the software you love to use, Stark empowers you to design with accessibility in mind from conception of brand to fruition of product. Following are the tools provided with the plugin.

Contrast Checker
Colorblind Simulation
Color Suggestions

How to take universal design decisions for everyone?

User interviews

One must include disabled population in user interviews to understand their pain points and goals they are trying to achieve. This will lead to a conscious design for that application.

Diverse personas

Whenever building a prototype or developing the idea, try to include one or two personas keeping in mind the consideration for disabled people that you might need to cater to your service.

Usability testing

Usability testing answers the question — “Is my product accessible by the person with XYZ disability?”

This article contains all the shreds of evidence for social, humane, monetary and legal cases that you should consider. So next time whenever you are trying to build a project, you must include accessibility features.