Designing for Accessibility: Introduction

Elif Ozen
6 min readJan 30, 2023

--

Imagine that your beloved family members or friends have disabilities; they might lose their vision, hearing, physical or cognitive capabilities.

I’m saying imagine, but according to the World Health Organization (WHO), approximately 15% of the world’s population, or 1 billion people, live with some form of disability.
This includes physical, sensory, and intellectual disabilities and mental health conditions; please remember that anyone can get disabled in their lifetime.

Nevertheless, it’s clear that disability affects a significant portion of the world’s population, and accessible design is critical to ensuring everyone has equal access to life.

Contents;

  • The importance of accessibility for UI-UX designers
  • Accessibility has four basic principles
  • Types of barriers
  • Resources
Image source: https://www.disabledworkersusa.com/

The importance of accessibility for UI-UX designers;

I believe it is very important fundamental knowledge for a UX / UI designer as much as everyone else. Disabled people are already facing inaccessible design in everyday life, suffering from unequal life standards. Our responsibility is to ensure that this is not how it will be like that in the future, and the digital world we are creating is an important part of it. Yet, it’s so simple to make things accessible by just doing our work right and keeping our responsibility to the community in our mind.

This is why I decided to share what I learned with the community, and I’m looking forward to hearing about your experiences and questions in the comments.

Since Accessibility is a broad topic, I’ll try to break it down into multiple posts and approach it from a different perspective.

In this article, we will start to explore how UX designers can run accessibility research. In the following articles, we will learn how to make accessible designs for UI designers.

Accessibility has four basic principles;

1-Perceivable: Users must be able to perceive it in some way, using one or more of their senses.

2-Operable: Users must be able to control UI elements (e.g., buttons must be clickable in some way — mouse, keyboard, voice command, etc.).

3-Understandable: The content must be understandable to its users.

4-Robust: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.

A color scale that shows some colors that are seen differently by different color blindness types. Image source: www.trilliumcreativesolutions.com

Several barriers in design can make it difficult for people with disabilities to use digital products. Some common types of fences include:

Types of barriers;

  • Visual barriers: Visual barriers are a deep topic — issues with color contrast, text size, and images without alternative text.
    A button on the Medium website gives the command to read the articles for the visually impaired. You must try it; it’s very successful!
    There are many types of visual impairments, one of which is color blindness. It is especially seen in 1 out of every 12 men. It is less common in women.
    The most common is Deuteranopia. (green color blindness)
    Rarely, Protanopia (red color blindness)
    The rarest is Tritanopia. (blue-yellow color blindness)

According to WCAG guidelines, colors in designs should be perceptible and contrast.
Parts that give warnings should not only warn with color but must have an icon or explanation next to it.

WCAG guidelines have three levels of success criteria: A, AA, and AAA
A is the minimum compliance level.
AA is moderately compliance level.
AAA is the best compliance level, but not all sites have to be this well-equipped.

-Hearing barriers: Problems with audio and video content that are not accompanied by subtitles or transcription. If you are using the Windows operating system, there are accessibility settings inside your operating system.
I will write more about this subject in another article, but if you want to learn, you can find out here.
https://www.microsoft.com/en-us/windows/accessibility-features

I would also like to mention the following about hearing;
Visually impaired people use the voice command system; they may have difficulty using it due to the unexpected and spontaneously starting loud video.
A loud and sudden sound can also trigger seizures in people with epilepsy.

-Physical barriers: Issues with products that are not usable with only a keyboard or other assistive technology. Keyboard accessibility is a very deep topic in itself, and an article can be written just for it.
The most used accessibility tool for the physically and visually impaired is the keyboard.
Users using the keyboard use the tab key on the keyboard for all buttons. In Western cultures, it starts to move from the left.
If the developer did not pay attention to accessibility while coding and a ux designer checked the accessibility of the product and did not notice the error, this sequence would not progress properly, and a low-accessibility website would be created.
Please go to https://www.nngroup.com/ to understand this better and watch the screen by pressing the tab key repeatedly from the keyboard.

-Cognitive barriers: Issues with confusing or complex interfaces or using language that is difficult to understand. Especially in learning design, various animations are used. The purpose of this is to alleviate the cognitive load, accelerate perception, increase the permanence of learning and teach by entertaining; however, if animations are used unnecessarily and too much, this can cause the following results;

Inability to focus in people with attention disorders and hyperactivity

Rapid flashing effects trigger seizures in photosensitive epilepsy patients. (Defined as more than three flashes per second.)

Some animated animations can trigger dizziness in Vertigo patients.

-Technical barriers: Issues with web technologies and software that are not accessible or compatible with assistive technology.

Each of these topics is pretty deep, but even having an overview will enable you to improve the accessibility of your UX/UI significantly and hopefully encourage you to learn more about them.

Foot mouse for people without hands and arms — Image source: https://abilitynet.org.uk/
Blind man using a braille screen reader. Image source: www.unsplash.com -Sigmund

In the next article, we will explore accessibility testing types and methods, teamwork, and how to create a persona for accessibility testing.
If you would like to continue, you can read here: Designing for Accessibility: Research Fundamentals.

Thank you! for your time and for showing interest in accessibility.

We are the ones who will change the world and build a better future together.

Please feel free to leave your valuable comments.

Resources;

--

--

No responses yet