Telerik blogs
TB_870x220

For technology to lower barriers for people with disabilities, accessibility must be built into the user experience. To understand accessibility, we'll discuss different types of disabilities, and how they can affect the user experience.

We all know that technology lowered many barriers for people all around the world. It enabled us to have superpowers our ancestors would have craved for. You probably booked a ride with your phone this month or talked with people living in another country through your favorite messaging app. 🌍

It is also true that technology helps to lower barriers for some people who have disabilities, but here is the catch: This is only the case when accessibility is built into the user experience. ⚠️

Accessibility simply means that websites, tools, and technologies are designed and developed so that people with disabilities can perceive, understand, navigate, and interact with them but also contribute to them [1]. 👩‍🎓

But in order to understand accessibility, a first important step is to discuss the different types of disabilities users might have. We will also try to understand what a person with a disability experiences when dealing with computers or web-based interfaces. 👨🏻‍💻👩🏽‍💻

Mobility or Physical Impairments ✋

Mobility or physical impairment refers to weakness, limited ability and inability to independently use one’s body or one or more of his/her extremities. It ranges from lower body impairments to upper body impairments, and includes:

  • Weak / limited muscular control (for instance, tremors, lack of coordination, paralysis, muscular dystrophy, tremor and spasms, repetitive stress injury)
  • Limited sensation
  • Joint disorders (such as arthritis)
  • Pain impeding movement (like fibromyalgia)
  • Missing limbs (such as from amputation)

We usually think of mobile impairments as permanent conditions only, but they can also be temporary – when a bone is broken, for example. Keep in mind that many seniors are also prone to mobility impairments.

NOT implementing accessibility impacts the experience of mobility impaired users in the following ways:

  • Inability to access full features and navigate interfaces when full keyword support is not provided
  • Not completing tasks because of time limits (like filling out online forms)
  • Getting stuck and not accessing the full features of an interface when navigation mechanisms are too complicated or not easily accessible
  • Making it painful to use a mouse for extended periods of time when keyboard commands are not enough to navigate

Hearing Impairments 👂

Hearing impairments include:

  • Mild to moderate hearing loss (hard of hearing)
  • Substantial to uncorrectable hearing loss (deafness)

Something to keep in mind is that there isn’t one single sign language, but hundreds of sign languages used throughout the world. Interesting enough is the fact that not everyone who suffers from an auditory impairment knows sign language.

Today’s interfaces are increasingly relying on multimedia, so when captions (or transcripts) are not provided, content becomes simply inaccessible for people with hearing impairments.

Also, you should keep in mind that audio content with too much background noise is extremely challenging to understand for people with mild to moderate hearing impairment.

Visual Impairments 👁️

Visual impairment covers a wide range of conditions:

  • Low vision (short or long sightedness, blurred vision)
  • Total blindness
  • Colorblindness

For low-vision users, there are a few no-no’s that make their life really difficult when using a computer:

  • Text that cannot be resized.
  • Fonts that are too small or too hard to read. Some web fonts have been specifically designed for readability (like Inter UI), so make sure you choose the right one.
  • Insufficient color contrast (like text color versus background color for your buttons). (This can mean different things to different users – some users need high contrast, while others need low contrast. This is why it’s important to provide adequate markup, so users have multiple options for accessing content.)
  • Busy page backgrounds (be it patterns or even just too many ads on the page).
  • Solely relying on color to convey meaning.

Many people assume that blind people just aren’t able to use the internet. Well, there are ways that enable them to effectively use a computer. Namely, a screen reader or a braille display. The latter is more appropriate for deaf-blind users… but also more practical for our blind programming comrades. 😇

# Refreshable braille display

However, the following things make it complicated to rely on the tools they have:

  • Not providing appropriate alternate text to images
  • Poorly marked-up pages
  • Relying on the use of Java or Flash functionalities
  • Being able to navigate only through a mouse (a mouse requires hand-eye coordination, so even if the person is using a screen reader it becomes useless when keyboard commands are not enough to navigate)

Most of us think that colorblindness means only seeing in black and white, but that is just another misconception. Note that there are different forms of color blindness that encompass the inability to:

  • Distinguish between red and green
  • Distinguish between yellow and blue
  • Perceive any color

Colorblind people do not require extraordinary accessibility functions, but there are two things (that they also share with low-vision users) which make it really hard for them to navigate the web:

  • Insufficient color contrast (like for text versus background color on buttons)
  • Solely relying on color to convey meaning

And by the way here is a fun fact: Do you know why Facebook is blue? 😃

According to The New Yorker, Zuckerberg is red-green colorblind, which means the color he can see best is blue. That also happens to be the color that dominates the Facebook website and mobile app. “Blue is the richest color for me,” he told the magazine.
Source: Why does Facebook have a blue color scheme?

Cognitive, Learning, and Neurological Disabilities

Cognitive, learning, and neurological disabilities impact how a person:

  • Hears and/or understands information
  • Moves
  • Sees
  • Speaks

Some of these disabilities include:

  • Attention deficit hyperactivity disorder (ADHD)
  • Mental health impairments (anxiety, delirium, depression, paranoia, schizophrenia, to mention just a few)
  • Learning disabilities that impact reading (dyslexia), writing (dysgraphia), processing number (dyscalculia), or space-time orientation
  • Short or long-term memory (caused by dementia for instance)
  • Autism spectrum disorders (autism, Asperger’s, pervasive development)
  • Down syndrome (that causes learning impairment)
  • Seizure disorders (such as epilepsy and migraines)
  • Multiple sclerosis (causes nerve damage to the brain and spinal cord extending to other motor and sensory functions)

There is this strange assumption that people with cognitive, learning, or neurological disabilities are somehow less intelligent or do not need tech features like those without disabilities. For you, it may seem ludicrous to think like this, but in many communities this thinking is very common.

In an era in which technology is here to help people advance in life and bring value to one another, technology is a right, and inaccessibility is discriminatory. In certain circumstances, inaccessibility limits a person’s potential.

That being said, from mild to life-changing cognitive or neurological disorders, everyone’s needs should be accounted for. Things like the issues I’m citing below add additional barriers to those who have these disorders.

  • Uneven gaps between words, very small font, and pure white page backgrounds
  • Unstructured or verbose content
  • Unpredictable functionalities and inconsistent labeling
  • Poor navigation options or complex navigation mechanisms
  • Distracting content, overly stimulating visual flickering and audio signals at certain frequencies or patterns

My Take 🤔

Going through the different types of impairments and the number of barriers people face, you quickly get to understand that accessibility is not just essential for many people but actually useful for all of us. [2]

A lot of the challenges people with impairments encounter are actually unacceptable in a modern society like ours. That’s why I believe that, at the end of it all, accessibility has a lot to do with good and well-thought-through UX/UI design. 💁

Cited Sources:

[1] Source: W3 - Introduction to Web Accessibility www.w3.org
[2] Source: W3 - Web Accessibility Perspectives www.w3.org

Additional Sources:

📚W3C Web Accessibility Initiative - Diverse Abilities and Barriers www.w3.org
📚Joe Clark - Building Accessible Website: How do disabled people use computers? www.joeclark.org
📚Disabilities, Opportunities, Internetworking, and Technology (DO-IT) www.washington.edu
📚Disabled World - Disabilities: Definition, Types and Models of Disability www.disabled-world.com
📚Coolfields Consulting - Web Accessibility: types of disability. www.coolfields.co.uk


To Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing. 

Download the whitepaper: Accessibility for Developers

Adding Accessibility to Your Apps

One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG compliant and  give you great functionality from grids and charts to schedulers and pickers. Get a head start on your apps UI and a head start on accessibility compliance at the same time. 

Learn more about: Kendo UI


author-photo_nada-rifki
About the Author

Nada Rifki

Nada is a JavaScript developer who likes to play with UI components to create interfaces with great UX. She specializes in Vue/Nuxt, and loves sharing anything and everything that could help her fellow frontend web developers. Nada also dabbles in digital marketing, dance and Chinese. You can reach her on Twitter @RifkiNada or visit her website, nadarifki.com.

Related Posts

Comments

Comments are disabled in preview mode.