Accessibility is the design superpower

Laura Aalto & Kati Paavilainen14.5.2019ContentReading time 5 min

Digital services belong equally to everyone - regardless of the situation or the user. Read our experts' tips for improving accessibility.

Stress, cold fingers, a baby in your arms. Different types of situations, sometimes temporary ones, greatly affect our ability to function. Accessible web services and digital products are crucial in these situations. Check out our three tips to improve web accessibility!

A moment that limits your ability to function can be temporary, but a lot of us deal with lifelong functional defects. However, nothing justifies creating services that don’t serve everyone. As Spider-Man's uncle Ben said, “With great power comes great responsibility”.  Designers have the power, and thus the responsibility, to create services that are equally usable by everyone, regardless of the situation or user.

Accessibility is a very relevant topic, as this year the EU Directive on the Accessibility of Websites and Mobile Applications and the legislation it requires came into effect. You can read more about the directive on the Regional State Administrative Agencies site (in Finnish). In Finland there are more than a million people with functional defects who use web services. Accessibility should be taken into account in designing all digital services, but as we’ve already pointed out in our blog (in Finnish), accessibility makes services better for everyone.

How to design accessible services?

When a designer has enough understanding about accessibility, certain decisions come organically when designing services. Accessibility is tightly related to usability, so once a service has been designed according to accessibility principles, it usually also improves its usability.

The most important things to remember are a clear and consistent website structure, a good and versatile navigation and content that is easily readable. From the point of view of visual design the typography, styles and arrangement need to be clear. The contrast between the text and the background needs to be big enough to ensure the site is easy to take in by glancing or reading. Furthermore, information like diagrams and infographics need to have visual cues like icons and text in addition to colors. Links within text should be clearly marked by underlining, for example. Next, we will go through some common accessibility issues and how to solve them.

Three ways to improve the accessibility of your service

1. Make sure there is enough contrast

Make sure that the contrast between the text and background is big enough (at least 4.5:1 on the Web Content Accessibility Guidelines 2.1 level AA). Some color combinations might work extremely well for people with perfect vision, but it can be challenging for a colorblind or weak-sighted person, which in turn makes reading impossible. Contrasts are especially important on mobile devices that are often used outside in the sun or by night on a darker screen. There are multiple tools for checking the contrasts, one of which is the Web AIM Color Contrast Checker.

Placing text directly on top of an image is challenging to begin with, as a patterned and multicolor background makes reading much more difficult.

The image portrays an example of an image that has a low contrast between the text and the background, which renders the text unreadable. Means: don't do it.

The image portrays an example of a text that has a good contrast: black text on top of a white box, making the text readable and clear. Means: do it like this.

If you want to place text on top of an image, a good way of guaranteeing readability is adding a background color for the text block.

2. Avoid placeholders in fields

Web services are full of forms with placeholders (e.g. a field with the text “email”). Placeholders are often light grey and, for this reason, hard to read against a background. They also often disappear when the user adds text in the field, which decreases usability. A designer should never assume that user can remember or know what to do when filling out a form. Due to this, labels on input fields are recommended in forms – they don’t disappear, and the user experience is smooth when the user can always see the context.

An example of how to stylize forms. On the left side (the don't-side), the form fields are light grey and low contrast, making the form placeholder texts nearly unreadable. On the right side (the do-side), the form uses label input fields, meaning the labels are above the fields.

3. A clear content structure

A well-planned hierarchical content structure helps the user understand and read content. Users with visual challenges, for example, gain from consistent content when they can easily just glance at headings and get an idea of the content. Screen readers (in Finnish) also make use of headings, and on top of all this, a clear content structure is good for SEO purposes.

The font should be big and clear with the spacing set wide enough to make reading easier and avoid lines jumping. You should also pay attention to the length of each line: a suitable line length is around 80 characters.

Make your service accessible

Businesses gain a lot from the fact that accessibility has been taken into account from the get-go when designing a web service. This improves its usability, makes it SEO-friendlier and reaches a wider audience. And, it’s easily guaranteed that all users have equal opportunities to use the service.

Are you interested in learning more about accessibility in web services and how to improve yours? Our accessibility experts can help you get started. Contact us and we’ll be happy to help!