Accessibility in design: How to get started?

Sharing ideas with one another can be a great way to motivate and inspire others in order to grow as a team. It can also help produce work that surpasses expectations. At Divami, we have formed what we call a ‘Design club’ where we organize weekly sessions in which we learn a new topic or discuss how to do something better.

In this blog, we are going to look at ‘Accessibility’. We will cover the basics of accessibility and best practices to use in our projects; which will allow us to reach more users, without having to compromise on timelines and budgets.

As designers, we have the responsibility and power to see to it that all the users can experience the product we create regardless of ability, context, or situation. 

More often than not, businesses have these questions when we talk about accessibility in design. ’Isn’t it expensive and time-consuming to implement?’, ‘How is it even going to help my business?’, ‘Solving for the minority will not really affect my numbers…’. With this blog, I would like to answer all these questions and let us all make the design more usable and useful to everyone.

First off, Why accessibility is important for a business… 

Studies show that accessible products and websites, reach a larger audience, is SEO friendly, and overall have better usability. Most of all it will make all the users happy with the product or website, therefore increasing customer satisfaction and retention rates tremendously. And did you know that solving for accessibility sometimes even makes your core experience much smoother? BTW, if you are interested to know more about accessibility, learn from the experts at IXDF here. 

Accessibility as defined by Web Content Accessibility Guidelines (WCAG) consists of a wide range of accessibility criteria that will make a design accessible to everyone. In order to make a design match the pinnacle of accessibility set by WCAG, it does take a considerable amount of time and effort. Doing this for every project will not be feasible in most cases. But… fear not, in the following sections, I have covered the top 4 most effective ways that we at Divami think any design should have to have the design reach more users.

1. Color contrast

Colour contrast is one of the most important and simplest fixes to make designs more open and accessible. According to WCAG guidelines to achieve a AAA rating there needs to be at least a 4.5 to 1 ratio of contrast between a text and its background. The larger and bolder the text, the lower is the contrast ratio requirement. It is highly recommended to create your designs with a AAA conformance rating for text contrast.  At the very least, they should have a AA contrast ratio for text.

Text is one of the most powerful driving forces of any application or website. Hence, having proper contrast can mean the difference between life and death in an SOS application. Or, it could also mean that users never find the right button to purchase your product on an eCommerce website.

2. Don’t make color the only indicator

Color should not be used as the only visual means of conveying information, indicating an action, promoting response, or distinguishing interactive elements. People with vision impairments will have a hard time distinguishing the elements on the screen. Did you know that nearly 1% of your user base in most cases is color blind?

To test this use tools like a color oracle to simulate greyscale and see if you can still distinguish between all the important states and elements. When you find issues don’t forget to use shape, size, texture, and labels to distinguish elements from one another. A great example of this is the status setting on Gmail.

The status icons are still evident even if the user has color blindness due to the shape

3. Use labels for form fields all the time

In order to make designs more sleek and modern, sometimes we designers forgo the usage of form field labels and replace them with placeholder text. The problems in doing this are two-fold. One – The contrast of placeholder text is very low thus breaking the first rule we discussed above. Second – People often tend to forget what they are typing. By adding proper form labels, we are not only being inclusive to the people with vision impairments; but also making the form more usable for everyone! This is a classic example of designing for accessibility making the overall experience better

These are some basic tips and tricks that all our designers use at Divami to make all our products more inclusive and accessible. Try out some of these tips and let us know if any of these helped you out! 

Another final tip: Build a component library for your project using these principles to make sure that your designs are automatically accessible throughout.

Naturally, as designers, we design for everybody and aim for a product that is accessible to all. While it’s impossible to cover all use cases, our efforts to reach all users can pay off sometimes unexpectedly.