How to unite accessibility and aesthetics in digital design

Many of the projects we do at Unc Inc require a high level of digital accessibility. This means we have a strong focus on removing any barriers that might prevent people with certain disabilities from using features or consuming content. But why should we care about accessibility? And from a design perspective, how can we comply with guidelines without compromising aesthetics? In this article product designer Semih Yilmaz hopes to win your heart and mind for 'inclusive design', and inspire you with some examples of design that isn't just accessible but also beautiful.

December 1, 2020
placeholder

Why it's important to design for accessibility

As a responsible designer, you should never lose sight of your (digital) product's impact on the people who use it. Part of this responsibility is ensuring that everyone can take full use of it, regardless of ability, situation, or context. Beyond ethics, though, there's also commercial gain to be found when you improve digital accessibility. For one, improved accessibility tends to improve general usability and performance at the same time. But most of all, as you optimize for accessibility, you also optimize for indexing by search engines, for SEO! Basically, making your digital services accessible to the 20% with functional disabilities means making your services better accessible to 100% of your target audience. (Read more about The Business Case for Digital Accessibility).

Our vision and approach as digital designers

At Unc Inc, we see accessibility as part of a broader topic that has been widely discussed: inclusivity. It’s why we don’t limit ourselves to design our products to be usable and accessible for people with functional disabilities. We also include the elderly, people with socio-economic limitations, even people with a poor internet connection (e.g., our work on the international knowledge centers for information resources on leprosy and neglected tropical diseases). In fact, we even created a mobile app that helps you experience a disability yourself. In this case for educational purposes by enabling nurses in retirement homes to ‘experience’ dementia.

To make sure we tick every box, we’ve been using the Web Content Accessibility Guidelines (WCAG 2.0) to inform our designs. At times this can be discouraging as these guidelines can feel like limits to your creativity. We however, would much rather see them as a challenge as we feel accessibility should not be a barrier to great design or innovation. So instead of limiting ourselves we try to go beyond the guidelines by adding aesthetic touches to not only make it accessible but also beautiful.

By means of inspiration, please check out some examples below of how we approach this challenge.

placeholder

1. Add enough color contrast

According to the World Health Organization (WHO)there are over 200 million people with vision impairment. As many with low vision have a hard time reading online text, an easy win is to provide enough contrast between the colours of text and its background on your website.

My favorite tool to check the contrast in my designs is Stark, a plugin for Figma, Sketch & Adobe XD. With this tool, you can quickly check contrast by selecting two layers with different colors and see whether there is sufficient contrast between them. If not, it will conveniently give you suggestions to help you out.

placeholder
placeholder

For instance, I had to slightly adjust the brand colors of one of our clients to make things more readable. It’s not like I let go of their style by completely revamping their color palette, I just used the suggestion that was the closest to their current color. From there on I was able to make their whole brand, together with their product, a bit more accessible.

2. Add visual clues to make information more understandable

People with color blindness or low visual acuity will have difficulty understanding your content if you only use color to communicate something important, show an action, or prompt a response. The best way to include those people in your designs is to combine color with an extra indicator such as patterns, labels or motion.

For instance, when communicating an error, don’t simply rely on colored text alone. Instead, add an icon to give it a bit more context. Or when you create more complex elements such as charts and graphs, those will be harder to understand when you only use color to distinguish the data. My advice would be to use additional visual aspects to communicate information. Think of shapes, labels and varying sizes. You can also try to incorporate patterns into your fills to make the differences more visible.

placeholder
placeholder

When I design buttons, I always make sure I use two differentiating factors for the mouseover state, like a different color shade combined with either an appearing shadow below the button or a moving arrow.

3. Add labels to form fields

When designing forms, using placeholder texts as labels is one of the biggest mistakes. It has nonetheless become quite popular which makes it, frankly, sometimes tempting to jump on the trend train. However, placeholder text is usually gray and has low contrast, which is therefore hard to read. So better not board that train.

As some people can forget what they were typing, it doesn’t help either that the labels are then gone. Make sure that people always understand what they should do and write in a form. When hiding descriptions or directions in their forms, designers are sacrificing usability in favor of simplicity.

placeholder

When I design forms, I make sure that every input field has a label on top, a placeholder in it when possible, and a distinctive stroke color around it. And I make sure that all form elements like input fields, radio buttons, checkmarks, and selectors are stacked vertically, which is easier for the eye as people read from top to bottom.

4. Stick to semantics in your content structure

Headings establish the hierarchy of a page’s content. They give the reader an indication of where the content starts and what its purpose is. Titles with various font sizes help to understand the order of the content.

For instance, the highest level heading (h1 tag) should be larger than the heading from a deeper level (h2 tag). And the h2 heading should be larger than h3 and so on. You get the idea.

Using a clear hierarchy with heading helps the reader understand your content and communicate to the browser what content they contain and how it should render or treat it. It also allows screen readers — which are used by blind people to “listen” to a page — to read the content in the correct order. (Read more about semantic structure at WebAIM.)

5. Design your focus states

By default, browsers show outlines on elements that are selected. These are called focus indicators. If you're like me, you might find these default focus indicators ugly and could be tempted to hide them. However, if you remove the default style, make sure to replace it with something else instead. Otherwise you'll exclude people who require screen readers, individuals with limited mobility, or power users who prefer the keyboard as their primary way of navigating the web.

The elements that need a focus state are text links, form fields, buttons and menu links. With a focus indicator, they essentially need to look different from the elements around them. It's okay to design a focus indicator with your brand colors. Just make sure that the state is clearly visible and has enough contrast to stand out from elements surrounding it. (Better understand accessible application of focus states at W3C Focus Visible.)

Bonus tips ?

With Christmas approaching we feel inclined to 'gift' some extra tips that we think are almost as important.

Include accessibility in your workflow
When designing or doing design research, verify your assumptions about accessibility and take advantage of every opportunity to improve.

Get an Accessibility Audit
Use an audit service to determine if your product works with assistive technologies and meets the minimum WCAG 2.0 level AA. Use those results to fix problems and follow with another test to see if you nailed it.

Include useful alternative text for your images
Not necessarily a design thing but if you want to do more to increase your product’s accessibility, describe within the <alt> attribute of the image what’s happening and how it matters to the story.

Conclusion

There you go. You made it! You've just read my five tips that will help your designs become inclusive while remaining equally attractive.

At Unc Inc we’re still working to see how we can better incorporate accessibility in our design process. And also personally, it's still something I'm trying to improve on. But as I explained at the beginning of this blog, it’s worth the effort for many reasons. Therefore I encourage you and everyone to consider these guidelines as part of your process and contribute to the rise of an accessible and truly inclusive web. In fact, let’s strive to create technology that is usable and available to all humans, regardless of their abilities, economic situation, age, education or geographic location by adding responsibility to our set of design skills.

Read more of our insights on digital accessibility and inclusivity

Go beyond the persona and read Marie van Driessche's critique of the Design Thinking process and exploration of better ways to make inclusivity and accessibility an integral part of your design process.

Ready to get your hands dirty? Then check out these 4 easy tips to improve your digital accessibility from our frontend developer Boaz Poolman.

Fast-track to a more accessible website?

Through a number of projects that were legally obliged to comply with guidelines for accessibility, we've gained quite some knowledge and experience on the topic, making some of the best practices part of our standard process. Could you use our help to improve your own online experience?