Before we understand how to design inclusive products, we need to understand what is accessibility.
Accessibility refers to how accessible an app or website that we design is to disabled users.
19% of the world is disabled in some way or another, which makes it hard to neglect accessibility. Blindness is the number one cause that hinders people’s ability to engage with interfaces. We as designers need to consider people who have difficulty reading, interacting, understanding, and or hearing.
Luckily, the WCAG 2.0 – Web Content Accessibility Guidelines and its sequel, WCAG 2.1, offer rules and tips for improving accessibility. Also, there’s the ever-useful A11y Project, which also includes tests.
Inclusive Design
Does catering for disabled people affect non-disabled?
Does it ruin their experience? Absolutely not, or it shouldn’t!
Accessibility improvements won’t diminish the experience of non-disabled people in any way. In fact, they too will have a much better experience, and this is ideal, right?
We don’t want to be designing two versions of everything.
Providing people with the same experience is called inclusive design, and this does not only benefit the people who are using it, but it’s morally incorrect to neglect a certain set of people.
In fact, denying access to disabled users is subject to human rights and discrimination laws worldwide. Beyonce and Target have both been sued due to a lack of web accessibility.
Visual Impairment
There is a specific medical definition of what is low-vision, but what we mean in terms of accessibility is those who experience a visual impairment that isn’t color blindness.
The extraordinary thing about designing for low-vision blindness is that even those with optimal visual acuity (also known as “20/20 vision”) can benefit from improved accessibility.
The simplest thing you need to do is:
- Optimize font sizes
- Improve color contrast
- Support screen readers
Ridiculously, a lot of websites expect visually impaired people to find a hidden link majority of times in their footer or if they are an app somewhere hidden in the settings. Having the option to turn is good, but what is not is having the font size is a minuscule 13px; so not only is this counter-inclusive accessible version difficult to find, but even those with optimal vision will find the text elements difficult to read because of the small font size (the browser default is 16px).
WCAG 2.0 requires that layouts fluidly adapt to all screen sizes upwards from 320px, and remain fluid even when the viewport is zoomed to 200% — this is to ensure that text elements aren’t overflowing beyond the viewport accidentally.
Optimal Color Contrast
Color contrast is measured in numbers. The benchmark is WCAG 2.0, which is easily measured by using a color contrast analyzer, by far the best one is Stark and it works with Sketch, Figma, and Adobe XD.
There are two levels of conformity at AA and AAA, often times this is represented as a ratio. The ratio between pure white (#fffff) and pure black (#000000) is 21:1 and this is the highest ratio that two colors can achieve, however having a pure black background and a pure white text is hard for readability, something I talk about in the lesson of designing dark interfaces in UI Learn.
When we talk about the ratio you should be aiming the text size depends as well. The large text has better readability, and that’s why the colors might not need to be as contrasting.
If your text is 14px it has to be bold:
- AA: 4.5:1 – this is your minimum
- AAA: 7:1 – this is what you should aim for
AA-level accounts for the loss in contrast for those with low visual acuity, acquired and congenital color deficiencies, and the loss of contrast as a result of natural aging. AAA is a fantastic result to achieve, but it isn’t required. Anything less than AA simply = Fail.
Catering for color blindness
Different colors have different meanings. For instance, yellow can mean cheery or optimistic; however, this meaning can differ depending on the context or the customer’s culture. For example, yellow can also be used as a cautionary, meaning hazardous
And then there’s color blindness, or to use the technical term, Color Vision Deficiency, of which 4.5% of the world suffers from.
The different types of color vision deficiency include:
- Protanopia
- Protanomaly
- Deuteranopia
- Deuteranomaly
- Tritanopia (rare)
- Tritanomaly (rare)
- Cone Monochromacy (very rare)
- Rod Monochromacy or Achromatopsia (extremely rare)
Almost every device and operating system make it healthier to read at night by switching blue light to red, simply because blue light damages our eyes.
You need to keep this into consideration when you are doing interfaces that will involve a lot of reading.
Screen readers
Disabled people often use assistive technology, such as the screen reader as we also know it as text-to-speech, which essentially dictates text-based content to visually impaired people.
To help screen readers visual elements like icons, images, forms, and so on, should be accompanied by some text, or at the very least, invisible text descriptions (this is referred to as alt text by engineers).
You need to consider:
- What is the alternative text for images and hotspots?
- What is the alternative text for icons that don’t have visible text labels?
- If you have a video, do they have a transcript?
- Do you have logically ordered content, since screen readers read content from top to bottom?\
How to design for reading difficulties?
Having a hard time reading is one of the cases where designers often have trouble empathizing.
Some of us can’t read well, but those that do find it easier to interpret simple language anyway.
Complex words like terminology are often unavoidable. Thankfully, when terminology arises, all we need to do is explain the terms; and for abbreviations, either define them the first time they’re used or otherwise link to an external definition.
Dyslexia
Dyslexia affects around 20% of the world — it’s a relatively ambiguous disability, hence the wild statistics. Dyslexics find it hard to interpret words and letters, which doesn’t mean that we must use a dyslexic-friendly font, but some are clearer than others.
You need to optimize your typography and not just think of the fonts but:
- Would the alignment be left or right? Don’t just justify it!
- Line spacing should be at least 1.5x the font size (I cover more on line spacing in the lesson Type Essentials)
- Paragraph width should be at a maximum of 80 characters
- Use headings to structure content logically
- Ensure that the content doesn’t overflow the viewport
Taking into account motor disabilities
People with motor disabilities such as cerebral palsy, muscular dystrophy, multiple sclerosis, Parkinson’s disease, Lou Gehrig’s disease, essential tremors, arthritis, and of course old-age, can experience extreme fatigue, decreased muscle movement, or involuntary movement, resulting in difficulty using a keyboard, mouse, or touchscreen.
Accessibility for those with motor disabilities largely revolves around designing interfaces that aren’t tricky to physically interact with.
Simple Gestures
Ensure that tap targets are large enough for those unsteady with their hands, and also those with fat fingers. Size them at least 44px and space them appropriately. For links within a body of text, the 44px rule doesn’t apply, but there should still be enough spacing so that users don’t click the wrong thing accidentally.
Allow them more time
Some interfaces offer have a timeout due to security concerns (banking), you can reduce the frustration by letting people request more time, and after that inactivity can lead to a loss of data, simply issue a warning so there are no surprises
Anticipate errors
It doesn’t matter if people are disabled or not – we all make errors. It’s important to alert people when alerts occur. You can let people recovery data (if it’s really needed), verify their input, and enable auto-fill to reduce typing.
Using the tab key
Disabled people can navigate interfaces with the keyboard by hitting the tab key. The way you can make this intuitive is by making the first tab a link that skips to the main content.
Google does a great job at this!
Use accesskeys
Accesskeys are single-key shortcuts. While these are convenient for some users, disabled users meaning to hit, say, K, but instead end up hitting L, might end up Liking something by accident*. Keyboard shortcuts can also conflict with screen readers and various app or OS-defined shortcuts, so it’s best to avoid defining them completely.
Cognitive disabilities
Sometimes, apps and websites can be so difficult to use they’re literally headache inducing.
Improving navigation
Navigation can improve the experience for all types of people as we all know how stalling it can be. You can keep in mind the following to reduce friction:
- Highlight the current keyboard focus
- Maintain anchor text consistency when two links lead to the same destination
- Implement breadcrumbs to convey navigation
Eliminate unexpectantly
Elements that people don’t expect or layouts that aren’t consistent across screens, interfaces that abruptly change the keyboard focus, and other sudden changes not communicated beforehand — these types of cheeks are always a bad idea.
Remove autoplay
I haven’t met a person who likes auto-play videos; but regardless, the WCAG 2.0 states that there should be a mechanism to control any audio that plays for more than 3 seconds. Additionally, anything that moves, blinks, or scrolls automatically (i.e. carousels, animations, marquees, etc.) and lasts longer than 5 seconds should be controllable.
Hearing disabilities
Interfaces rarely use sound. However, if using sound adds to the experience, don’t neglect to include a clear visual indicator of what the sound means. For example, a satisfying “ding!” upon task completion could be twinned with a check animation. Additionally, combine audio with a transcript; and for video, closed captions. Naturally, sign language is optional due to the complexities of its implementation.
In conclusion
Disabilities are very very common and it’s great when designers approach them and meet all accessibility standards without having to sacrifice experience for the wider group of people.
