Accessible UX/UI: Designing for Everyone
Introduction
When it comes to accessibility in design a lot of people imagine something complex: special devices or unusually-looking UI. The problem is that a lot of specialists (and a lot of stakeholders) think the same way: "Accessibility is too expensive.” Surely, for large and successful products it's mandatory to follow guidelines. But for small freshly-launched startups it’s usually up to a designer to think and to push for those things. But even with almost no money we can make his or her work more accessible. Let’s imagine ourselves working at a small start-up with a limited budget busy with our MVP. What can we do if we want to embrace accessibility as a common practice?
Lucky for us, most of the accessibility practices are just best UX/UI practices.
Structure
Your page should have a clear and logical structure, where a user can understand where the header and footer, navigation, buttons and all other elements are easy to define. That is where a good design system comes in. Even the small product design system keeps you consistent and doesn’t let you - as well as user’s attention - slip away. As a designer you have to create clear landmarks and pass them to the engineers. When coded properly, they become a great help for people who navigate the page through the keyboard shortcuts.
One more important thing to mention - try to avoid roman numbers and letters for your headers, but use heading tags from h1 to h6 to create structure of the page programmatically. That will allow the user to quickly look through the page content and find a thing he is looking for.
Source: trailhead.salesforce.com
Text
The font shouldn’t be too small - 16px is the starting point for a body text. Text should be divided into readable pieces. It’s better to have subheaders for each of them. Line length should vary from 45 to 80 characters. It’s important to pay attention to the line height (a usual number is around 130%) The contrast ratio between text and a text’s background should be at least 4.5 to 1. Don’t use bold or italic for body text - they are for highlighting only. Please, please don’t use the image as a background.
Color and Contrast
Color is a great instrument for highlighting important information, but it shouldn’t be the only source. We have text styles, font size and spacing. It’s important to think about contrast too. There are a lot of instruments to help you with the color palette, and that is one of them http://colorsafe.co/ Avoid using pure black (#000) against pure white (#FFF). Extreme contrast at a single pixel distance reduces legibility and increases eyestrain for many users, especially users with dyslexia and light sensitivity. Low contrast on the other hand can reduce readability.
Source: www.smashingmagazine.com
Animation
Animation is quite a tricky subject, because it has good and bad sides. From one point of view, small and well-placed animation can help users navigate through the UI and explain some complicated steps. On the other side, repetitive, bright and flashy animation can cause headaches, nausea and dizziness. Use animation with care. It shouldn’t blink or flash faster than 3 times per second (WCAG 2.3.2 Three Flashes)
Flexibility
Designs should be adapted to the various screen sizes and screen resolutions.
Higher level of Accessibility
What if we want to expand our vision and try to practice accessibility even on the higher level? Elise Roy, the disability rights lawyer, in her TED Talk implies that we could totally change our perspective and design for the people with disabilities first. Plus, if we can embrace «accessibility first» practice, it can bring you unexpected benefits. There are a lot of things that were designed for the people with disabilities, that became so popular that even changed the world. Take text messages for instance. They were originally made for deaf people, but became the most popular way of communication. Or video captions also for those with hearing disabilities - it became so important for language learning all over the world.
Conclusion
As we can see, accessibility is not so difficult or expensive. It takes just a little broader vision for the designer and one more check-list to finish before launching the project.
Even implementing some practices will improve comprehension and welcome new users into your product. If you need help with UX/UI design, contact Jet BI.
