5 tips for universal design

Universal design of ICT is about designing websites, apps and self-service machines so that people can use it regardless of their disability. Those who use your website may be visually impaired or blind and therefore dependent on screen readers. You may have some users with disabilities who use keyboard only or other tools to navigate the website with, or users with cognitive disabilities.

We've put together five tips on how to make the site accessible to as many users as possible.

01 Typography - make your website easy to read

Your website should be easy to read. Those who use the website may be visually impaired, may have cognitive impairment, or may simply want to scour the content of the page. Simple design concepts such as using the right size of the text, length of lines and subheadings help here.

In documents and on print it is common to use 12 points on text, while on screen this text becomes very small. It is recommended to use 14 or 16 points instead. The text should also stand out above the background. Avoid long texts on images and, if necessary, use a  semi-transparent background color.

Long lines are harder to read, and the long distance from end to start of the next line can also interfere with the reading fluency. For a single-column page, 45 to 75 characters are considered  satisfactory length. It also helps with the fluency that the start of each line is consistent. The body text should therefore be aligned to the left and not centered.

Divide the text into paragraphs and use headings and subheadings. This makes it easier to understand the structure of the text. Make sure the headings are bigger so that they are different from the body text. 

02. Contrast for the visually impaired and color blind, but also those who are out in the sun.

It is of little help that the text is large enough if you have light gray text on a white background. Good contrast on texts, buttons and icons is very important. This is not only for the visually impaired, but also for users who have low brightness and contrast on their screen, such as when out in the sun.

For the content to appear clearly enough, the contrast should be 7: 1 on small text (eg body text) and 3: 1 on headings and larger illustrations and icons.

03. Proper use of alt text

Alt text is a texts that can be read by screen readers so that those who cannot see the image won't miss any important information on the page.

A typical mistake is to start the alt text with "Picture of ..". or "icon for ...".  The screen readers knows that the content is an image, but it needs a text to describe it to the user. Therefore, use the alt text to describing the image rather than explaining that it is an image.

It is also important to be detailed if it is important to the context. The alt text should not consist of keywords, but be a complete sentence. An example of bad alt text for the image above would be "Person with mask, graffiti wall". A better alt text is "Man wearing a white Guy Fawkes mask, while facing the camera in front of a graffiti wall." The maximum length of the alt text is 125 characters, so make sure the text is not too long.

04. Make the links stand out from the text

Links in the body text can sometimes be difficult to see, especially for the visually impaired and color blind. The links should therefore be clearly distinguished from the text around, both in color and underline. But it is not just in the design that one can make a difference, it also matters what text you use. We often see links at the end of a sentence that are named "here". For example, “Read about our services here”. Instead, you want to tell the user what the link does or what content it links to. A better link text would be "Read about our services".

05. Make the texts easily understandable

This tip is very much related to the first, but this is more about language and content production than design and layout. Keep in mind that some users might have some cognitive disabilities. A simpler language and shorter sentences might make it easier for these users.

• Make your texts short and precise. Avoid writing long paragraphs that cover several topics.
• Use bullet points if possible.
• Simplify the language. If you use abbreviations or subject terms, it is wise to explain these the first time they are used.
• Use images and illustrations to divide the content and to illustrate the main points.

In short

You want your website to be accessible for everyone. I’ve mentioned a few ways to improve your design, however these are just some tips to keep in mind. Should you have questions or need some assistance in making a better experience for your users, don't hesitate to contact us.