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.
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.
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!
