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 (numeronym — A11Y).
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:
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:
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:
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.:
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.
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:
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:
- How to check contrast on complicated shadows?
- How to check contrast on images?
- 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:
But it hides while user moves mouse out of i icon. This behavior is not correct at all. And how it should be:
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?
Material.io. Beautiful and usable:
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:
Material.io is good example in this case as well:
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):
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 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 Lucy — Lucy 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:
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:
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:
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.
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:
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.
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:
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:
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:
My answer was 1. Because I just saw Code field with warning icon. And let’s check correct answer below:
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:
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:
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:
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:
Folks from SSE provide user with next keep-in-touch options:
- SignVideo service (conversation to one of the advisers in real time using BSL — British Sign Language)
- Textline
- Online form and email
- Webchat
- Social media (Facebook and Twitter)
- Paper letter
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:
One more cool feature is flashing while person has incoming call. Also, you are able to set different vibration patterns for different caller.
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:
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).
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.
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.
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:
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:
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:
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:
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:
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:
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:
Microsoft designed great experience for controllers packaging, namely for gamers with mobility issues. It can be unboxed without using hands:
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:
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:
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:
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.
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:
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.
