An introduction to Accessibility in Design

Accessible Design
The design practice in which the needs of people with disabilities are specifically considered.

Buses in Dublin has wheelchair access
Wheelchair Access on buses in Dublin

The design of products and environments to be usable by all people without the need for adaptation or specialized design.

Eg: Anyone can use the automatic door without adjusting.

Automatic Doors opens when you come in close vicinity
Automatic Doors opens when you come in close vicinity
Automatic Doors opens when you come in close vicinity

If we look just in Ireland alone, 1.1% of people in Ireland, that is, 1 in 100 people have sight loss (data for 2019). Also, 1 in 12 people in Ireland will acquire a permanent hearing loss, experts estimate (source). These are data from just one country. So we should care about accessibility because it will:

1.Appeal to a large audience

The website and applications which we design will be used by millions of people all over the world and will increase the market reach. So, we must make our applications accessible because a large percentage of those users will have some form of impairments.

2. Avoid legal risk

The Convention on the Rights of People with Disabilities (CRPD)was passed by the General Assembly of the United Nations in 2018 to have equal access to communications technology. The Government has mandated that all contents on the web meet minimum standards set by them. If not there might be a lawsuit. List of some of the lawsuits related to accessibility.

3.Better search results

These products have better usability. Also, while developing a website or an application that is accessible, there are certain coding techniques you need to use which makes them SEO friendly.

When considering accessible design, in practice, we are talking about people with some forms of impairments. These people use some assistive technology to aid them. Also unless we are Benjamin Button, we are all getting old so that must be kept in mind while designing as well.

Some form of impairments are Visual, Auditory, Motor, Cognitive
Some form of impairments — Visual, Auditory, Motor, Cognitive

When you are building a product, design for accessibility from the beginning. During the Research phase include the people with impairments. Invite people for usability testing and validate your design. Their opinions matter as well. Remember making changes after you have designed is quite expensive and time-consuming.

There are a lot of things to take care of when designing for accessibility. The World Wide Web Consortium has developed a series of accessibility standards WCAG (Web Content Accessibility Guidelines). There are different principles, each of these different principles have a success rating of either A, AA, or AAA. It is recommended to keep your website to at least AA levels of conformance across the websites and applications by following different methods mentioned there.

Tools To check common accessibility problems:
1.Wave by webaim
2.Accessibility Insights for Web chrome extension by Microsoft
3.achecker

Whom does it affect: people with low vision, color blind

Why is it important: People mentioned above will miss visual cues, critical information, an action, a response which are shown using just colors.

Example:

1. When designing form don’t use just color to denote error state
2. Don’t use color to denote links
3. In charts- use shape, labels, pattern fill to distinguish one from each other
4. Notification bar don’t show error/success/warning state with just color

The image tells to add a error label or icon for error state, using icons in notifications and using underline for links
The image tells to add a error label or icon for error state, using icons in notifications and using underline for links
What to do and not to do when designing some components

Tool: Color Oracle

Whom does it affect: people with low vision

Why is it important: If there is not enough contrast between text and background, the text will not be legible. Not everyone has good eyesight. Sometimes it will put more strain on eyes to read low contrast smaller text.

Exemption: Logo, elements(buttons, menu items) in a disabled state

For Conformance Level AA:
Font size > (24px / 19px Bold) Contrast 3:1
Rest (small size) Contrast 4.5:1

Tools:
1.WebAIM color contrast checker
2.Colorsafe
3.Contrast app for mac

Whom does it affect: people with limited motor abilities who use a keyboard or people who are blind and use screen readers.

Why is it important: Users can navigate a website by just using a keyboard or screen readers. It creates a focus state on the clickable elements.

Picture shows that twitter uses focus state to match its branding
Picture shows that twitter uses focus state to match its branding
Twitter matches the focus state to the branding of its website

How to check: Press tab and see if it follows the normal flow of the page, top to bottom, left to right, and enter to select any elements.

Whom does it affect: people with cognitive disabilities, blind users(as they use screen readers), users with a short time span

Why is it important: These users may have difficulty finding and interacting with fields without common visual cues. The screen readers may not read out what you need to enter without a label.

People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control.

Screen Readers: Just to give a taste of how screen readers read, download this chrome extension by Google ChromeVox Classic Extension

Image show the lack of label in a form field
Image show the lack of label in a form field
Form fields on a website, can you tell what the first input field is?

Whom does it affect: People with low vision

Why is it important: People with low vision often make use of screen readers to listen to the web. You should put the <alt> attribute on the <img> HTML element for the screen readers to read out what the images are. Also, Instead of writing what the picture is about, try to tell what story does the picture tells.

Let’s change our mindset. Instead of designing for disabilities, let’s design for EVERYONE.

1.Salesforce UX — 7 things every designers needs to know about accessibility
2.Designing for accessibility is not that hard
3.A primer to web accessibility for designers
4.Designing for accessibility is not that hard
5.Making accessibility design accessible
6.Springboard — accessibility in design
7.Difference b/w Accessible, Universal, Usable design

Product Designer with an experimental mindset

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store