An introduction to Accessibility in Design
Accessible Design
The design practice in which the needs of people with disabilities are specifically considered.
Universal Design
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.
Why Should We care
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.
Users of Accessible Design
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.
When to think about accessibility in products
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.
Accessibility Standards: How to make products accessible
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
1. Use of colors
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
Tool: Color Oracle
2. Low Contrast
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
3. Focus state
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.
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.
4. Forms and Inputs
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
5. Non Text elements like images
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.
Conclusion
Let’s change our mindset. Instead of designing for disabilities, let’s design for EVERYONE.
Credits:
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
