Averin Vladislav
Oct 24, 2018 · 18 min read

In UX design we have several basic things and principles:

  • Flexibility
  • Functionality
  • Reliability
  • Usability
  • Stability
  • Accessibility

If a designer can efficiently combine and mix them together we’re lucky to observe almost ideal UX product. Each of all above covers under itself huge theory basis. And here I’d like to share some practices among the web technologies about such an important thing as accessibility (numeronymA11Y).

Accessible products and services offer people with disabilities to use things with the same level of efficiency, usability and satisfaction as for people without disabilities.

But how to create and integrate specific rules and practices which would be a guide to design product in accessible approach? Guys from W3C already did it and provide web community with guidelines, standards, and techniques, such as the Web Content Accessibility Guidelines (WCAG), which is the international standard ISO/IEC 40500.

Your product may accomplish these standards not fully and be good enough for users. But sometimes these rules need to cover all aspects of user’s interaction with accessible product. For that reason different levels of guidance following were created:

Level of standard “quality”

This is the same story with your refrigerator. With increasing of “A” symbols increases amount of accessibility features that you provide. “AAA” is the most advanced accessibility support by WCAG.

But why it’s so important?

Here some reasons why you should pay a little bit attention to accessibility:

  • ~1 billion people have a disability. 15% of the world population has some type of disability that becomes a barrier to take all feels and colors of a life.
  • Better search results. In case it’s a website or web application, it becomes more SEO friendly. Your HTML backbone creates a good visibility for search engines.
  • Better code. Accessibility approach encourages developers for a better coding practices because of semantic layout (when HTML5 tags really fit your goals).
  • Laws and policies in some cases. Yes, you can meet a jail in some countries in case of do not accomplish some level of WCAG guides on your website.

Let’s dive in and enjoy best practices of accessible design below.

To start talking about solutions we need to figure out what exact types of disabilities exist. Basically, we can extract 5 classes of impairments with humans body:

  • Vision
  • Hearing
  • Learning
  • Mobility
  • Seizures

For every of this type of disabilities, you can find sub-article below related to ideas and practices that used around us for special people.

Loss of vision and color blindness 👁

As you may know, there are many tools among the web that help to reveal either contrast of text on the background is good enough or the colors you choose are affordable for users with color blindness.

Color contrast

As far as I know, this tool from WebAIM was a first contrast checker according to WCAG guides. Here you can choose text color and background color and get Contrast Ratio score:

Contrast checker

Color tool within material design color palette helps designers to choose the right color for his interface and check legibility to use it with black/white/custom text. A cool feature that you can see what minimal opacity of selected color you can pick:

Google color tool

Here one good example of accessible website for people with vision problems: Belarusian organization of eye-disabled people. As you can see at the top of the page user is able to select font size, color scheme, turn off images, etc.:

High contrast mode of webpage

Maybe guys from organization mentioned above were inspired by Safari reading mode? Maybe vice versa 😄. In safari we can observe similar functionality: pick font size, font color, and typeface. Also, it may exclude advertisement from page.

Safari reading mode

Don’t like paddings, colors, and typefaces on favorite websites? Firefox gives you the ability to write your own custom CSS and apply it to specific domains. How it may look like:

Custom CSS in Firefox

Keep in mind that there is a lot of exceptional cases: these tools sometimes don’t cover all designer’s needs. For example, my colleague asks me how to check text contrast on gradient background. After an investigation and research, I can’t find a suitable tool for that. But here I found some kind of workaround:

If you’re designing with gradient backgrounds, verify that the color-contrast ratio passes for the text color and background color on both the lightest and darkest part of the gradient covered by the content or text.

And this example is not unique. There is a bunch of questions that still remain open:

  1. How to check contrast on complicated shadows?
  2. How to check contrast on images?
  3. How to check contrast of decorative text with custom outline?

Hope you will be that superhero who will write you own Sketch plugin to cover these issues.

Right sizes and places of UI elements

Imagine that you’re not totally blind person but your vision is pretty low. It’s a big probability that you will use screen magnifier tools. Now on gif below, you can observe a bad example of user interaction when a person hovers on tooltip icon and tries to read tooltip text with screen magnifier:

Screen magnifier issue

But it hides while user moves mouse out of i icon. This behavior is not correct at all. And how it should be:

Correct behavior

The same situation exists on modern and beautiful websites when after search button was triggered, search input appears in another place out of “mouse context”. How guys who use screen magnifier will understand that search works?

Screen magnifier issue

Material.io. Beautiful and usable:

Nice interaction. Pay attention to obvious focus state of magnifier icon.

Obvious focus states

When it’s time to talk about obvious focus states first thing that comes to my mind is Smashing Magazine. Click on link and then try to use Tab key to navigate through website. It’s a really nice example of how you have to help people with loss of vision to determine where the focus is. Clear and bold focusable controls:

Smashing magazine focus state

Material.io is good example in this case as well:

Obvious focus states on material.io

Create semantic layout for screen readers

You may hear about tools called Screen Readers. They read content on the screen of device for blind user. By the way, I highly recommend to watch a video about how blind person uses his gadgets with screen readers (it’s on Russian 🇷🇺, but you are able to use one more assistive technology — captions):

How a blind person uses his gadgets

Sounds easy. But not for developers, and if to dive in a little — not for designers as well. To explain why, below a little example. Here you can see some kind of competition table:

How screenreader can read this competition table?

How regular user get information from image? Of course, using his eyes — connecting lines together, and by moving from left to right (by the way, interesting material about fast non-controlled moving of eyes from left to right — saccades, you can read here). And we can observe that in the first game between George and Fred George won. In the second game, between Linus and LucyLucy won and so on. Ginger is competition winner. But how blind user can get this info?

Let’s try to mark objects by special tags:

Let’s help him!

Now blind person will receive information something like that:

Round 1. Game 1. George and Fred. George won. Game 2. Linus and Lucy. Lucy won…

Make sense? I think, yes. However, in web there are a lot of types of objects, not just winners and games. And their names and rules combined in special guides called ARIA created by W3C:

ARIA guidelines

In these guides you can find how to develop website, namely HTML structure, according to accessible approach. Remember statement about good coding practices at the beginning of this long read? That’s what I meant. ARIA forces developers to use semantic tags and special meta tags within HTML:

Using ARIA

We point to screenreader what that element is (role=”menuitemcheckbox”), its state (aria-checked=”true”) and what role of image inside this control (role=”presentation”). Based on that information we also have to create right interaction. For example, dropdown should be opened by taping Enter or Space key and should be closed by Esc.

Skip to main technique

Usually platforms provides self-designed assistive tools such as screen readers (Narrator in Windows, Voiceover in MasOS and iOS). However, sometimes users prefer other solutions such as NVDA or JAWS.

Blind people hear screen reader’s speech so many time so they intentionally increase speed of pronunciation, sometimes in 3x times. Will you be able to recognize something in screen reader’s speech of blind programmer:

Screenreader speed of blind programmer

Do you know anything about alternative text of image? It’s what screen reader will talk to blind user when he recognizes the image in the markup. While accessible HTML structure developed, the programmer usually faced with the problem how to describe what image contains. It’s won’t be mandatory soon because Google AI can describe image content by his own.

Google AI

You can use condition algorithm developed by W3C to determine Alt text. You just need to go from top to bottom and ask yourself questions from table. If the answer is “No”, you have to go deeper, on the other hand you choose advices from right (blue) side of the table:

Alt-text algorithm

I was lucky to visit in Van Gogh museum in Amsterdam and I was really excited by accessible painting (Sunflowers). Yes, accessible painting:

You can smell it — oil odor.

You can hear it — audio description (something like alt-text, yeah?).

You can touch it — such as Braille painting, you know…

Of course, you are able to observe it.

Amazing experience!

Keep in mind users with colorblindness

How users with color blindness will read such infographics as piecharts, barcharts, stackcharts, etc.? Popular joke comes to mind:

Let’s help them with additional markers like symbols or icons. With adding unique pattern we can achieve better experience for people with that type of vision disability. Thanks Pablo Stanley, for tremendous animation:

Use patterns and labels with infographics

One more example related to a similar case. Now try to figure it out: how many of input fields on the image below are in error state:

Form fields in grayscale

My answer was 1. Because I just saw Code field with warning icon. And let’s check correct answer below:

Invalid values in input fields

4 incorrect fields. That’s why you should distinguish incorrect fields not just using colors.

What about game design? How gamers with color blindness can distinguish that variety of markers, progress bars, statistics tables, etc.? Many of them has special modes for gamers with color blindness like Call of Duty:

Colorblind assist in Call Of Duty

One more great example outside of web but in real life — EnChrome glasses for color blinded people. The EnChroma lens technology is based on over a decade of research effort to understand the causes of color blindness and how to engineer an optical technology platform to address the problem. Long story short — they bring colors to people which never saw it before. A bit physics how they did it. And the main thing — emotions:

EnChrome glasses

Bonus. How blind users type text on iPhone?

Hearing difficulties 👂

The best way to provide assistance for deaf people or people with low-hearing is captions. But it’s a bit more complicated as it seems. Material below.

Provide transcriptions for audio and video materials

The biggest trouble in captions and transcriptions is basically to write them because of sometimes huge volumes of content. Especially for movies, serials or audio-books. One more barrier here is internationalization.

Revolution came in 2009. Google announced automatic captions on YouTube. Here machine learning and neural networks work:

Google announces automatic captions on YouTube

Provide more options than just a phone for deaf people

One more phantom menace is feedback options variety. How deaf person can ask for help from support by phone? SSE website is nice example of how we should do:

More options to get in touch for deaf people at SSE

Folks from SSE provide user with next keep-in-touch options:

Apple developed special features in iPhone for people who use hearing aids. User can change volume level between two aids separately and microphone sensitivity as well:

Hearing aids made for iPhone

One more cool feature is flashing while person has incoming call. Also, you are able to set different vibration patterns for different caller.

LED flash function on iPhone

Learning disabilities 🧠

Honestly, people with this characteristic doesn’t like word disability in this phrase. They prefer the difficulty learning in a typical manner. Therefore, some people described it as having a learning difference. Here we will talk about dyslexia, memory issues, and other cognitive disabilities.

Don’t put label inside inputs

Some people have troubles with their memory. They can’t absorb much information through verbal communicating. And next example is about how you shouldn’t do. It’s a pizza delivery service. I filled in form with my city, street, apartments num, floor, etc. Then before check out I decided to recheck all information. But how I can figure out where actually number of my house and where number of floor?

Instead of making that mistake we have to investigate smarter ways to keep layout clean and provide good functionality and transparency. In my opinion the best solution is floating labels. Your placeholder floats a little at the top while user focuses on the input field and become a label at the same time:

Floating labels

Focus on readable content

Also, don’t forget to take text under control. I hope content you are reading now is laconic and descriptive enough. Because sometimes I feel myself like this guy:

To avoid this, there are 3 simple rules to do great start with content management in UX:

  • Break up the content with headings, lists, or images to give mental breaks
  • Headings, links, controls, and labels should be clear and descriptive
  • The ideal line length is often between 45 and 75 characters.

If you’re not sure actually is it easy enough to understand your thoughts, here it is: Hemingway Editor. Text will be highlighted with red in places where it’s really hard to get the main idea. Mostly it’s related to long, complicated and multifaceted sentences. Yellow color — situation not so bad but text still need to be reviewed. Moreover, Hemingway suggests some more options for complicated statements and constructions (blue color).

Hemingway app

Add labels for tricky controls

Some information about icons. Let’s play a quick game with icons below. Could you guess what every icon means in one of the web app?

1st one look like wifi, second related to profile maybe or search for a specific person, the next one is something about the job, then maybe library, and finally, hmmm…waiting room?

Answer below:

Strange choices for that labels, do you agree? Nielsen Norman Group recommends to use 5-second rule while you choose icons:

Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.

Nielsen Norman Group


Take decorative fonts under control

Because users with dyslexia may have some troubles. Have you ever heard about dyslexia? It’s a type of reading disorder while person has problems with getting information through traditional reading. Also, it’s known as word blindness. People with this characteristic may see text like that:

There is completely free typeface exists which aim is to struggle with problems of reading by users with dyslexia. It’s called OpenDyslexic. No one told you to use it everywhere. This typeface used mostly as a Chrome extension.

OpenDyslexic typeface

Mobility issues ♿

The biggest part of people with disabilities by type is ambulatory (mobility). In terms of web accessibility, we have to pay attention to users that can’t use mouse. In other words, keyboard-only users.

Create “Keyboard-only” flows

In UX design we have a set of basic metrics to evaluate the usability of a product. They called heuristics (created by Nielsen Norman). And one rule called Flexibility and efficiency of use sounds as:

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Using keyboard only flow means to provide more experienced users with faster access to hidden features and functions. Moreover, it is applicable for accessibility approach as well. Namely for people that can’t use mouse by motor issue reasons and for blind users because they use the keyboard too.

What keys we are using to navigate through webpage content? Mostly arrow keys, TAB, and Enter or Space to confirm action:

Keys used to navigate through web pages

Order of elements that can get focus isn’t random. WCAG also provides rules for that. With ARIA guidelines usage developer can set tab order on page programmatically. As a designer you need to show him what order would be the best for user experience. And nice example here:

Basic page structure

Firstly user navigates though heading, then subheading, side navigation, main content and finally footer. Pretty basic flow for the most part of websites. In more interesting cases, such as clothes buying, tab order will be like that:

Material design guides about tab order

Avoid using complicated controls

Keyboard-only approach is not so easy as it seems because of complicated controls existence. Let’s review dropdown with nested edit/remove/view profile actions:

How interact with it using keyboard? Dropdown will be expanded after user clicks space or enter, then we can navigate through options list with UP and DOWN arrow keys. But what key user should hit to delete for example the first option? And our “progressive” and “smart” functionality become a problem for users with mobility issues. My advice here is to use more clean and classic interaction patterns. By the way, group of enthusiasts created something like web accessibility helping center called The A11Y project. At this place, you can find designed and implemented patterns of interactive controls. You are able to view how they are coded and what keyboard interaction flow used:

A11Y patterns

So far now, you are maybe disappointed about your cool drag and drop features. But creative minds suggest great solution of reordering objects using keyboard-only approach:

Example of non-obvious keyboard interaction pattern

Not only arrows and tab used by experienced users. Of course, shortcuts gain their experience to the next level. Look, how many shortcuts dropbox paper provides to users:

Paper shortcuts

Imagine how easy now blind user can create new document using just 1 shortcut instead of navigating the UI with screenreader!

And going away from web, one more thing from Apple. People on wheelchair can enter workout mode in Apple Watch. They can track activity by scanning and analyzing hands movings. Even more functionality available: measure distance, calories and setting goals:

Apple watch. Wheelchair user mode

Microsoft designed great experience for controllers packaging, namely for gamers with mobility issues. It can be unboxed without using hands:

The packaging of Xbox controller for users with mobility issues

Work on your interaction carefully

Next example is not about keyboard-only flows. It’s more about people who use mouse but not at the high level. I mean users with involuntary movements. They may find it hard to point mouse explicitly on checkbox and we could help them here:

Simple checkbox hovering interaction

We have the same story with label+input constructions. It may be problematic to put focus on a thin input field (even for people without motion disabilities). The solution is to put focus inside input field by triggering its label:

Clickable label

Seizures 💥

Some people with seizure disorders can have a seizure triggered by flashing visual content. And most people didn’t know that they have this disorder until it happens.

Content with flashes and unexpected loud sounds

I suggest you do not use autoplay of video and audio content on your website. If sound unexpectedly was set too loud it may have the next effect:

For some of you, it can be sound not so important and serious. But it can cause really sad effect. For example, American journalist Kurt Eichenwald with epilepsy was attacked via twitter using a strobe:

Tweet sent to journalist with epilepsy

Sad story happens in 1997. Famous cartoon Pokemon sent over 700 children to the hospital. Colored flashes triggered seizures. That episode is presented on video below. Watch it carefully.

Banned Pokemon episode

Some of content maybe won’t trigger a seizure but easily will make people sick. Example from NY times below could cause a headache, dizziness, and nausea:

NY Times. And more examples

Modern technology called virtual reality also can cause motion sickness and nausea. That’s why Play Station 4 console present caution about using VR experience:

In conclusion 😌

If you came so far I would like to share you my respect. I hope all the stuff above was really interesting. I understand that if we will apply all rules and aspects of accessibility in our products it could become not so beautiful and gorgeous as we expect. Therefore, my advice just to keep in mind potential problems with content and functionality you are designing. In some cases, I hope, you will stop at the moment and try to check contrast of your text or turn on screenreader and try to listen to your webpage with closed eyes using screen reader. And maybe these actions will force you to change something in your design according to accessibility standards.

“We don’t have the budget for it.”

“We’d love to, but it’s not a priority for us.”

“We don’t have enough time for it.”

Whatever the objection might be, it’s usually coming from the viewpoint of accessibility design being something extra, or even a waste of time. Accessibility design is widely accepted as a part of the design process. So, let’s stop treating it like it’s an unreachable goal.

Moreover, let’s share our love with each other, even if this other is not the same as all, because in this case, we can make this world a better place for all.

Helpful links 🔗

I am Vladislav Averin, user experience designer working in Minsk, Belarus.

You can contact me via: LinkedIn | Dribbble | Facebook | Instagram

Design Spot

It's community for researchers, interface and experience designers and ones who interested in this theme.

Averin Vladislav

Written by

Experience Designer, Belarus

Design Spot

It's community for researchers, interface and experience designers and ones who interested in this theme.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade